Craftyslide is a tiny image slideshow script built on jQuery.  It is only 2kb and really easy to implant. Craftyslide is created by CraftedPixelz, an UK design studio. In this post we will show you can how use Craftyslide on our website.

Demo | Download Files
First thing to do, is go to Craftyslide website and download the script. It actually come with a demo page. If you want you can just use that page. We will try to explain in detail how the script works. To begin make sure you have all your script and files organized in the folder.

Next we are going to open up the index.html and link the javascript files before the </body> tag ends (why). I  would  suggest to use jQuery from Google SVN, which will make your website load faster.

<!-- jQuery Library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Craftyslide Plugin -->
<script src="js/craftyslide.js"></script>

Next the HTML markup . The images has to be nested inside a <li> tag . The script looks for the .next(“li”) – list item to go to next slide .

<div id="slideshow">
<ul>
	<li><img title="Flower and Bee" src="images/image_1.jpg" alt="Flower and Bee" /></li>
	<li><img title="Flower" src="images/image_2.jpg" alt="Flower" /></li>
	<li><img title="Leaf" src="images/image_3.jpg" alt="Leaf" /></li>
</ul>
</div>

Y0u do not need changes anything in the CSS file unless you want to changes the caption font or border color. The shadow is created by CSS3 which also can be edited.  Now we call the function to initiate the slideshow.

  <script type="text/javascript">
     $("#slideshow").craftyslide({
		 'width': 640,
		 'height': 300,
		 'pagination': true,
		 'fadetime': 500,
		 'delay': 500
		});
   </script>

Crafytslide comes with a simple fade transition and few options. Width and height are self explanatory. Pagiantion controls if you want to show the number images/slides on the bottom, Fadetime controls the speed of fade and dealy controls the duration between each slide. You can visit Craftyslide page for more info. Here is how the slideshow  looks like.

That’s all. The simplicity of Craftyslide makes it very useful. Since it does not have a lot of transitions and options, the script is small and faster. Try it out let us know if you have another slideshow script your prefer.

Tutorial images are from SXC.hu