jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

how to make image gallery using fancybox3

Live example below ↓

How to use fancyBox jquery plugin & make image gallery

here is simple to something , just you need to copy and and paste, follow some simple steps & you ready to run your can get ready things in minutes.


    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Here is your title of your web-page</title> <link href="" rel="stylesheet"> <script src="" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="" type="text/javascript"></script> <script src=""></script> <link rel="stylesheet" href="" /> </head> <body> <div class="img-gallery"> <h1>Image gallery using fancybox3</h1> <a href="" data-fancybox="images" data-caption="Fancybox 3 Demo"> <img src="" alt=""/> </a> <a href="" data-fancybox="images" data-caption="Fancybox 3 Tutuorial"> <img src="" alt=""/> </a> <a href="" data-fancybox="images" data-caption="This is Fancybox 3"> <img src="" alt=""/> </a> <a href="" data-fancybox="images" data-caption="Here you can learn Fancybox 3 "> <img src="" alt=""/> </a> </div> </body> </html>

Embed any video using Fancybox 3

  • Change the image path and video Id of youtube embed video

    Paste this code in index.html

    <a data-fancybox href=""> <img src="" alt=""/> </a>

Watch video & download complete working code Let's go