In your site, it is always wonderful to give user option to see list of images or videos with popup particularly on product review section in a web page.
For this purpose, there is a nice jQuery plugin named fancyboxapp with which I am going to show you how to use that in the following. I also give you a demo link to view the full source code in action.
Step 1 Html:
In your html, it needs to be build up like following.
<div class=""> <h2>Images</h2><hr> <p><a href="1.1.png" data-caption="test 1" data-fancybox="gallery"><img src="1.1.png" style="width: 150px; margin-top:5px;"></a></p> <p><a href="3.23.png" data-caption="test 2" data-fancybox="gallery"><img src="3.23.png" style="width: 150px; margin-top:5px;"></a></p> <p><a href="3.7.png" data-caption="test 3" data-fancybox="gallery"><img src="3.7.png" style="width: 150px; margin-top:5px;"></a></p> </div>
Please note above, about the data-fancybox attribute where it is
given value "gallary" which means those added images are going to come
as slider with left and right arrow in pop up which user can click to
view those images.
Step 2 JS:
After html, you just need
to add following two lines of fancybox js and css resource linking in
your head section to have this pop gallary to work.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
Lastly, In the above html by tweaking a little bit you can also
make video slideshow in popup. Following is the html of how to do it.
<div class=""> <h2>Videos</h2><hr> <p><a href="https://www.youtube.com/watch?v=n_In0gz56V4" data-caption="Learn to Concentrate with Dandapani & Jim Kwik by Jim Kwik 17 minutes 581,816 views" data-fancybox="gallery2"><img src="https://i.ytimg.com/vi/n_In0gz56V4/hqdefault.jpg" style="width: 150px; margin-top:5px;"></a></p> <p><a href="https://www.youtube.com/watch?v=JiwZQNYlGQI" data-caption="Failing at Normal: An ADHD Success Story | Jessica McCabe | TEDxBratislava by TEDx Talks 17 minutes 2,625,419 views" data-fancybox="gallery2"><img src="https://i.ytimg.com/vi/JiwZQNYlGQI/hqdefault.jpg" style="width: 150px; margin-top:5px;"></a></p> </div>
You can also view this gallary of images and video popup in action in this following demo url.
http://demo.mahfoozurrahman.com/lightbox/
As you can see Fancybox is also very flexible. Besides, images and
video it also supports iframes, inline and ajax contents. You can follow
this doc page to learn more according to your needs.
https://fancyapps.com/fancybox/3/docs/
Enjoy giving user gallary option in the pop to see more of the site content either it is in images, videos and so on.