What Makes jQuery Image Scale Carousel Different?

It auto scales the images you put into it to the appropriate height and width keeping their aspect ratio in place.

When working with imagery online keeping the integrity of an images aspect ratio is as important as anything else. This is what's so nice about this jQuery plug-in; you don't have to worry about all of your images being perfectly sized for this slider. The jQuery Image Scale Carousel auto scales all of your images making implementation super simple.

How does it work?

It's easy. Set up an array of images, either local images or images out on the interwebs somewhere, and then hand that array to the jQuery Image Scale Carousel. Done!

Here's an example:

<script>

  var carousel_images = [
    "images/1.jpg", // Example of a local image
    "http://farm4.static.flickr.com/3328/3575375564_79ab90dca8_b.jpg",
    "http://farm4.static.flickr.com/3163/2505235306_b456603cf3_b.jpg",
    "http://farm4.static.flickr.com/3235/2925947121_8b1f95c95b_b.jpg",
    "http://farm3.static.flickr.com/2769/4481220450_91b0aa9e99_b.jpg",
    "http://farm1.static.flickr.com/118/299048945_faba1a6a4b_b.jpg",
    "http://farm4.static.flickr.com/3089/2335224771_cec36d33a6_o.jpg"
  ];


  $(window).load(function() {

    $("#photo_container").isc({
        imgArray: carousel_images
    });

  });

</script>

Does it Have Auto Play Functionality?

Yes, it does. Here's an example:

<script>

  var carousel_images = [
    "images/1.jpg", // Example of a local image
    "http://farm4.static.flickr.com/3328/3575375564_79ab90dca8_b.jpg",
    "http://farm4.static.flickr.com/3163/2505235306_b456603cf3_b.jpg",
    "http://farm4.static.flickr.com/3235/2925947121_8b1f95c95b_b.jpg",
    "http://farm3.static.flickr.com/2769/4481220450_91b0aa9e99_b.jpg",
    "http://farm1.static.flickr.com/118/299048945_faba1a6a4b_b.jpg",
    "http://farm4.static.flickr.com/3089/2335224771_cec36d33a6_o.jpg"
  ];


  $(window).load(function() {

    $("#photo_container").isc({
        imgArray: carousel_images,
        autoplay: true,
        autoplayTimer: 5000
    });

  });

</script>

Why Can't I Just Point the Plug-In at a Directory for Dynamic Images?

The short answer is you can.

Anyone familiar with any language like PHP, Ruby, or Python should have no problem building out the image array by reading the contents of a directory on their server.

I have created this purely as a jQuery/Javascript solution with the intention of it being server side scripting language agnostic.

That said, when I get some time I am going to write a PHP based tutorial for reading the contents of a directory and dynamically creating the image array.

***UPDATE: There is now a PHP example for dynamic images available in the GitHub download!***

Download Files

The files are open source and located at GitHub! Get them here!

It's better to download the source code from GitHub as the implementation example is much simpler to follow than viewing source on this page.

Be sure to follow me on Twitter for plug-in upgrade and improvement announcements.

Other jQuery Plug-Ins I've Written

Background-Resize    Pinned Footer     Flickr Gallery    SoSoSocial Social News Feed

Disqus Comments

blog comments powered by Disqus