animation - jquery shine effect, animate without hover as a trigger -
i using amazing jquery shine time addy osmani. works fine since did copied , pasted :d
but need shine effect automatically animate periodically image loads without having hovered first, how can achieve ? honest have 0 knowledge when comes jquery , or javascript
here's code:
<script type="text/javascript"> $(document).ready(function(){ /*your shinetime welcome image*/ var default_image = 'images/large/default.jpg'; var default_caption = 'welcome shinetime'; /*load default image*/ loadphoto(default_image, default_caption); function loadphoto($url, $caption){ /*image pre-loader*/ showpreloader(); var img = new image(); jquery(img).load( function(){ jquery(img).hide(); hidepreloader(); }).attr({ "src": $url }); $('#largephoto').css('background-image','url("' + $url + '")'); $('#largephoto').data('caption', $caption); } /* when thumbnail clicked*/ $('.thumb_container').click(function(){ var handler = $(this).find('.large_image'); var newsrc = handler.attr('src'); var newcaption = handler.attr('rel'); loadphoto(newsrc, newcaption); }); /*when main photo hovered over*/ $('#largephoto').hover(function(){ var currentcaption = ($(this).data('caption')); var largecaption = $(this).find('#largecaption'); largecaption.stop(); largecaption.css('opacity','0.9'); largecaption.find('.captioncontent').html(currentcaption); largecaption.fadein() largecaption.find('.captionshine').stop(); largecaption.find('.captionshine').css("background-position","-550px 0"); largecaption.find('.captionshine').animate({backgroundposition: '550px 0'},700); }, function(){ var largecaption = $(this).find('#largecaption'); largecaption.find('.captioncontent').html(''); largecaption.fadeout(); }); /* when thumbnail hovered over*/ $('.thumb_container').hover(function(){ $(this).find(".large_thumb").stop().animate({marginleft:-7, margintop:-7},200); $(this).find(".large_thumb_shine").stop(); $(this).find(".large_thumb_shine").css("background-position","-99px 0"); $(this).find(".large_thumb_shine").animate({backgroundposition: '99px 0'},700); }, function(){ $(this).find(".large_thumb").stop().animate({marginleft:0, margintop:0},200); }); function showpreloader(){ $('#loader').css('background-image','url("images/interface/loader.gif")'); } function hidepreloader(){ $('#loader').css('background-image','url("")'); } }); </script>
please me, thanks
regards
setinterval(function() { $('.thumb_container').find(".large_thumb").stop().animate({marginleft:-7, margintop:-7},200); $('.thumb_container').find(".large_thumb_shine").stop(); $('.thumb_container').find(".large_thumb_shine").css("background-position","-99px 0"); $('.thumb_container').find(".large_thumb_shine").animate({backgroundposition: '99px 0'},700); }, 3000);
try that, or if want customise it, change code have put of $('thumb_container'
) :)
Comments
Post a Comment