Thursday, May 26, 2011

Jquery image crossslider

Here is a simple guide on how to put CrossSlide on a website:

Download the jQuery library and include it along with my plugin in the head section of your website:

&ltscript src="jquery.min.js"&gt&lt/script&gt
&ltscript src="jquery.cross-slide.min.js"&gt&lt/script&gt
Put a block element somewhere in your page and give it an id:

&ltdiv id="slideshow"&gt&lt/div&gt
Make sure the element has a fixed size, even when emptied of its contents, by setting its width and height in the CSS stylesheet:

#slideshow {
width: 600px;
height: 200px;
}
Open a script tag, define a "document ready handler" and activate my plugin on the div you created in step 2:

&ltscript&gt
$(function() {
$('#slideshow').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: 'picture1.jpg' },
{ src: 'picture2.jpg' },
{ src: 'picture3.jpg' },
{ src: 'picture4.jpg' }
])
});
&lt/script&gt

No comments:

Post a Comment