Twilight Show script

Download

An awesome slideshow script for your website. Made as a jQuery plugin, supports various-width photos, works perfectly smoothly on iPhone and iPad due to applying Hardware Acceleration. Features:

Twilight Slideshow works with jQuery 1.4 and greater; supports IE 7, Firefox 3.6, Safari 3, Chrome 6, Opera 9.5 and their greater versions.

Usage

Slideshow’s HTML should be like this:

		<div class="twilight-show">
			<div class="twilight-box">
				<div><img src="pics/1.jpg" alt="" /></div>
				<div><img src="pics/2.jpg" alt="" /></div>
				<!-- ... -->
			</div>
			<div class="arrow-left"><img src="img/arrow-left.png" alt="" /></div>
			<div class="arrow-right"><img src="img/arrow-right.png" alt="" /></div>
		</div>

Inclusion code should look like this: (XHTML 1.0 Strict)

		<link rel="stylesheet" type="text/css" href="css/twilight.css" />
		<script type="text/javascript" src="js/twilight.js"></script>

And the usage code—like that:

		$(window).load(function() {
			$('.twilight-show').twilight();
		});

Note that if you’re using $(document).ready() instead of $(window).load(), you have to specify all images sizes.

Styles

Twilight Slideshow doesn’t insert any new elements into DOM, it uses prepared HTML layout and it’s CSS rules only. So you need to include Twilight’s css file as described above.

The .twilight-show .twilight-box and .twilight-show .twilight-box div CSS-rules specify properties -webkit-transform and -webkit-transition. They’re responsible for iPhone and iPad animation. Animation in Mobile Safari will flick if you haven’t specified these properties and set default values.

The .twilight-show class must specify the width and the height of the slideshow, and set the overflow: hidden property.

If you want to hide corners of the neighboring slides, you have to set slideshow width in the .twilight-show class exactly equal to slides width.

Options

Twilight Slideshow can be configured by passing special parameters to it’s initialization. For example:

		$(window).load(function() {
			$('.twilight-show').twilight({
				animSpeed: 1000,
				startingSlide: 5,
				updateURL: false
			});
		});

Now the animation will take 1 second instead of 0.5 seconds, the show will start from the 5th slide and the page URL will not be updated when slide.

The following table describes all parameters.

animTime Slides animation time in milliseconds.

Default: 500
startingSlide The starting slide number. If is set to «url», the slide number is being accepted from the URL automatically.

Default: 0
updateURL If is set to true, the page URL will be updated when slide. The slide number with the «#» prefix will be appended to the URL.

Default: true
outOpacity Neighboring slides opacity when inactive.

Default: 0.5
overOpacity Neighboring slides opacity when mouse is over the navigation arrows.

Default: 0.7
animFadeTime Neighboring slides fade time when slide, ms.

Default: 500
animHoverTime Neighboring slides fade time when the mouse is over the navigation arrows, ms.

Default: 250
easingMargin Animation function for margin-animation. To be used by default in every browser except Mobile Safari on iPhone/iPad. String.

Default: ’linear’
easingCss Animation function for CSS-animation. To be used by default in Mobile Safari on iPhone/iPad. String.

Default: ’linear’
boxSelector Slideshow box selector. Box—is a container inside the slideshow div, which width is enough to hold all its pictures. String.

Default: ’.twilight-show .twilight-box’
arrowLeftSelector Left arrow selector. String.

Default: ’.twilight-show .arrow-left’
arrowRightSelector Right arrow selector. String.

Default: ’.twilight-show .arrow-right’
listenEvent Determines if the slideshow should listen a ’twilight’ event.

Default: true
forceCss Forces the slideshow to use CSS-animation.

Default: false
showId Slideshow ID. Can be used in the «twilight» event to control the slideshow if several slideshows are on page.

Default: false
slideCompleteCallback Callback-function to be called when slide change is complete.

Default: function(slideNumber, direction) { }
prevNextClickCallback Callback-function to be called when a navigation arrow is clicked.

Default: function(slideNumber, direction) { }

The slide event, and pager

Twilight Slideshow listens the twilight event and accepts two arguments: index and showId. The index parameter is a slide number which the slideshow should slide to. The showId parameter specifies the slideshow ID. By using this event you can force the slideshow to slide to the specified slide.

A usage example of this event is shown on the jBond page.

December 2012