Slideshow: how to control number of images cached?

jackdaw

When viewing the slideshow I noticed how fast the images load. So I assume they get preloaded. But how many? I want to limit the number of images preloaded to avoid unnecessary datatransfer/exceeding bandwith (how do you call that in english?). I have a few albums that contain almost 200 images, and if someone pauses at the first image I don't want the other 199 to be preloaded .

acrylian

I understand what you mean. The jQuery version indeed preloads all images. It's a direct adaption of this jQuery plugin:
http://www.malsup.com/jquery/cycle/

I might be possible to add a limit of preloading somehow, but I currently don't know how. I am far from being a jQuery/JS expert. If you have any idea that would be welcome.

I suggest you use the flash mode with that many images, because the flowplayer only preloads the next image.

jackdaw

Well, I was thinking of the Tricasa theme. I think that one (looking at the image.php file) has options to set how many images should be preloaded. But I have no idea how to implement that in the slideshow.

I will sent the writer of this jQuery Cycle Plugin an email. Perhaps he can help. I don't want to change the slideshow just when it is working just the way I want it .
But perhaps you can point me to a gallery that has this flash mode working? I know this flowplayer exists, but have no idea how to make it work besides activating the plugin...

acrylian

I will see to the slideshow preload issue tomorrow. I know there are jQuery solutions for that, too, so it probably will be possible to combine that.

To the flash mode: You just need to activate the flowplayer plugin and choose "flash" in the slideshow options. That's all besides that you of course need flash installed..:-)

jackdaw

Found it. Looks good, for movies and such, but personally I prefer jquery for the images and not the flowplayer. Many thanks for wanting to look into the preloading!

Also it seems that the flowplayer is available in a dark and light version, but how do I get the lightversion to work? In flowplayer.php I can only see the lightversion, but this is not what is showing up after switching from jquery to flash mode. Also no option inside the 'plugin options' page.

And last but not least, if you like soccer, have fun tomorrow with the match between your Germany and Spain! ...

acrylian

Yes, I actually prefer jQuery, too. Actually we use the Flowplayerlight version, but thanks that you remind me, I meant to add options for the colors of flowplayer both in its plugin and for the slideshow.

Thanks, actually I am not a big soccer fan, but of course I will watch that match...:-)

jackdaw

One other thing you could look into when you take a look at solving this preloading issue, is the order. Ofcourse I hope you will find a way of limiting the number of preloads, but I just also noticed that the control.png images are loaded after the images inside the album are loaded. So in the case of this album I have with 200 images, the control buttons are not visible until all the images are downloaded... which is about 8 Mb.
If you succeed in limiting the preloads, this will be of less importance because then only about 2 to 8 number of images will be downloaded first.

acrylian

Actually I never noticed that. Could you post a link to that album?

jackdaw

Here's the link.

Click slideshow to download about 200 images

acrylian

Ok, if I wasn't convinced before that somethings needs to be done regarding preload limit, I would be it now...

But regarding the control images, I couldn't see that, they were immediatly there for me, at least with Safari.

jackdaw

I'm glad you agree

I'm using Firefox myself (latest version of the 2.xxx branch for Ubuntu), but decided to test it in IE 6 after what you said about the control images in Safari, and in IE the images are immediately there... So it has something to do with Firefox then...

jackdaw

Just tried preloading with css and with javascript, but nothing works. But when I click the 'previous page' button of the browser the controls pop up immediately.
I hope/guess this will be solved automatically when the option to set maximum preloads is ready.

acrylian

The cycle plugin has an option "addslide" that escaped me and in another forum I maybe found something that could help. I am about to test that.

Update: Does not work, but I have to admit my js knowledge is a little limited.... Are you by chance a JS expert? Then you could take a look at the "Add slides..." examples here http://www.malsup.com/jquery/cycle/more.html. Maybe you have an idea how we could do that..

jackdaw

No, I'm afraid I'm not a expert on anything , although I know my way through css pretty well and I can read php a little, enough to make some minor adjustments here and there when needed.

The only clumsy thing I can think of is when looking at the third example concerning 'Add slides'.
It says:

`for (var i = 3; i < 9; i++) { ... `

In my very limited way of thinking my mind came up with something like this:

`for (var i = ($currentimage-2); i < ($currentimage+2); i++) { ... `

I always wished my mind would have more feeling with code than it does, but it hasn't I'm afraid...

acrylian

Ok, thanks, I will investigate that further and since we seem not to be the only ones with that problem, there must be a solution somewhere...

jackdaw

Just a quick reply on those control buttons that only appeared after all the images were preloaded. I upgraded to Firefox 3 yesterday, and now the control buttons are visible immediately, so the 'problem' was inside Firefox.
Any luck yet on that 'limiting preloaded images'?

acrylian

No, sorry, no luck currently, I will ask our project leader Trisweb if he can help, he is better with JS than I am (but he is very busy currently). I promise we won't forget that issue.

dpeterson

Hi, all. Have been checking this thread for a week or two, since I also wanted the ability to progressively load images (many images in the albums I have started are big, and the 'skip' of images not yet loaded was getting annoying). Since as of today there seemed to be no solution upcoming, I dug into the Jquery cycle addslide option. I'm no php or javascript expert, but after hacking a bit, I have the functionality working. I'm really new to this forum and ZenPhoto in general, so I'm not sure how to go about providing my prototype solution. Basically, I build javascript array of the image paths and other info that is normally written to the slides <div>, and incorporate the data into to the Jquery cycle callback, based on the demo2 at: http://malsup.com/jquery/cycle/add2.html. I then hack the Printslideshow() to limit it to only printing the 1st 2 slides, and let the callback add the rest. If you have firebug, you can see it working in action at: http://www.mammamiapizzabeer.com/zenphoto/index.php Navigate to any slideshow from there (forgive the pages - they're prototype work in progress). Let me know how I can post a copy of my "hacked" version of slideshow.php and I will do so gladly, hoping somebody might clean it up.

acrylian

Thanks, that's a absolutly great! Shame in my JS knowledge....That is exactly what is needed. To submit the fix please register on trac and open a ticket on and attach your fix to it. We will then work that into the current nightly (I saw you are still on 1.1.6, so that can't be used directly).

jackdaw

Very nice! . Thank you dpeterson for the solution and acrylian for the rest!
Acrylian, could you post a quick reply here when this solution is in the nightly? Or what the changes are and perhaps which files need to be replaced?

dpeterson

I've created a ticket via trac, and hopefully the slideshow.php file is attached for review (I ?think? my submission worked - very new at this stuff). Anyway, good luck, hopefully someone can make use of the revisions.

acrylian

You did everything correctly. We surely will make use of it!

acrylian

jackdaw, dpeterson's fix is in the svn, so it will be in tonight's nightly.

jackdaw

Downloaded and tried the new slideshow.php and it works very nicely and fast!
The only thing that took me a little work (just a little ), is that at first I couldn't get the filename/title beneath the images instead of above.
At first I did it by moving

`echo "

".$image->getTitle()." (".$count."/".$numberofimages.")

";`

to the end of the if/else statements (movie or mp3 or image) like I did in the 'old' slideshow.php file. This resulted in a correct presentation of that filename for two slides, but with the third slide this filename moved to a position above the image. This is because from then on this title/filename is created somewhat differently ('htmlblock +=' etc.), so I had to change it there to.

Thanks dpeterson and acrylian! This will limit the data transfer immensily for large albums .

acrylian

The credit for this goes to dpeterson who figured it out. Now we are working on it to get it working with dynamic albums, too..

pipalia

Here's how we got around the issue of preloading images:

We used setInterval to call a function iteratively every 1 second to check if all the images have loaded (note: startingSlide attribute is required to restart cycle after it has been stopped):

var vCycleImages = setInterval("setImgCycleStatus()", 1000);

$(function() {
$('#fadeCenter').cycle();
$('#fadeCenter').cycle('stop');
});

function setImgCycleStatus() {

if ($.preloadImages("pic1", "pic2", "pic3", "pic4")){
$('#fadeCenter').cycle({
speed: 500,
timeout: 8000,
delay: -5000,
startingSlide: 0
});
clearInterval(vCycleImages);
}
}

jQuery.preloadImages = function() {
var bImgLoaded = true;

for(var i = 0; i < arguments.length; i++){
if (document.getElementById(arguments[i]).complete == false) {
bImgLoaded = false;
}
}
return bImgLoaded;
}

Hope this helps.

Samir Pipalia
Pipalia Software House
http://www.pipalia.co.uk