singer7t679679/instagrambler-explorer

1// Smooth scrolling for anchor links2document.querySelectorAll('a[href^="#"]').forEach(anchor => {3    anchor.addEventListener('click', function (e) {4        e.preventDefault();5        document.querySelector(this.getAttribute('href')).scrollIntoView({6            behavior: 'smooth'7        });8    });9});10 11// Lazy loading for images12document.addEventListener("DOMContentLoaded", function() {13    const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));14    15    if ("IntersectionObserver" in window) {16        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {17            entries.forEach(function(entry) {18                if (entry.isIntersecting) {19                    let lazyImage = entry.target;20                    lazyImage.src = lazyImage.dataset.src;21                    lazyImage.classList.remove("lazy");22                    lazyImageObserver.unobserve(lazyImage);23                }24            });25        });26 27        lazyImages.forEach(function(lazyImage) {28            lazyImageObserver.observe(lazyImage);29        });30    }31});32// Instagram card hover effect33document.addEventListener('mouseover', function(e) {34    if (e.target.closest('instagram-card')) {35        const card = e.target.closest('instagram-card');36        card.shadowRoot.querySelector('.overlay').style.opacity = '1';37    }38});39 40document.addEventListener('mouseout', function(e) {41    if (e.target.closest('instagram-card')) {42        const card = e.target.closest('instagram-card');43        card.shadowRoot.querySelector('.overlay').style.opacity = '0';44    }45});46 47// Fetch Instagram posts48async function fetchInstagramPosts() {49    try {50        const response = await fetch('https://www.instagram.com/heer_hemnani/?__a=1');51        const data = await response.json();52        const posts = data.graphql.user.edge_owner_to_timeline_media.edges;53        const postsContainer = document.getElementById('instagram-posts');54        55        posts.slice(0, 9).forEach(post => {56            const postElement = document.createElement('instagram-card');57            postElement.setAttribute('image', post.node.display_url);58            postElement.setAttribute('likes', post.node.edge_liked_by.count.toLocaleString());59            postElement.setAttribute('comments', post.node.edge_media_to_comment.count.toLocaleString());60            postElement.setAttribute('date', new Date(post.node.taken_at_timestamp * 1000).toLocaleDateString());61            postElement.setAttribute('caption', post.node.edge_media_to_caption.edges[0]?.node.text || '');62            postsContainer.appendChild(postElement);63        });64    } catch (error) {65        console.error('Error fetching Instagram posts:', error);66        // Fallback to static posts if API fails67        const postsContainer = document.getElementById('instagram-posts');68        postsContainer.innerHTML = `69            <instagram-card 70                image="http://static.photos/travel/640x360/1"71                likes="1.2K"72                comments="84"73                date="2 days ago"74                caption="Exploring the hidden gems of Mumbai! #travel #mumbai"75            ></instagram-card>76            <instagram-card 77                image="http://static.photos/food/640x360/2"78                likes="2.4K"79                comments="156"80                date="1 week ago"81                caption="Food adventures never end! #foodie #delicious"82            ></instagram-card>83            <instagram-card 84                image="http://static.photos/nature/640x360/3"85                likes="3.1K"86                comments="210"87                date="2 weeks ago"88                caption="Nature's beauty is unmatched. #nature #photography"89            ></instagram-card>90        `;91    }92}93 94// Initialize when DOM is loaded95document.addEventListener('DOMContentLoaded', function() {96    fetchInstagramPosts();97    feather.replace();98});99