jQuery Scrollify Plugin

jQuery Scrollify is a simple plugin to turn a list of images into a scrolling slider with a lightbox.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="jquery-scrollify-style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
<script src="jquery.scrollify.js"></script>

2. HTML

<ul class="scroller"> 
	<li>
		<a href="http://placekitten.com/1200/800" data-title="I'm a caption la la la."> 
			<img src="http://placekitten.com/800/800"> 
		</a>
	</li>
	<li> 
		<a href="http://placekitten.com/900/900" data-title="I'm another caption."> 
			<img src="http://placekitten.com/900/900"> 
		</a>
	</li>
	<li> 
		<a href="http://placekitten.com/910/910" data-title="more captions."> 
			<img src="http://placekitten.com/910/910"> 
		</a>
	</li>
	<li>
		<a href="http://placekitten.com/911/911" data-title="I'm a caption la la la."> 
			<img src="http://placekitten.com/911/911"> 
		</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>
	<li> 
		<a href="http://placekitten.com/914/914" data-title="more captions."> 
			<img src="http://placekitten.com/914/914"> 
		</a>
	</li>
</ul>

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.

3. JAVASCRIPT

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