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!