PDA

View Full Version : Light Box Viewer (ending the loop?)



g28dman
07-21-2007, 02:19 AM
1) LightBox View I

2) http://dynamicdrive.com/dynamicindex4/lightbox/index.htm

3) I have gotten this script woekinf for pics, I was wondering if it could be modified for animated images. The attached script links a radar thumbnail to a live radar. I have gotten it to work, however when I close the viewer and the thumbnail image updates, it reopens a new session of the viewer. Is there anyway to end the cycle?

<a href="http://66.28.250.180/data/nids/SJT19_anim_t.gif?t=1051936748" rel="lightbox" title="Click for Larger View"><img height="108" src="http://sirocco.accuweather.com/adc_sat_160x120_public/ei/isaesc.gif" width="151" border="0"/></a>

Thanks.

EDIT: It looks like I can "kill" the cycle after closing the viewer, then reloading the page. I do not have the knowledge to what, where to place that kind of code. I found a refresh script using google, but it was a timed event, I think I just need one when I close the viewer.

jscheuer1
07-21-2007, 05:16 PM
While experimenting with this, I found that the server with the animated radar image on it didn't always have the image available. That aside, by adding this (the red part in the below) to the lightbox.js file, at least when the server had the image available, things worked out OK:


//
// hideLightbox()
//
function hideLightbox()
{
// disable image onload
imgPreload.onload=null;
// get objects
objOverlay = document.getElementById('overlay');
objLightbox = document.getElementById('lightbox');

// hide lightbox and overlay
objOverlay.style.display = 'none';
objLightbox.style.display = 'none';

// disable keypress listener
document.onkeypress = '';
}

I also came up with some refinements for the link which you might like. These updated the radar image, so it couldn't be cached and updated the caption. I put this in the head of the page:


<script type="text/javascript">
function update_radar(){
return 'http://66.28.250.180/data/nids/SJT19_anim_t.gif?t='+new Date().getTime();
}
</script>

And made the link like so:


<a href="http://66.28.250.180/data/nids/SJT19_anim_t.gif?t=1051936748" onmouseover="this.href=update_radar();this.title='Click for Larger View';" onmousedown="this.title='San Angelo Radar';" rel="lightbox" title="Click for Larger View"><img height="108" src="http://sirocco.accuweather.com/adc_sat_160x120_public/ei/isaesc.gif" width="151" border="0"/></a>

g28dman
07-21-2007, 08:27 PM
jscheuer1, thank you for your help, and the modification adds a bit of professional feel, than having the caption field read "Click for larger view".