This time I will share jQuery Plugin and tutorial about Powerful Responsive Image Gallery Plugin – Blueimp Gallery, hope it will help you in programming stack.
Blueimp Gallery is a powerful and multi-functional jQuery/Vanilla JavaScript plugin for creating responsive, touch-friendly and fully configurable image/video gallery, carousel slider and lightbox gallery on the page.
Key Features:
- Swipe, mouse and keyboard navigation.
- Cool transition effects.
- Full screen gallery lightbox mode.
- Infinite carousel slider.
- Slideshow functionality supported.
- Supports Youtube and Vimeo videos.
Basic Usage:
1. Load the Blueimp Gallery’s stylesheet file(s) in the document.
2 |
<link rel="stylesheet" href="css/blueimp-gallery.css"> |
4 |
<link rel="stylesheet" href="css/blueimp-gallery-video.css"> |
6 |
<link rel="stylesheet" href="css/blueimp-gallery-indicator.css"> |
9 |
<link rel="stylesheet" href="css/blueimp-gallery.min.css"> |
2. Load the Blueimp Gallery’s JavaScript files in the document.
2 |
<script src="js/blueimp-gallery.min.js"></script> |
5 |
<script src="/path/to/cdn/jquery.min.js"></script> |
6 |
<script src="js/blueimp-gallery.min.js"></script> |
3. Create an inline carousel slider from media links as these:
03 |
<a href="1.jpg" title="Alt 1" data-description="Description 1 (OPTIONAL)"> |
04 |
<img src="thumb-1.jpg" alt="Alt 1" /> |
06 |
<a href="2.jpg" title="Alt 1"> |
07 |
<img src="thumb-1.jpg" alt="Alt 1" /> |
09 |
<a href="3.jpg" title="Alt 1"> |
10 |
<img src="thumb-1.jpg" alt="Alt 1" /> |
15 |
data-poster="poster.jpg" |
16 |
data-sources='[{"href": "1.mp4", "type": "video/mp4"}, {"href": "1.ogg", "type": "video/ogg"}]'> |
22 |
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel" |
24 |
<div class="slides"></div> |
25 |
<h3 class="title"></h3> |
28 |
<a class="play-pause"></a> |
29 |
<ol class="indicator"></ol> |
1 |
blueimp.Gallery(document.getElementById('example').getElementsByTagName('a'), { |
2 |
container: '#blueimp-gallery-carousel', |
4. To initialize the plugin as a gallery lightbox, call the function as follows:
1 |
document.getElementById('example').onclick = function(event) { |
2 |
event = event || window.event |
3 |
var target = event.target || event.srcElement, |
4 |
link = target.src ? target.parentNode : target, |
5 |
options = { index: link, event: event }, |
6 |
links = this.getElementsByTagName('a') |
7 |
blueimp.Gallery(links, options) |
5. You’re also allowed to define the gallery content in the JavaScript as follows:
03 |
title: 'YouYube video', |
