Advanced Search

Results 1 to 2 of 2

Thread: revised script image thumbnail viewer draggable image

  1. #1
    Join Date
    Jun 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default revised script image thumbnail viewer draggable image

    1) Script Title: image thumbnail viewer

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    3) Describe problem: 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>

    Note how the href also points to the image; such a setup allows non DHTML browsers to bypass the script, and load the image in its own browser window.
    Last edited by alyam; 06-21-2008 at 05:50 PM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    alyam (06-21-2008)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •