================
This simple jQuery plugin takes a simple list and turns it into a slider with lightbox functionality, like this:
- Include jQuery in your html (obviously).
- Download this repo
- 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>
- 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">
no options, no arguments, just .srollify()
an element.
$(document).ready(function(){
$('.scroller').scrollify();
})
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>
Demo
MIT License - fork, modify and use however you want.