Responsive Image Gallery Lightbox with jQuery, Fancybox 3, and Slick carousel

Creating a responsive image gallery can be a headache for a front-end developer. Fancybox 3 and Slick carousel provide solutions to this in a very simple way. The only prerequisite required is knowledge of Javascript and its jQuery library.

What is Fancybox 3 ?

• This is a tool built on top of jQuery library.
• It offers an elegant way to add zooming functionalities for images, HTML content, and multimedia on your web pages.
• It can display images, Html elements, SWF movies, iframes, and ajax requests.
• It is also customizable through CSS.
• Here is a link to the Fancybox documentation

What is a Slick carousel ?

• This is a fully responsive and flexible jQuery plugin.
• Used for creating a fully responsive, customizable, and mobile-friendly carousel that works with any HTML element.
• Here is a link to the Slick carousel documentation

In the index.html,

• Link the style.css and the script.js files to the index.html file.

• Add Font-awesome, jQuery, Bootstrap, Fancybox, and Slick CDN links above the initial links.

  Caution: make sure you have the latest jQuery link pasted above Fancybox and Slick CDN links. Check the index file screenshots for clarification It should come first.

  CSS links added in the head element

JS script links added above body closing tag

• Add a section with two div elements.You can name the classes as you like. e.g class="slider" and class="slider-nav" to wrap the two image slides we want to create.
• Provide the images within the first div i.e class="slider" with data-fancybox value for each a tag. This automatically binds click events that will start Fancybox.js. Use the data-src attribute to specify the source of the image. You can also use the href attribute instead.
• Within the second div i.e class="slider-nav", add a list with the images from the class="slider" in the same order.
• Add the custom styles for class="slider" and class="slider-nav".
• Take note of the dynamic classes created dynamically in the script.js and added to style.css.

Codepen code for refence.

In the script.js file,

• Call the slick plugin on whole section, id="slider-section" and div, class="slider" and then declare the properties you want for the slide.
• Do the same, call slick plugin on class="slider-nav" and declare the properties you want.

• Add a Fancybox function to keep the thumbnails active when changing the main image, via mouse/touch drag/swipe while removing all active classes and setting active class for the current slide

• Github repository link: github.com/Michael-Otieno/carousel_gallery

• Deployed link : lighthearted-sunburst-59664a.netlify.app

  Final screenshots.