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 } ?
Now they're visible before $(document).ready(); kicks in..
Cool thing besides that!!
Hi Srinivas,
Your 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
its a cool...thanks ^^
this is a cool example
Your demo site is so slow for me that I can not see the effect.
But thanks for sharing anyway :)
this is an interesting example
Hi, nice tutorial, but you have a duplicate photo, if you cancel this string $('#imagesdiv img').clone().appendTo($('#imagesdiv'));
the images will not be duplicate anymore...
cool ;)
hello, i have a question.
Then 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.
setTimeout(function(){$(me).fadeIn(1000)}, i);
instead
$(me).delay(i).fadeIn(1000);
be written..
Thanks for sharing :)