LightShow.js

A lightweight slideshow for jQuery.

Instalation

Just copy files from the source folder into your project. Images should be in the same folder as jquery.lightshow.css.

Then add these two lines into <head> section of your page.

<script src="js/jquery.lightshow.js"></script>
<link href="css/jquery.lightshow.css" rel="stylesheet">

Usage

Your slideshow has to have this structure.

<div class="my-slideshow">
	<ul>
		<li data-title="Example title 1">
			<img src="images/1.jpg" alt="">
		</li>
		<li data-title="Example title 2">
			<img src="images/2.jpg" alt="">
		</li>
	</ul>
</div>

There can be anything inside the <li>...</li>, not just a single image.

The only thing left to do is triggering the LightShow. This will run it with default settings.

$(document).ready(function() {
	$(".my-slideshow").lightshow();
});

Options

LightShow comes with several options. These are their default values.

$(document).ready(function() {
	$(".my-slideshow").lightshow({
		autoplay        : true,    // (boolean) animate automatically 
		pause           : true,    // (boolean) pause on hover 
		duration        : 3000,    // (integer) single slide duration, in milliseconds 
		animation       : 500,     // (integer) animation duration, in milliseconds
		transition      : "fade",  // (string)  transition between slides (fade, slide)
		controls        : true,    // (boolean) show controls 
		controls_always : false,   // (boolean) always show controls
		big_controls    : false,   // (boolean) big controls - half of an image
		circles         : true,    // (boolean) jumping between slides using little circles below LightShow
		title           : false,   // (boolean) show title from 'data-title' attribute of <li>
		title_always    : false,   // (boolean) always show title
		change_url      : false,   // (boolean) put current slide number into url
		keyboard        : false,   // (boolean) enables keyboard navigation - left and right arrow

		responsive      : false,   // (boolean) LightShow is responsive by default, but sometimes big controls aren't as big as they should be - this corrects them
		different_sizes : false,   // (boolean) set to true if your slides have different sizes (fixes transitions between them)

		after_autoplay  : function() {}, // callback function after slide is changed by autoplay
		after_next      : function() {}, // callback function after next button is clicked
		after_prev      : function() {} // callback function after prev button is clicked
	});
});

Troubleshooting

Responsive design

If your encounter problems with the size of LightShow on a responsive website, trigger it after page is fully loaded like this.

$(window).load(function() {
	$(".my-slideshow").lightshow();
});