JS video and photo gallery – blueimp
Carousel image gallery, carousel JS video gallery and lightbox image gallery. Whatever you need.
JS video and photo gallery – blueimp
blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox. It is optimized for both mobile and desktop web browsers. blueimp Gallery is based on Swipe.
It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, full-screen support and on-demand content loading and can be extended to display additional content types.

Example – lightbox setup
Include library (CSS and JS files) to your page.
The Gallery as lightbox dialog, should be a child element of the document body
<div id="blueimp-gallery" class="blueimp-gallery"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div>
Create a list of links to image files, optionally with enclosed thumbnails and add them to the body of your webpage, before including the Gallery script:
<div id="links"> <a href="images/banana.jpg" title="Banana"> <img src="images/thumbnails/banana.jpg" alt="Banana"> </a> <a href="images/apple.jpg" title="Apple"> <img src="images/thumbnails/apple.jpg" alt="Apple"> </a> <a href="images/orange.jpg" title="Orange"> <img src="images/thumbnails/orange.jpg" alt="Orange"> </a> </div>
Add the following JavaScript code after including the Gallery script, to display the images in the Gallery lightbox on click of the links:
document.getElementById('links').onclick = function (event) { event = event || window.event; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event}, links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); };
Enjoy lightbox gallery…
License: MIT
Homepage / GitHub
https://github.com/blueimp/Gallery
Docs
https://github.com/blueimp/Gallery/blob/master/README.md
See also
PragmaticPlayerJs – jQuery plugin for embedded youtube and HTML5 videos
Customizable HTML5 video player – Acorn Media Player
YT – jQuery Youtube video gallery plugin
Javascript Image Slider – Non jQuery
Chocolat.js – a free jQuery lightbox plugin – responsive and powerful
jQuery image slider with Lightbox – ion.imageSlider
jQuery circular carousel plugin
Enjoy!
Related Posts
-
JSON data with colored syntax – pretty-print-json
No Comments | Nov 28, 2019 -
Mobile-friendly, responsive image cropper with jQuery – rcrop
No Comments | Feb 13, 2020 -
kGallery – a multifunctional jQuery gallery plugin
No Comments | Feb 18, 2016 -
jQuery Mobile resources
No Comments | Oct 30, 2015