View Full Version : Timer for zoomed image

01-20-2014, 08:59 PM
I have applied this script to my web site http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
It currently has to be manually closed to minimise it again.

Is there css for such ting as a timer,if not clicked on to close withing say 5 seconds it will close automatically.
Here is one page its working on.

Please advise

Thanks very much.

01-21-2014, 06:32 PM
Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

That said, there is no way to do that via CSS. At least none I'm familiar with. There might be a CSS 3 method, but if there is it would be pretty complicated and unsupported in some browsers. Javascript can do this though -

Put this script:

<script type="text/javascript">
thumbnailviewer.showthumbBox=function(){ //Show ThumbBox div
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)
var tb = this;
setTimeout(function(){tb.closeit();}, 5000);

after this (after adding back the required credit):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />
<script src="thumbnailviewer.js" type="text/javascript">

* Image Thumbnail Viewer Script- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code


01-21-2014, 06:51 PM
Many thanks & credit now re-applied.