Here is example to make image gallery and embed youtube videos using Jquery fancybox plugin


File structure

fancy box/
┣ assets/
┃ ┣ image0.jpg
┃ ┣ image1.jpg
┃ ┣ image2.jpg
┃ ┗ image3.jpg
┣ index.html
┣ jquery.fancybox.min.css
┗ jquery.fancybox.min.js

Index.html

<html>
    <head>
        <title>Jquery-tutorial</title>
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <script src="jquery.fancybox.min.js"></script>
        <link href="jquery.fancybox.min.css" rel="stylesheet">
        <script>
            $(document).ready(function() {
                $('[data-fancybox="images"]').fancybox({
                    image: {
                        protect: true
                    }
                });


                $('.fancybox-video').fancybox({
                    iframe: {
                        css: {
                            width: '800px'
                        }

                    }
                });


                $('[data-fancybox="video"]').fancybox({
                    type: 'iframe',
                    iframe: {
                        css: {
                            width: '600px'
                        },
                        preload: false
                    }
                });

            });
        </script>

    </head>
    <script src="jquery.fancybox.min.js" type="text/javascript"></script>
    <body>
        <a href="assets/image0.jpg" data-fancybox="images" data-caption="My caption 0">
            <img src="assets/image0.jpg" alt="" width="200"/>
        </a>

        <a href="assets/image1.jpg" data-fancybox="images" data-caption="My caption 1 ">
            <img src="assets/image1.jpg" alt="" width="200"/>
        </a>

        <a href="assets/image2.jpg" data-fancybox="images" data-caption="My caption 2">
            <img src="assets/image2.jpg" alt="" width="200"/>
        </a>
        
         <a href="assets/image3.jpg" data-fancybox="images" data-caption="My caption 3">
            <img src="assets/image3.jpg" alt="" width="200"/>
        </a>

         <br><br>

        <a class="fancybox-video" href="https://youtu.be/ixvqoHZdxic">
            YouTube video
        </a>

    </body>
</html>

jquery.fancybox.min.css and jquery.fancybox.min.js you can download from here


output:



Are you facing problems in understanding this?

download now