Creating a JQuery Slideshow of a Background-Image -


i have element serves banner on website. banner has html content on it, uses high-resolution picture background-image. because of this, i'm loading background-image last , fading in when has been downloaded. code looks this:

<table id="bannertable" border="0" cellpadding="0" cellspacing="0" style="width:640px; height:480px;">   <tr><td style="padding-top:20px; padding-left:300px;">     <div>[some text]</div>   </td></tr>   <tr><td style="vertical-align:bottom; padding-bottom:20px;">     <div>[site menu goes here]</div>   </td></tr> </table>    <script type="text/javascript">     $(document).ready(function () {       $("#bannertable").loadbgimage("/picture1.png");     });      $.fn.loadbgimage = function (url) {       var t = this;       $('<img />')         .attr('src', url)         .load(function () {           t.each(function () {             $(this).hide();             $(this).css('backgroundimage', 'url(' + url + ')');             $(this).fadein();           });         });       return this;     }   </script> 

even this, website feels static. because of this, want loop through multiple high-resolution images @ runtime. these high-resolution images used in bannertable background-image. want them fade-in , fade-out loop.

how do jquery?

look demo source full working code


Comments

Popular posts from this blog

javascript - Enclosure Memory Copies -

php - Replacing tags in braces, even nested tags, with regex -