JavaScript

fancybox.js: How to Display a Lightbox Modal Compatible with Touch and Responsive Design [jQuery Plugin]

 

In modern web design, modal display has become an essential feature. Especially with the increasing demand for responsive and touch device optimization, lightbox techniques are widely used to improve user experience. In this article, we will explain in detail how to create a lightbox modal display using the popular library “fancybox.js”, which is compatible with both touch and responsive design. With code examples, we provide a step-by-step guide so even beginners can implement it easily.

Contents
  1. What is fancybox.js?
  2. CSS Configuration
  3. Create Gallery with HTML
  4. JavaScript for Touch & Responsive Lightbox Modal using fancybox.js
  5. Demo Page: Touch & Responsive Lightbox Modal using fancybox
  6. Additional Tips for Enhancing fancybox.js
  7. Source: fancybox – Librarie
  8. Conclusion

What is fancybox.js?

fancybox.js is a library for displaying content such as images and videos in a modal. It has the following features:

  • Responsive Design: Works seamlessly on mobile devices.
  • Touch Support: Enables swipe-based content navigation.
  • Customizability: Flexible styling and behavior adjustments.
  • Lightweight: Easy to implement only necessary features.

By utilizing these features, you can easily create visually appealing and user-friendly galleries and popups.

CSS Configuration

First, apply styles for fancybox.js. In this step, we’ll define CSS to style gallery images and captions.
Load the `jquery.fancybox.css` file. The following CSS is for gallery images (`a[data-fancybox] img`) and captions when displayed in modal (`.fancybox__caption`). Customize as needed.
Here’s a basic example:

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 14px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
a[data-fancybox] img {
  cursor: zoom-in;
  width: 150px;
}
.fancybox__caption {
  text-align: center;
}
</style>
<link rel="stylesheet" href="jquery.fancybox.css" />

Create Gallery with HTML

Next, structure your HTML. The following is a basic code to display gallery images.
Prepare gallery images (1〜5.jpg) for lightbox modal. Add `data-fancybox=”gallery”` to the target tag and set the caption text with `data-caption=”Description text”`.

<h1>Lightbox Modal Display Compatible with Touch and Responsive using fancybox</h1>

<a data-fancybox="gallery" href="1.jpg" data-caption="Image 1"><img src="1.jpg"></a>
<a data-fancybox="gallery" href="2.jpg" data-caption="Image 2"><img src="2.jpg"></a>
<a data-fancybox="gallery" href="3.jpg" data-caption="Image 3"><img src="3.jpg"></a>
<a data-fancybox="gallery" href="4.jpg" data-caption="Image 4"><img src="4.jpg"></a>
<a data-fancybox="gallery" href="5.jpg" data-caption="Image 5"><img src="5.jpg"></a>
  • data-fancybox=”gallery”
    Group multiple images into one gallery.
  • data-caption=”Description text”
    Set captions for each image.

JavaScript for Touch & Responsive Lightbox Modal using fancybox.js

Finally, use JavaScript to enable fancybox.js.
Load `jquery-1.10.2.min.js` and `jquery.fancybox.js`. Then configure with `Fancybox.bind(‘[data-fancybox=”target”]’, { options })`. You can set options for captions and more. Customize as needed.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.js"></script>
<script type="text/javascript">
Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, carousel, slide) {
    return (
      `${slide.index + 1} / ${carousel.slides.length} <br />` + slide.caption
    );
  },
});
</script>

Demo Page: Touch & Responsive Lightbox Modal using fancybox

You can view the implementation on the demo page below.
Demo Page: Touch & Responsive Lightbox Modal using fancybox

Additional Tips for Enhancing fancybox.js

Here are some extra settings and advanced usage tips to get more out of fancybox.js.

1. Customize Gallery Display

You can customize the default gallery appearance with additional options. For example:

 <script type="text/javascript"> Fancybox.bind('[data-fancybox="gallery"]', { // Animation effect for slides animationEffect: "fade", // Adjust slide speed animationDuration: 400, // Add fullscreen mode button Toolbar: { display: [ "zoom", "fullscreen", "close" ] }, // Enable thumbnail navigation Thumbs: { autoStart: true, }, }); </script>

Main Option Descriptions:

  • animationEffect: Specify animation type (e.g. fade, zoom).
  • animationDuration: Specify animation speed (ms).
  • Toolbar.display: Customize buttons shown on toolbar.
  • Thumbs.autoStart: Automatically show thumbnail navigation.

Using these options will enhance gallery interactivity and visual appeal.

2. Video Content Support

fancybox.js supports not only images but also video. You can easily embed dynamic content like YouTube or Vimeo videos.

Sample: Embed YouTube Video

 <a data-fancybox href="https://www.youtube.com/watch?v=your_video_id">Watch Video</a>

Sample: Embed Vimeo Video

 <a data-fancybox href="https://vimeo.com/your_video_id">Watch Video</a>

These video embeds are responsive by default and auto-adjust based on screen size.

Source: fancybox – Librarie

Here is the source:
fancybox – Librarie

Conclusion

With fancybox.js, even beginners can easily create professional lightbox modals.
Use this article as a reference and try implementing it in your project. For further learning, check the official documentation and demos. Give it a try!

　
*Please use this at your own risk.
Do not reuse the Google Analytics tag in the demo page’s head tag.

fancybox.js Modal
RELATED POST