if(plan.length == 0){
self.empty().css({
overflow: 'hidden',
padding: 0
});
return ;
}

If you're interested, you can check out our flood cam here: http://www.sciencebuzz.org/postcards/uploads/phenology/webcam/

It's a little prettier on our kiosk in the river gallery, so stop by sometime if you're ever in St. Paul!

Thanks again!

I played around with the code and I think your best option is to hack into the cross-slide.js file a little bit: go to around line 210 where you should find the following:

if (p.href)
elm = jQuery(format('<a href="{0}" rel="nofollow"><img src="{1}"/></a>', p.href, p.src));
else
elm = jQuery(format('<img src="{0}"/>', p.src));

Below is the replacement code. The last line is what you're going to need to change. Basically, I added a div wrapper (since the code subsequently looks for the children of the image container, we need to keep the number of elements the same). This wrapper contains the original img code and a new div. This new div will contain your page number. variable i is the loop number starting at 0 so we need to increment that by 1. plan.length is the total number of images in your folder. You're probably going to need to play around with the css of the div a bit more but I think this should get you started:

if (p.href){
elm = jQuery(format('<a href="{0}" rel="nofollow"><img src="{1}"/></a>', p.href, p.src));
}
else{
q = i+1;
elm = jQuery(format('<div><img src="{0}"/><div style="position:relative; background:white; top:-35px;width:500px">image {1} of {2} </div></div>', p.src, q, plan.length));
}

Now I'm trying to think of a way to show how the photos relate to each other sequentially so that if you catch part of the slideshow (it's playing on a kiosk here), you'll know where you're at in the series.

Can you think of a good way to implement something that would count the total number of images in the directory, then output where you're at as it rotates? Like an "Image 3 of 32" line of text that'd dynamically appear with the images? Could I use jQuery for that, or would it be PHP, or some combination of the two? It seems like it'd be simple enough, but I'm having a tough time coming up with a good approach! Any ideas?

Thanks again for the helpful article!

i have some hard time with it.
i'm trying to use it in a CMS MS website.

i did everything well (i thought), i think all my url are good..
but i have all those errors :

string(122) "Smarty error: [in tpl_head:24 line 18]: syntax error: unrecognized tag: loadImage(); (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:24 line 18]: syntax error: unrecognized tag " (Smarty_Compiler.class.php, line 590)" string(436) "Smarty error: [in tpl_head:24 line 20]: syntax error: unrecognized tag: // getimage.php is the php file that gets my images from the images folder $.post("getimage.php", function(data){ if(data.length >0) { // evaluate the string to a group of objects myObject = eval(data); // create a slideshow with the image objects and drop them in the placeholder $('#imgcontainer').crossSlide({sleep:5,fade:2 (Smarty_Compiler.class.php, line 446)" string(111) "Smarty error: [in tpl_head:24 line 20]: syntax error: unrecognized tag " (Smarty_Compiler.class.php, line 590)"

a LOT right? if you have any idea where i can search to fix it.
Thank you