Cute Baby Image Galley - pexels api

Cute Baby Image Galley from Pixels Api with infinity Scroll

by MD Hasan Patwary

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Cute Baby Photo Gallery</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <div class="gallery" id="gallery"></div>

      <!-- Lightbox Container -->
      <div id="lightbox" class="lightbox">
          <span class="close">&times;</span>
          <img class="lightbox-content" id="lightbox-img">
      </div>

      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script src="script.js"></script>
  </body>
</html>

CSS

/* #gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-gap: 10px;
    grid-auto-flow: dense;
    align-items: center;
} */

#gallery {
    column-count: 4;
    column-gap: 10px;
}
@media (max-width: 575px) {
  #gallery {
      column-count: 2;
  }
}

.gallery-item {
    height: 100%;
    margin-bottom: 10px;
}

img {
    display: block;
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Lightbox overlay */
#lightbox {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Black background with opacity */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top */
}

/* Lightbox image */
#lightbox-img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Slight shadow for better visibility */
}

/* Close button styling */
.close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 1001; /* Ensure it's on top of the lightbox image */
}

.close:hover {
    background: rgba(0, 0, 0, 0.8);
}

JavaScript

$(document).ready(function(){
    const apiKey = 'yEkMES04UOy5QapvbtdPh8NpFSixajwoQs2AL6DlDxUBqCd6Pmt7gJBx';
    const query = 'cute baby';
    let page = 1;
    const perPage = 50000;
    const apiUrl = `https://api.pexels.com/v1/search?query=${query}&per_page=${perPage}`;

    function loadImages(page) {
        $.ajax({
            url: `${apiUrl}&page=${page}`,
            headers: {
                'Authorization': apiKey
            },
            success: function(data) {
                const photos = data.photos;
                let galleryHtml = '';

                photos.forEach(photo => {
                    galleryHtml += `
                        <div class="gallery-item">
                            <img src="${photo.src.medium}" alt="${photo.alt}">
                        </div>
                    `;
                });

                $('#gallery').append(galleryHtml);

                // Lightbox functionality
                $('.gallery-item img').click(function(){
                    $('#lightbox').css('display', 'flex');
                    $('#lightbox-img').attr('src', $(this).attr('src'));
                });

                $('.close').click(function(){
                    $('#lightbox').hide();
                });

                $('#lightbox').click(function(event) {
                    if(event.target.id === 'lightbox') {
                        $('#lightbox').hide();
                    }
                });
            },
            error: function() {
                alert('Failed to fetch images from Pexels API.');
            }
        });
    }

    // Initial load
    loadImages(page);

    // Infinite scroll
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
            page++;
            loadImages(page);
        }
    });
});