revised script image thumbnail viewer draggable image
revised script image thumbnail viewer draggable image
is there a revised script for image thumbnaill viewer with draggable images? it's an older script from 2001 and is not compatible now with firefox, opera or safari.
http://moserart.com/pricelist.html
if not, what can i add to the script to make the link images open in the same window?
2001 script included below:
thanks,
alyam
Image Thumbnail Viewer All
Credits: Dynamic Drive
Description: Prior to DHTML, viewing the images behind the thumbnails meant displaying them in their own browser window (by setting a URL to the image's path), which interrupts your visitor's browsing experience. This cool DTHML script allows you to show images inline on the page, with the images downloaded only when called. The displayed image is dragable, so the user can adjust its position dynamically. Browsers other than IE 4+ and NS 4 will automatically resort to the old method of displaying the images- in their own browser window. What else could you ask for in a thumbnail viewer?
Demo: (Don't forget to try dragging the images)
Using conventional thumbnail images:
Using text links:
-Flying Television
-American Pie
-Police Car
Directions
Step 1: Add the following to the <head> section of your page:
<script> /* Thumbnail image viewer- © Dynamic Drive (www.dynamicdrive.com) For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ function enlarge(which,e){ //Render image code for IE 4+ if (document.all){ if (showimage.style.visibility=="hidden"){ showimage.style.left=document.body.scrollLeft+event.clientX showimage.style.top=document.body.scrollTop+event.clientY showimage.innerHTML='<img src="'+which+'">' showimage.style.visibility="visible" } else showimage.style.visibility="hidden" return false } //Render image code for NS 4 else if (document.layers){ if (document.showimage.visibility=="hide"){ document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>') document.showimage.document.close() document.showimage.left=e.x document.showimage.top=e.y document.showimage.visibility="show" } else document.showimage.visibility="hide" return false } //if NOT IE 4+ or NS 4, simply display image in full browser window else return true } </script> <script language="JavaScript1.2"> //By Dynamicdrive.com //drag drop function for NS 4//// ///////////////////////////////// var nsx var nsy var nstemp function drag_dropns(name){ temp=eval(name) temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) temp.onmousedown=gons temp.onmousemove=dragns temp.onmouseup=stopns } function gons(e){ temp.captureEvents(Event.MOUSEMOVE) nsx=e.x nsy=e.y } function dragns(e){ temp.moveBy(e.x-nsx,e.y-nsy) return false } function stopns(){ temp.releaseEvents(Event.MOUSEMOVE) } //drag drop function for IE 4+//// ///////////////////////////////// var dragapproved=false function drag_dropie(){ if (dragapproved==true){ document.all.showimage.style.pixelLeft=tempx+event.clientX-iex document.all.showimage.style.pixelTop=tempy+event.clientY-iey return false } } function initializedragie(){ if (event.srcElement.parentElement.id=="showimage"){ iex=event.clientX iey=event.clientY tempx=showimage.style.pixelLeft tempy=showimage.style.pixelTop dragapproved=true document.onmousemove=drag_dropie } } if (document.all){ document.onmousedown=initializedragie document.onmouseup=new Function("dragapproved=false") } </script>
Step 2: Add the following <div> tag to your <body>. This tag is used to contain the displayed images:
<div id="showimage" style="position:absolute;visibility:hidden"></div>
Step 3: Lastly, setup either thumbnail images or text links in which to load the actual images from (like in demo above). Add the below event handler to its <A> tags:
onClick="return enlarge('http://mydomain.com/photo1.jpg',event)"
Configure the first parameter to point to the target image you wish shown (either absolute or relative path is fine).
For example:
<a href="photo1.jpg" onClick="return enlarge('photo1.jpg',event)"><img src="thumbnail.gif" border="0"></a>
<a href="photo1.jpg" onClick="return enlarge('photo1.jpg',event)">This is a text link</a>
CSS Codes
Reply With Quote
Originally Posted by alyam
Bookmarks