Yalb
Yet Another LightBox
Easy to use, out of the box
If you are looking for a plain-javascript-version take a look at yalb!
Getting Started
Download the production version or the development version. Or run
bower install jquery.yalb
Include yalb after jquery in your web page:
<link rel="stylesheet" href="dist/yalb.min.css"> <script src="jquery.js"></script> <script src="dist/jquery.yalb.min.js"></script> <script> jQuery(function($) { var images = [ 'img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg' ] $.yalb(images); // or just $('img').yalb(); // for other possibilities to call yalb see below }); </script>
Documentation
Collections you can pass to Yalb / Examples
-
array
filled withStrings
var images = [ 'img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg' ]; $.yalb(images);
-
NodeList
orArray
ofNodes
var images = document.getElementsByTagName('img'); $.yalb(images); // or var links = document.getElementsByTagName('a'); $.yalb(links, {src: 'href'}); // or any other node with an attribute containing the path // e.g. <span data-image="/path/to/image.jpg" $.yalb(span, {src: 'data-image'});
-
jQuery
-Collectionvar images = $('img'); $.yalb(images); // or of course $('img').yalb(); // or same as above
-
selfmade object containing the path
var images = [ { foo: 'bar' path: 'path/to/image.jpg' }, { // and so on } ]; $.yalb(images, {src: 'path'}); // or even var images = [ { path: { 'to': { 'image': 'path/to/image.jpg' } } }, { // and so on } ]; $.yalb(images, {src: 'path.to.image'});
Options
The following options can be passed when calling yalb:
src
(default:'src'
), Attribute where the path is located.current
(default:0
), The image which is presented when opening yalbclass
(default:'yalb'
), The class passed to the html-container of yalbloop
(default:true
), If true, images will be repeated when hitting the first/last imageopen
(default:true
), If true, yalb opens when calledwidth
(default:0
), max-with of the Yalb-windowheight
(default:0
), max-height of the Yalb-window
You can change the default values for the whole page by assigning to $.yalb.defaults
$.yalb.defaults = { src: 'src', current: 0, 'class': 'yalb', loop: true, open: true, width: 0, height: 0 };
Methods
You can control the behavior of yalb with the following methods
$.yalb.open()
- Opens yalb when still not open$.yalb.close0()
- Close yalb; same as hitting the close-button$.yalb.next()
- Next Image; same as hitting the next-button$.yalb.prev()
- Previous Image; same as hitting the prev-button$.yalb.show(index)
- Changes to the image on positionindex
$.yalb.on()
- Binds handler to an event (take a look at the Events-section)$.yalb.off()
- Removes Handler (Caution!! - This will also remove handlers used by yalb itself when you don't explicitely specify a listener which should be removed or when you don't use namespaced events)$.yalb.get()
- Gets the jQuery-instance of the container on which all events are triggered
Events
You can listen to the following Events when using yalb:
change
- When the image has changedopen
- When open is called (per Method or per yalb-call withopen:true
)close
- When close-button is pressednext
- When next-button is pressedprev
- When prev-button is pressedshow
- When show is called
Style
You can style yalb to your own needs. An example-style is shipped with the code. You can change it to your needs. Every button used is styled with css-only. No icon is needed. Even the loading-animation is css.
Take a look into the css-file - it's selfexplaining!