jQuery Image Scale Carousel
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.
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu