Results 1 to 4 of 4

Thread: Image Thumbnail Viewer II, Pop Windows Help

  1. #1
    Join Date
    Dec 2005
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face Image Thumbnail Viewer II, Pop Windows Help

    1) Script Title: Image Thumbnail Viewer II

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

    3) Describe problem: I've been hunting around on this forum looking for a customization to this script.

    I want to be able to open a NEW window when the link is clicked on AS WELL AS open in a NEW window (and separate html page) when the thumbnail image is clicked on.

    And I would like the window to be not just a regular browser page, but defined in height and width. When clicked the new windows will contain pages with different content.

    I haven't been able to find a thread that does both. Can anyone help?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Try the following modified .js file, which does the following:

    1) When the anchor link is clicked on, opens the link defined inside the "data-url" attribute in a new pop up window
    2) When the enlarged image is clicked on, opens the link defined inside the "data-largeurl" attribute in a new pop up window

    The markup for your anchor links should look something like the below:

    Code:
    <a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" data-url="http://google.com" data-largeurl="http://yahoo.com" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">Saturn #1</a><br />
    Notice the two new attributes in red above. To customize the style of the pop up window, you'll want to edit the two lines in red below inside the .js file:

    Code:
    window.open($anchor.attr('data-largeurl'), "", "width=600,height=600")
    And:

    Code:
    window.open($anchor.attr('data-url'), "", "width=600,height=600")
    For that you may find this tutorial helpful.
    DD Admin

  3. #3
    Join Date
    Dec 2005
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That looks good but I need to know exactly what was changed in the .js file because I have a customized version from one of the DD members. I can't just upload the new .js because it will over write the customization already made.

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The best way to quickly compare what's changed between two .js files is to use a comparison software such as Beyond Compare. As far as what's changed in my modified .js file above compared to the original, the parts in red are the new additions:

    Code:
    					$.thumbnailviewer2.showimage($targetimage, s)
    					$targetimage.css({cursor:'pointer'}).unbind('click').bind('click', function(){
    						window.open($anchor.attr('data-largeurl'), "", "width=600,height=600")
    						return false
    					})
    				})
    			$loadarea.data('$queueimage', $hiddenimage) //remember currently loading image as image being queued to load
    			}
    and:

    Code:
    			else
    				$hiddenimage.bind('load', function(){$hiddenimage.trigger('loadevt')})
    			return false
    		})
    		$anchor.unbind('click').bind('click', function(){
    			window.open($anchor.attr('data-url'), "", "width=600,height=600")
    			return false
    		})
    DD Admin

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
  •