blueimp Gallery is an image and video gallery featuring carousel and lightbox gallery with mouse and keyboard navigation, transition effects and more. This amazing plugin was created by Sebastian Tschan.
- blueimp Gallery version 2.7.3
- Official Website: http://blueimp.github.io/Gallery/
Add this line to your application's Gemfile:
gem 'blueimp-gallery'
And then execute:
$ bundle
Or install it yourself as:
$ gem install blueimp-gallery
Add this line to your app/assets/javascripts/application.js
//= require blueimp-gallery-all
In case you want a minimal version and you already understand how the plugin works, you can add the necessary assets.
//= require blueimp-gallery
//= require blueimp-gallery-fullscreen
//= require blueimp-gallery-indicator
//= require blueimp-gallery-video
//= require jquery.blueimp-gallery
Add this line to your app/assets/stylesheets/application.css
*= require blueimp-gallery-all
In case you want a minimal version and you already understand how the plugin works, you can add the necessary assets.
*= require blueimp-gallery
*= require blueimp-gallery-indicator
*= require blueimp-gallery-video
This is a basic example how create a lightbox.
Add the following HTML snippet to your view:
<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>
Add a list of image links you want to show into your gallery:
<div id="links">
<a href="images/photo1.jpg" title="Photo 1">
<img src="images/thumb_photo1.jpg" alt="Photo 1">
</a>
<a href="images/photo2.jpg" title="Photo 2">
<img src="images/thumb_photo2.jpg" alt="Photo 2">
</a>
<a href="images/photo3.jpg" title="Photo 3">
<img src="images/thumb_photo3.jpg" alt="Photo 3">
</a>
</div>
Finally add this JavaScript to display the images in your beautiful gallery:
<script>
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);
};
</script>
or CoffeeScript if you want to add the script as an asset:
document.getElementById("links").onclick = (event) ->
event = event or window.event
target = event.target or event.srcElement
link = (if target.src then target.parentNode else target)
options =
index: link
event: event
links = @getElementsByTagName("a")
blueimp.Gallery links, options
If you want a Carousel gallery, replace the html snippet with:
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
And add this JavaScript:
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true
}
);
</script>
or CoffeeScript if you want to add the script as an asset:
blueimp.Gallery document.getElementById("links").getElementsByTagName("a"),
container: "#blueimp-gallery-carousel"
carousel: true
blueimp Gallery has a lot more features and options as adding control keys, fullscreen, slide interval, etc. The complete documentation is on the blueimp Gallery site.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request