jBond Slider

The Wedding Reporter
iPad optimization

An iPad magazine
experimental layout

The Wedding Reporter
website programming

WMG-Group
promo site programming

^mySmarthouse Company
logo and templates

“Maximum Print” website

“Little Big Shop”
logo and website

Rednet
statistics webpage

Money Checker
interface and programming

A book HTML layout for
iskatel.krasnogorsk.ru

“Iskatel” website

His name is Bond. jBond.

A multifunctional slider script that can be gracefully used to present your products or to navigate a slideshow. Can be controlled by mouse dragging or moving. Works perfectly on iPhone and iPad. Features:

• Doesn’t have any lags on iPhone and iPad;
• Scrolls by mouse moving or dragging, supports touch control;
• Supports vertical and horizontal modes;
• Supports CSS-animation;
• Can be configured by setting the rest area width, max scroll speed, etc;
• Passes a number of the selected slide via URL;
• Flexible uses callbacks, events and selectors.

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

Modes

The slider supports three modes. Scrolls by mouse moving: (a move mode)

Scrolls by mouse dragging: (a touchMargin mode)

Scrolls by mouse dragging with CSS-animation: (a touchCss mode is supported by modern browsers and iPhone/iPad only)

jBond determines if user browses your site on iPhone/iPad and then turns on CSS-animation. You can configure jBond so that it will use a one mode on a desktop computer and the another one in Mobile Safari. Desktop mode works with move, touchMagin and touchCss modes. Mobile mode works with touchMargin and touchCss modes. By default, the move mode is used for any desktop browsers and touchCss is used for Mobile Safari.

We recommend using touchCss for the mobile mode as the only mode that activates CSS-animation and Hardware Acceleration on mobile devices. Otherwise today’s mobile devices will not be able to achieve really smooth animation.

See the «Configuration» chapter for more information about mode switching.

Usage

Slider’s HTML should be like this:

<div class="bond">
	<div class="bond-wrapper">
		<div class="bond-box">
			<div class="bond-slide">
				<img src="thumbs/1.jpg" alt="" />
			</div>
			<div class="bond-slide">
				<img src="thumbs/2.jpg" alt="" />
			</div>
			<div class="bond-slide">
				<img src="thumbs/3.jpg" alt="" />
			</div>
			<!-- ... -->
		</div>
	</div>
</div>
            

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

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

And the usage code—like that:

$(window).load(function() {
	$('.bond').bond();
});
            

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

The vertical mode HTML and CSS see in «Examples» folder inside the script archive.

CSS

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

The .bond-wrapper CSS-rule specifies the -webkit-transform and -webkit-transition properties. 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.

Options

jBond Slider can be configured by passing special parameters to it’s initialization call. For example:

$(window).load(function() {
	$('.bond').bond({
		startPos: 1,

		desktopMode: 'touchMargin',
		slideClickCallback: function(N, delta) { alert(N); }
	});
});
            

In this example, the slider will be aligned to right, the drag mode will be used to control it, and the message with the slide number will occur when click on a slide.

The following table describes all jBond’s parameters.

Integration with Twilight and other slideshows

You can easily use jBond as a pager for your slideshow. The slideClickCallback parameter accepts function that will be called when a slide is clicked. The function accepts two arguments, the first—is the number of the clicked slide. Knowing the slide number it is possible to tell the slideshow to jump to the corresponding picture.

In common case the code will be like this:

$(window).load(function() {
	var slideshow = $('.super-mega-slideshow').SuperMegaSlideshow();
	$('.bond').bond({ slideClickCallback: function (N) {
		slideshow.goto(N, delta);
	}});
});
        	

Of course, every slideshow requires its own control code. Usualy this code is described in the slideshow documentation. In case you’re using the Twilight Show the following code should be used:

$(window).load(function() {
	$(’.twilight’).twilight();
	$(’.bond’).bond({ slideClickCallback: function (N, delta) {
		$(document).trigger({
			type: ’twilight’,
			index: N
		});
	}});
});