jQuery lightGallery Rails
Ruby on Rails wrapper for jQuery lightGallery
Description
JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video galleries
How to use lightGallery?
Installation
Add the following code to your Gemfile:
gem 'light_gallery_rails', git: 'https://github.com/lucmousinho/light-gallery-rails.git'
Include the following code into your application.js
Include the following code into your application.css
*= require light-gallery
HTML Structure
Create ul and li elements and add the path of the image or video inside the data-src attributes which you wish to open within the lightGallery.
<ul id="lightGallery">
<li data-src="img/img1.jpg">
<img src="img/thumb1.jpg" />
</li>
<li data-src="img/img2.jpg">
<img src="img/thumb2.jpg" />
</li>
...
</ul>
Data attributes
<li data-responsive-src="mobile1.jpg" > </li>
<li data-src="img1.jpg" > </li>
<li data-html="video html" /> </li>
<li data-html="#inlineHtml" > </li>
<li data-sub-html="<h3>My caption</h3><p>My description..</p>" /> </li>
<li data-sub-html="#inlineSubHtml" > </li>
<li data-iframe="true" data-src="http://www.w3schools.com/" > </li>
Call lightGallery!
<script type="text/javascript">
$(document).ready(function() {
$("#lightGallery").lightGallery();
});
</script>
Play with settings
<script type="text/javascript">
$(document).ready(function() {
$("#lightGallery").lightGallery({
mode: 'slide',
useCSS: true,
cssEasing: 'ease',
easing: 'linear',
speed: 600,
addClass: '',
closable: true,
loop: false,
auto: false,
pause: 4000,
escKey: true,
controls: true,
hideControlOnEnd: false,
preload: 1,
showAfterLoad: true,
selector: null,
index: false,
lang: {
allPhotos: 'All photos'
},
counter: false,
exThumbImage: false,
thumbnail: true,
showThumbByDefault:false,
animateThumb: true,
currentPagerPosition: 'middle',
thumbWidth: 100,
thumbMargin: 5,
mobileSrc: false,
mobileSrcMaxWidth: 640,
swipeThreshold: 50,
enableTouch: true,
enableDrag: true,
vimeoColor: 'CCCCCC',
videoAutoplay: true,
videoMaxWidth: '855px',
dynamic: false,
dynamicEl: [],
onOpen : function(el) {},
onSlideBefore : function(el) {},
onSlideAfter : function(el) {},
onSlideNext : function(el) {},
onSlidePrev : function(el) {},
onBeforeClose : function(el) {},
onCloseAfter : function(el) {},
});
});
</script>
In-depth explanation of settings can be found on a separate page.
Public methods
<script type="text/javascript">
$(document).ready(function() {
var gallery = $("#lightGallery").lightGallery();
gallery.isActive();
gallery.destroy();
});
</script>
Versioning
Version numbers will mirror the corresonding version of the jQuery lightGallery release used within this wrapper.
.