elbajs

This is a pure javascript slide-show gallery, dependency-free, responsive, serving lazy loading images according to the screen size, hardware accelerated, retina ready, AMD ready, swipe/drag/touch enabled.

Zero element loading has been introduced since version 0.4.2. A fallback gif loader has been implemented for browsers which not support animations.

Inspired by many sources such as:

• bLazy
  
• Superslides
  
• Tocca.js
  

At the moment this plugin's size is ~15.0 KB minified.

##INSTALL

Besides cloning this repo or downloading it, you can either get it through Bower.

bower install elbajs

##USAGE

Include the css into your page:

<link rel="stylesheet" href="path/to/elba.css">

Include the script into your page:

<script src="path/to/elba.js"></script>

Add the markup for your gallery:

<figure id="your-carousel" class="elba-carousel">
    <figure class="elba" data-src="http://yourpicdefault|http://yourpicdefault@2x" data-src-medium="http://yourpicmedium|http://yourpicmedium@2x" data-src-large="http://yourpiclarge|http://yourpiclarge@2x">
    <figure>
    ...
    <figure class="elba" data-src="http://yourpicdefault|http://yourpicdefault@2x" data-src-medium="http://yourpicmedium|http://yourpicmedium@2x" data-src-large="http://yourpiclarge|http://yourpiclarge@2x">
    </figure>
    ...
</figure>	    	

As shown above you can optionally set multiple sources depending on the width of the device. A further option is declaring different sources for the same breakpoint, one for normal screens and the other one for retina screens, separating the sources with the default separator '|'.

Then activate the plugin:

	var gallery = new Elba( document.getElementById('your-carousel'), {
		/*****************************/
		/*REGISTERING THE BREAKPOINTS*/
		/*****************************/
        	breakpoints: [
        		{
        			width: 768, // min-width
					src: 'data-src-medium'
			},
        		 {
	        		width: 1080, // min-width
	         		src: 'data-src-large'
			}
		]});

###AMD USAGE Since it doesn't have dependencies, just write something like this:

require(['elba'], function(elba){
	var gallery = new Elba( document.getElementById('your-carousel'), {
		breakpoints: [
			{
				width: 768, // min-width
				src: 'data-src-medium'
			},
			 {
	        	width: 1080, // min-width
	         	src: 'data-src-large'
			}
		]});
})		

The width is referred to the width of the gallery container, that can be smaller than the screen, according to your taste

##OPTIONS

When you make a new Elba class instance, you can override defaults options by passing an object { ... } as the second argument to the constructor.

Available options:

###List of predefined easings

1. easeInSine
2. easeOutSine
3. easeInOutSine
4. easeInQuad
5. easeOutQuad
6. easeInOutQuad
7. easeInCubic
8. easeOutCubic
9. easeInOutCubic
10. easeInQuart
11. easeOutQuart
12. easeInOutQuart
13. easeInQuint
14. easeOutQuint
15. easeInOutQuint
16. easeInExpo
17. easeOutExpo
18. easeInOutExpo
19. easeInCirc
20. easeOutCirc
21. easeInOutCirc
22. easeInBack
23. easeOutBack
24. easeInOutBack

##API

	var gallery = new Elba( document.getElementById('your-carousel'), 
				{ 
					//Whatever options 
				});

	/**
	* Goes to the next slide.
	* @param {String}
	*/			
	gallery.goTo('right');

	/**
	* Goes to the previous slide.
	* @param {String}
	*/			
	gallery.goTo('left');

	/**
	* Goes to the xth slide.
	* @param {Number} starting from 1 to the [lenght]
	*/			
	gallery.goTo(x);

	/**
	* Starts the slideshow.
	*/			
	gallery.startSlideshow();

	/**
	* This method temporarly stops the slideshow,
	* which is restarted after a click on a navigation button.
	*/
	gallery.clearSlideshow();

	/**
	* This method permanently stops the slideshow.
	*/
	gallery.stopSlideshow();

	/**
	* This function returns the current index of the slideshow
	* @return {Number}
	*/
	gallery.getCurrent();

##BROWSER SUPPORT

Not tested yet, but working on all modern browser, IE9+.

##LICENSE MIT