Fancybox Library on Taptop

A common task is creating a Lightbox for photos, such as in galleries or product cards. Let's see how to add this built-in library to your project in minutes.

In the pursuit of minimalism, the discerning artist becomes an editor, carefully selecting and discarding elements until only the essential remains. This process requires a keen eye for detail and an understanding that every component contributes to the overall impact of the piece.

1. Add the fancy-box class to your image element

2. Include Fancybox styles

<!-- CSS Fancybox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<!-- jQuery + Fancybox JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

3. Add this script to the body:

<script>
  $(document).ready(function() {
    // Loop through all elements with fancy-box class
    $('.fancy-box').each(function() {
      // Find img tag within current element
      const img = $(this).find('img');
      
      if (img.length) {
        // Wrap img in <a> tag if not already wrapped (required for Fancybox)
        if (!img.parent('a').length) {
          img.wrap('<a href="' + img.attr('src') + '" data-fancybox="gallery"></a>');
        }
      }
    });

    // Initialize Fancybox for all created links
    $('[data-fancybox]').fancybox({
      buttons: [
        "zoom",
        "share",
        "slideShow",
        "fullScreen",
        "download",
        "thumbs",
        "close"
      ]
    });
  });
</script>

Gallery is now connected

Brief overview of gallery elements included in this script:

• zoom - image zoom
• share - share image
• slideShow - start slideshow
• fullScrean - fullscreen view
• download - download image
• thumbs - enable thumbnails
• close - close button

For more details on additional features, check here