...

View Full Version : Load one by one using jquery



mint suite
11-10-2008, 01:31 PM
Hi

I have a number of images that I want to fade-in in order one by one (using animate and opacity). There will be an unknown number of images as they are coming via a cms/database, so I can't hand code the animation for each.

Any ideas on how to do this? Maybe with an array? - although I don't really know.

Cheers!

Bill Posters
11-10-2008, 02:27 PM
You'll need to utilise the callback of each fadeIn() method, nesting them sequentially.

e.g.

$('#image_1').fadeIn('500',function(){

$('#image_2').fadeIn('500',function(){

$('#image_3').fadeIn('500',function(){

$('#image_4').fadeIn('500',function(){

$('#image_5').fadeIn('500',function(){

$('#image_6').fadeIn('500',function(){

$('#image_7').fadeIn('500',function(){

$('#image_8').fadeIn('500',function() {

$('#image_9').fadeIn('500',function(){

$('#image_10').fadeIn('500');

});

});

});

});

});

});

});

});

});

You'll quite probably need to create that js dynamically, using a db query and some careful nesting.

mint suite
11-10-2008, 02:42 PM
Thanks

I could do it that way, I was just wondering if there is a way to loop through an unordered list maybe?

NancyJ
11-10-2008, 02:59 PM
You could possibly do something like this (warning this is off the top of my head and completely untested)




max_images = $('#image_list li).length() ;
current_image =0;

$(document).ready(function()
{
fadeImage();
}
);

function fadeImage()
{
curent_image = current_image+1;
if(current_image<=max_images)
{
$('#image_list li').get(current_image-1).fadeIn(500, fadeImage);
}
}

barkermn01
11-10-2008, 03:03 PM
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'


// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}


Then in the body onload runSlideShow();

Change these then add more Following the pattern
Paths are relative to page
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'

*** P.S This is not AJAX by no meens

Bill Posters
11-10-2008, 04:26 PM
I thought the web des/dev community had grown out of IE-only thinking.

barkermn01
11-10-2008, 04:47 PM
I thought the web des/dev community had grown out of IE-only thinking.

We have but there is only IE that can fade properly(damn Mozilla hurry up),

And to comment: "Your post is irrelevant. Read the question before posting",

This is not the case i did read it and if you don't know that php can out put Arrays that go back and learn some thing this is the javascript forum and php outputting an array i did not think i needed to show but here just for you now removed that infraction



$pics = array();
// MySQL Info to get the images and query run and saved under $query
// imageSRC is used as the source address from the DB
while($row = mysql_fetch_array($query))
{
$pics[] = $row['imageSRC'];
}
foreach($pics $key as $data){
echo 'Pic['.$key.'] = "'.$data.'";';
}

NancyJ
11-10-2008, 04:52 PM
We have but there is only IE that can fade properly(damn Mozilla hurry up)

Please don't pollute threads with your misinformation. It is not helpful to anyone.

Bill Posters
11-10-2008, 06:31 PM
How about something like…?

var i = 0;

$(document).ready(function(){

$('#these img').hide();

var int = setInterval("doThis(i)",500);

});

function doThis() {

var imgs = $('#these img').length;

if (i >= imgs) {
clearInterval(int);
}

$('#these img:hidden').eq(0).fadeIn(1000);

i++;

}



<div id="these">

<img src="1.png" alt="1" />
<img src="2.png" alt="2" />
<img src="3.png" alt="3" />
<img src="4.png" alt="4" />

</div>

mint suite
11-10-2008, 07:58 PM
Hi Guys,

Thanks for the help. NancyJ and Bill your ideas look like just what I'm after.

I'll give them a go

Thanks again



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum