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
Post a Comment