Submit your widget

jQuery Image Scale Carousel

Created 14 years ago   Views 14200   downloads 2164    Author johnpatrickgiven
jQuery Image Scale Carousel
View DemoDownload
139
Share |

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.