JS video and photo gallery – blueimp

DirectCode | January 26, 2019 | Gallery, HTML5, JavaScript, Libraries, Mobile, Multimedia, Plugins, Slider | No Comments

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.

JS video and photo gallery - blueimp — JS video and photo gallery – blueimp

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