However, when I add it to the sidebar of my page, it never loads correctly. In the chrome debugging console I get the following error on line 40 of the cross-slide script: "container element does not have its own width and height"

Here is the page I am adding it to: http://oregontrailvet.com/thankyou.html

Any ideas?

Thank you so much!

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));
}