Results 1 to 3 of 3

Thread: Customising Image Thumbnail Viewer II

  1. #1
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Customising Image Thumbnail Viewer II

    1) Script Title: Image Thumbnail Viewer II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    3) Describe problem:

    I am using the ::click implementation of this script; however, I would like to be able to make the image disappear again by clicking a second time on the thumbnail.

    I have absolutely no knowledge of JavaScript, could someone show me how to do this?

    Thanks,
    T
    Last edited by tscd2; 04-08-2009 at 05:37 PM.

  2. #2
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I've had more of a fiddle, looked up a few tutorials, and came up with this block of code:

    loadimage:function(linkobj){
    var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
    var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
    var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
    var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
    var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
    if (typeof dest!="undefined") //Hyperlink the enlarged image?
    imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
    if (description!="") //Use title attr of the link as description?
    imageHTML+='<br />'+description
    imageHTML='<a style="cursor: pointer" onclick="showhide('image')"><div id="image" style="display: block">'+imageHTML+'</div></a>' //TSCD2 Vanish image
    if (this.iefiltercapable){ //Is this an IE browser that supports filters?
    showcontainer.style.filter=this.iefilterstring
    showcontainer.filters[0].Apply()
    where the only deviation from the DD Script is the line in red. The showhide function mentioned is included in the page header, and goes like this:

    <script language="JavaScript">
    // Credit to http://teamtutorials.com/web-develop...ing-javascript
    function showhide(id) {
    var state = document.getElementById(id).style.display;
    if (state == 'block') {
    document.getElementById(id).style.display = 'none';
    } else {
    document.getElementById(id).style.display = 'block';
    }
    }
    </script>
    My thinking was that this would mean that the image would be a link that would hide the div it's in. Instead, it just wipes the page and only loads the image. I've tried modifying my code in the following ways:
    - using 'var imageHTML=' instead of just 'imageHTML='
    - changing the order of the div and anchor in the line I added
    - including the showhide function on the external .js file

    For all I know this is completely the wrong way to do it, though. Please help?

  3. #3
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Figured it guys, thanks for your help though.

    I completely got rid of the Image Thumbnail Viewer II script, and replaced it with this in the header:

    <script language="JavaScript">
    // Credit to http://teamtutorials.com/web-develop...ing-javascript
    function showhide(id) {

    var state = document.getElementById(id).style.display;
    if (state == 'block') {
    document.getElementById(id).style.display = 'none';
    } else {
    document.getElementById(id).style.display = 'block';
    }
    }

    // Written by TSCD2
    function imageviewer(id) {
    var imagepath=document.getElementById(id).src;
    var imageHTML='<em style="cursor: pointer"><img id="'+id+'frame" src="'+imagepath+'" style="display:block" onclick="showhide(\''+id+'frame\')" /></em>';
    document.getElementById(document.getElementById(id).alt).innerHTML=imageHTML;
    }
    </script>
    Again, thanks. The script was called with:

    <img id="godotpic1" src=".../gallery/godot1.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic1')" height="66" />
    <img id="godotpic2" src=".../gallery/godot2.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic2')" height="66" />
    <img id="godotpic3" src=".../gallery/godot3.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic3')" height="66" />
    <img id="godotpic4" src=".../gallery/godot4.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic4')" height="66" />
    <img id="godotpic5" src=".../gallery/godot5.jpg" alt="godot2" style="cursor:pointer" onclick="imageviewer('godotpic5')" height="66" />
    <br /><br />

    <div id="godot2"></div>
    Hope this will help anyone else with the same problem.

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
  •