Image Thumbnail Viewer II, Pop Windows Help

[vlane95678]

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?

[ddadmin]

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:

<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:

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

And:

window.open($anchor.attr('data-url'), "", "width=600,height=600")

For that you may find this tutorial helpful.

[vlane95678]

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.

[ddadmin]

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:

					$.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:

			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
		})