Have you ever thought of having a dynamic resized images as page background? But there is a problem with having images as page background as end user has to wait for image to download before using the page. Which doesn't look good from user experience. But now you can easily set dynamically resized background image to page using jQuery. There is a plugin called "Backstretch" developed by Scott Robbin.
"Backstretch" is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. It will stretch any image to fit the page, and will automatically resize as the window size changes.
Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site.
To use this plugin, all you have to do is to download the plugin and add reference to the page and call this function.
Feel free to contact me for any help related to jQuery, I will gladly help you.
"Backstretch" is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. It will stretch any image to fit the page, and will automatically resize as the window size changes.
Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site.
To use this plugin, all you have to do is to download the plugin and add reference to the page and call this function.
$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"); You can also use this plugin to make a slideshow of image as background. You can use below code to make slideshow.var images = [ "http://dl.dropbox.com/u/515046/www/outside.jpg" , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg" , "http://dl.dropbox.com/u/515046/www/cheers.jpg" ]; $(images).each(function(){ $("![]()
")[0].src = this; }); var index = 0; $.backstretch(images[index], {speed: 500}); setInterval(function() { index = (index >= images.length - 1) ? 0 : index + 1; $.backstretch(images[index]); }, 5000); Really cool!!!!!Feel free to contact me for any help related to jQuery, I will gladly help you.
No comments:
Post a Comment