Results 1 to 3 of 3

Thread: Image Thumbnail Viewer II - Possible?

  1. #1
    Join Date
    Oct 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer II - Possible?

    1) Script Title: Image Thumbnail Viewer II

    2) Script URL (on DD): http://www.dynamicdrive.com/forums/s...d.php?p=113010

    3) Describe problem:

    Is there a way to have the REL "mouseover" point to one image while "onclick" actually loads up a new page?

    Basically, I am listing the thumbnails with Text, when the user hovers over the text a small thumb appears, then I would like the user to be able to click the text to redirect them to the full size image.

    I know, there are better ways to do this but this is how I need it to work (if its possible) ... sort of like a "preview before fullsize" function ... can anyone help?

    Thanks,
    Jon

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Add in the script (red):

    Code:
    init:function(){ //Initialize thumbnail viewer script
    this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
    var pagelinks=document.getElementsByTagName("a")
    for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
    if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
    var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
    if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
    this.preloadedimages[this.preloadedimages.length]=new Image()
    this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
    pagelinks[i]["onclick"]=function(){ //Cancel default click action
    if(this.rel.split('::')[2])
    window.location=this.rel.split('::')[2];
    return false
    }
    }
    pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
    thumbnailviewer2.loadimage(this) //Load image
    return false
    }
    if (this.hideimgmouseout)
    pagelinks[i]["onmouseout"]=function(){
    thumbnailviewer2.hideimage(this)
    }
    this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
    } //end if statement
    } //END FOR LOOP
    
    
    } //END init() function
    Once you do that, you can have a link like so:

    Code:
    <a href="bulb.gif" rel="enlargeimage::mouseover::bulb_lrg.jpg" rev="loadarea">Thumbnail</a>
    Or:

    Code:
    <a href="bulb.gif" rel="enlargeimage::mouseover::bulb_lrg.htm" rev="loadarea">Thumbnail</a>
    Clicking on the link will take you to the larger image listed (first example) or a page (if you have one) with the larger image on it (second example).

    Mousing over will still do what it already did.
    - John
    ________________________

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

  3. #3
    Join Date
    Oct 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Perfect! Thank you for the info and quick reply.

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
  •