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
Little Big Shop
logo and website
Rednet
statistics webpage
Money Checker
interface and programming
A book HTML layout for
iskatel.krasnogorsk.ru
← Drag with mouse →
English Русский

jBond Slider

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:

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.

Configuration

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.

orientation Determines slider orientation, vertical on vert or horizontal on horz. String. If you’re going to use vertical orientation you need another HTML layout rather than described above. You can find an example inside the script archive.

Default: ’horz’

desktopMode Determines mode for desktop browsers: move ativates scroll on mouse move, touchMargin activates scroll on mouse drag, touchCss activates scroll on mouse drag and uses CSS-animation. String.

Default: ’move’

mobileMode Determines mode for Mobile Safari: touchMargin activates scroll on touch with top/left animation, touchCss activates scroll on touch and uses CSS-animation. String.

Default: ’touchCss’

startPos Slider’s start position. 0 for left, 1 for right, 2 for center. Works with all modes.

Defaults: 0

restArea Width in pixels of the central rest area for the move mode. The rest area is located in the center of a slider. When you’re moving mouse inside this area, slider doesn’t react.

Default: 6

maxSpeed The highest scrolling speed for the move mode. It’s a shift degree in pixels per scroll tick.

Default: 7

maxVelocity The highest moving speed after «mouse throw». Applied for the touchMargin and touchCss modes. Has no dimension.

Default: 15

bounce The greatest degree of the bounce that is caused when slider is dragged over its edge. Works for the touchMargin and touchCss modes. Has no dimension.

Default: 5

timeScroll Slider moving time after «mouse throw» until full stop. Applied for the touchMargin and touchCss modes. CSS-format time. String.

Default: ’3s’

timeBack Slider move back time after drag over its edge. Works for the touchMargin and touchCss modes. CSS-format time. String.

Default: ’0.5s’

wrapperSelector Slider wrapper selector.

Default: ’.bond-wrapper’

boxSelector Slider box selector. String.

Default: ’.bond-box’

slideSelector Slide selector. String.

Default: ’.bond-slide’

easingCss Animation function for the touchCss mode. String.

Default: ’cubic-bezier(0,1,1,1)’

easingMargin Animation function for the touchMargin mode. String.

Default: ’easeOutExpo’ (included)

slideClickCallback Callback-function to be called when a slide is clicked. delta is a length of the scroll path was made before click.

Default: function(slideNumber, delta) { }

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
		});
	}});
});
        	
December 2012
Concept: Andrew Marcus
Programming: Alexander Borisov
Portfolio