jQuery Scrollify Plugin

================

This simple jQuery plugin takes a simple list and turns it into a slider with lightbox functionality, like this:

demo

Installation

1. Include jQuery in your html (obviously).
2. Download this repo
3. Stick the jquery.scrollify.js, jquery.scrollify-style.css files after your jQuery, like so:

   <link href="*Your CSS Path*/jquery-scrollify-style.css" rel="stylesheet">
   

   <script src="*You JS Path*/jquery.scrollify.js"></script>   
   

4. Stick font-awesome in your code as well (this is for the nice icons)

   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
   

Usage

JS:

no options, no arguments, just .srollify() an element.

$(document).ready(function(){
    $('.scroller').scrollify(); 
})

HTML:

There are some stringent markup requirements here.

The element to scrollify should be a <ul>.

Each <li> inside the <ul> should contain an <a> element. The <a> should have an href set to the large image, and a data-title attribute containing the caption. Inside the <a>, there should be a smaller preview image.

To show an iFrame in the lightbox, for example a youtube video, add the attribute data-type="iframe" to the <a> element.

<ul class="scroller"> 
    <li>
        <a href="http://placekitten.com/800/800" data-title="caption"> 
	        <img src="http://placekitten.com/300/300"> 
        </a>
    </li>
    <li> 
        <a href="http://www.youtube.com/embed/i_mKY2CQ9Kk" data-title="I'm a video." data-type="iframe"> 
            <img src="http://placekitten.com/912/912"> 
        </a>
    </li>
</ul> 

Usage

Demo

License

MIT License - fork, modify and use however you want.