Page 1 of 2 12 LastLast
Results 1 to 10 of 13

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

    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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    I remember that old script. It has been revised/updated, but it works a little differently now:

    http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default image thumbnail viewer

    thanks but i tried those new scripts and can't seem to get them to work on safari browser. i was wondering if there was something i could add to the old script to make it compatible to safari, firefox, opera?
    alyam

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by alyam View Post
    i tried those new scripts and can't seem to get them to work on safari browser.
    Its only one script I'm talking about, and it works fine in Safari 3 Win. Which Safari are you using?

    i was wondering if there was something i could add to the old script to make it compatible to safari, firefox, opera
    Most likely, there are just a few places where pixels ('px') should be specified. At least for browsers like Opera and FF, Safari (depending upon the version, or perhaps in any Safari) may require more tweaking, as it can sometimes be more demanding than other browsers when it comes to manipulating the css style of elements.

    To test that theory, try your version of the script on a page with no DOCTYPE. If that fixes things for FF, then it is probably just what I said. In any case, I don't have a copy of that old script around, so would need a link to it in order to see what could be done with it specifically.

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default

    the following link will show the script that i want to tweak so that it can work on safari (i'm on saf2) ff, opra,etc.

    http://moserart.com/pricelist.html

    if you could have a look at it and advise what should be changed and where that would be just great!!!

    alyam

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Here's a demo:

    http://home.comcast.net/~jscheuer1/s...ssic_plain.htm

    All styles, including the IE commented styles are required. So is the trans.png image which is enlarged and outlined on the demo page so that you can right click it to 'save as'. It is actually just a highly transparent 1x1 .png image use for a background overlay. Many browsers will not drag an image, except to save it (FF notably).

    Use your browser's 'view source' to get the code. The two eamples show the two methods of positioning:

    Code:
    <a href="photo1.jpg" onclick="return enlarge(this.href, event, 'mouse');">The Kiss</a><br>
    <a href="photo9.jpg" onclick="return enlarge(this.href, event, 'center');">Mona Lisa</a><br>
    'mouse', which is what you are used to, snaps to the mouse when activated. 'center' will make the enlarged image appear in the center of the viewing area.

    It may require a valid URL DOCTYPE as used on the demo page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>'Classic Pl . . .
    I tested in Safari 3 Win, so no guarantees about Safari 2. FF and IE look fine. Opera has a small bug - if you start dragging near text, the text may get highlighted. I might be able to fix that.

    Any questions, just ask.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default

    thanks for the script and demo! i used the script but was unable to get it right to be draggable - but the images do open in the center of the window. i'm thinking perhaps this might be a safer way to do it - do you feel it might be wiser as non-draggable function in order to be compatible with most browsers?

    so far it works fine this way (undraggable) on saf.2.2 and ff. i haven't as yet tried it on saf 3. opera. ie 5+, etc.

    also, i noticed that the images do not load as quickly as the older draggable script. pre-loading the images does not work. might there be a way to remedy this without interfering with the script function?

    thanks, i really do appreciate your great help!!!

    alyam

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    For the dragging to work in most browsers (it will work in earlier IE versions without this), you need to download:

    http://home.comcast.net/~jscheuer1/side/files/trans.png

    and place it in the folder with your page. However, clicking on the larger image will no longer close the larger image. Clicking anywhere else on the page will.

    You should get rid of this garbage (highlighted) from the top of your source code:

    Code:
    <meta content="MSHTML 5.50.4134.600" name=GENERATOR>
    <script>
    <!--
    /*
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>'Classic Plain' Image Thumbnail Viewer - Demo</title>
    <meta http-eq . . .
    It can only cause problems for some browsers, and helps nothing.

    Preloading the images would probably speed things up. The revised script uses the image's onload event to trigger its becoming visible. If when activating a larger image for a second time, it becomes visible sooner, preloading would help.

    However, preloading puts a strain on those browsers which may need it most (low end machines with slow internet connections). I prefer to optimize my images (reduce byte size), This will often help more, especially with images of such small physical dimensions. It appears that some of your images are fairly well optimized already, others could go on a byte diet.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default

    i tried taking that "garbage" off and the script didn't work in ie 5. how might i get around that? i really don't want any problems showing up elsewhere.

    i now think it may be easier for viewers to have a close button on the image instead of a draggable image (as much as i love that script)...many might be confused on how to close the image even if there is a written directive on the page.

    i agree about not pre-loading the images. all of my images are optimized in photoshop down to the lowest setting they can go without losing quality (especially when you have written text on them.)
    hopefully, many viewers will be on faster speed connections where the images load rather quickly.

    does the page work well in saf3?
    http://moserart.com/pricelist.html

    thanks,
    alyam

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by alyam View Post
    i tried taking that "garbage" off and the script didn't work in ie 5. how might i get around that? i really don't want any problems showing up elsewhere.
    Hmm, I am assuming you mean IE 5 Mac. No one should be using that legacy browser as their primary browser anymore, but I'm sure some are.

    Basically what that 'garbage' does is throw all IE (perhaps not 8, which isn't fully released yet) browsers into quirks mode, as if there were no DOCTYPE. It should have no effect on other browsers, which should know to just ignore it.

    Now, I just tested your page in IE 6 and 7, and I see that you removed both the 'garbage' and the DOCTYPE, and the performance is uniform.

    Quote Originally Posted by alyam View Post
    i now think it may be easier for viewers to have a close button on the image instead of a draggable image (as much as i love that script)...many might be confused on how to close the image even if there is a written directive on the page.
    I have a version of the script with a close button and a 'dragbar'.

    Quote Originally Posted by alyam View Post
    i agree about not pre-loading the images. all of my images are optimized in photoshop down to the lowest setting they can go without losing quality (especially when you have written text on them.)
    hopefully, many viewers will be on faster speed connections where the images load rather quickly.
    There are image optimization programs which can cut down on the byte load more. They do this by allowing you to selectively compress and/or smooth regions of JPEG images.

    Quote Originally Posted by alyam View Post
    does the page work well in saf3?
    http://moserart.com/pricelist.html
    Looks OK in Safari 3 Win.

    As a side note, the larger images pop up and are dismissed by clicking on them in all browsers I tested your current page in (which includes Opera 9.5 and FF 2, and those I mentioned above as having tested in).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •