How to load images with flash effect using jquery. It is very useful script to loading images with nice effect on your web projects and also simple just seven lines of code. Use it and enrich your web page. Thanks!
Live DemoJavascript and HTML Code
I had implemented this on labs.9lessons home page.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i = 0;
$('#imagesdiv img').clone().appendTo($('#imagesdiv'));
$('#imagesdiv img').each(function()
{
var me = this;
$(this).hide()
var j = i;
setTimeout(function()
{
$(me).fadeIn(1000);
}, i)
i += 100
});
});
</script>
//HTML Code
<div id="imagesdiv">
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />
<img src='4.jpg' />
<div/>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i = 0;
$('#imagesdiv img').clone().appendTo($('#imagesdiv'));
$('#imagesdiv img').each(function()
{
var me = this;
$(this).hide()
var j = i;
setTimeout(function()
{
$(me).fadeIn(1000);
}, i)
i += 100
});
});
</script>
//HTML Code
<div id="imagesdiv">
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />
<img src='4.jpg' />
<div/>
Dont you wanna add some css rules to hide the images, like for example #imagesdiv img { display:none } ?
ReplyDeleteNow they're visible before $(document).ready(); kicks in..
Cool thing besides that!!
Hi Srinivas,
ReplyDeleteYour example is cool, though I am looking for some jquery driven 'spiral loading' animation. Something that would be more interesting than the ordinary ajax-loader. Do you have an idea how this can be done?
nice example thank you
ReplyDeleteits a cool...thanks ^^
ReplyDeletethis is a cool example
ReplyDeleteYour demo site is so slow for me that I can not see the effect.
ReplyDeleteBut thanks for sharing anyway :)
this is an interesting example
ReplyDeleteHi, nice tutorial, but you have a duplicate photo, if you cancel this string $('#imagesdiv img').clone().appendTo($('#imagesdiv'));
ReplyDeletethe images will not be duplicate anymore...
cool ;)
ReplyDeletehello, i have a question.
ReplyDeleteThen I am using this script i get every image spacing, but i want to make images without spaces, what code i need to include ? thanks
Seriopusly great piece of code. A client has literally just asked me to replicate this effect they saw on an all Flash site.
ReplyDeletesetTimeout(function(){$(me).fadeIn(1000)}, i);
ReplyDeleteinstead
$(me).delay(i).fadeIn(1000);
be written..
Thanks for sharing :)
it didn't work with opera,but it was fine with chrome
ReplyDeletehow to prevent user from saving image
ReplyDelete