fancyBox3

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 project.you can get ready things in minutes.

    index.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Here is your title of your web-page</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" /> </head> <body> <div class="img-gallery"> <h1>Image gallery using fancybox3</h1> <a href="http://codeuncle.krishnarathor.com/vendor/tr/images/img1.jpg" data-fancybox="images" data-caption="Fancybox 3 Demo"> <img src="http://codeuncle.krishnarathor.com/vendor/tr/images/img1.jpg" alt=""/> </a> <a href="http://codeuncle.krishnarathor.com/vendor/tr/images/img3.jpg" data-fancybox="images" data-caption="Fancybox 3 Tutuorial"> <img src="http://codeuncle.krishnarathor.com/vendor/tr/images/img3.jpg" alt=""/> </a> <a href="http://codeuncle.krishnarathor.com/vendor/tr/images/img5.jpg" data-fancybox="images" data-caption="This is Fancybox 3"> <img src="http://codeuncle.krishnarathor.com/vendor/tr/images/img5.jpg" alt=""/> </a> <a href="http://codeuncle.krishnarathor.com/vendor/tr/images/img6.jpg" data-fancybox="images" data-caption="Here you can learn Fancybox 3 "> <img src="http://codeuncle.krishnarathor.com/vendor/tr/images/img6.jpg" 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="https://www.youtube.com/watch?v=djlx7xdwlpI"> <img src="http://codeuncle.krishnarathor.com/vendor/tr/images/thumb-fancybox.jpg" alt=""/> </a>

Watch video & download complete working code Let's go