Yawd website

jan10

Ajax Coin Slider: A jquery image slider with asynchronous image loading

While working on my latest project, I was in need for a jquery slider capable of loading images asynchronously. When you run a big website with heavy pages and you need a slider with, say, 10 slide images, you are in trouble. Let's do the math: Suppose each image is sized 100KB, then you need to put an extra weight of 1MB to your homepage! Traditionally, image sliders load all images from the html code and as soon as the page loads, a javascript comes in to make the magic happen. This means that a user must wait a long time before the webpage loads. Moreover, it is always better to display content on demand rather than pre-load it. It saves you from the extra bandwith and lets the web server breathe!

Since I could not find a slider to meet my requirements and look fresh and sexy, I decided to get involved and modify a already established solution. Coin Slider, originally developed by Ivan Lazarevic, was one of the implementations that got my attention. It has really good-looking effects, it is written in jquery, comes with cool theming right out-of-the-box and is really easy to use. I implemented the lazy image loading, made the necessary refactoring and uploaded the new plugin here, in case someone needs it.

Download the attached ajax coin slider code, at the end of this article.

View the live demo at the Yawd website.

Ajax coin slider - screenshot from the yawd websiteFigure 1. Ajax coin slider - screenshot from the yawd website

Usage

To use it, first include the javascript files:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajax-coin-slider.min.js"></script>
<link rel="stylesheet" href="ajax-coin-slider-styles.css" type="text/css" /> 

For the html code, you only need to specify the div, where the slider will be loaded.

<div id="coin-slider" ></div>

Finally, call the ajax coin slider, specifying your images as follows:

<script type="text/javascript">
  $(document).ready(function(){ 
    $("#coin-slider").coinslider({ 
      content : [
        { img : 'img_1.jpg', 
          target : 'img_1_link.html',
          title : 'Image 2 title',
          description : 'Optional description' 
        },
        { img : 'img_2.jpg', 
          target : 'img_2_link.html',
          title : 'Image 2 title',
          description : 'Optional image 2 description'
        },
        { img : 'img_N.jpg',
          target : 'img_N_link.html', 
          title : 'Image N title'
        }] 
    });
  });
</script> 

Available options

width: 565, // width of slider panel
height: 290, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true, // pause on hover
content: [] //the image array

Attachments

Comments powered by Disqus