Thumbnail Image Viewer II

[sabreur]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nailviewer2.js

3) Describe problem: I am trying to enhance the viewer by adding a popup to the image title. I have tried several popup scripts and all fail more or less. The basic page is served by PHP. All the viewer file data is read from a mysql table. That part works fine. I have now added an anchor which is a php variable which contains the popup link and a info icon. If there is no info file, this link and icon is not displayed.However, it seems that the link is not being sent to the popup script, but is just linking to a new page.

You can see the problem here:

http://http://watermeadowstudio.co.uk/gallery_nu.php?type=Seascapes&new=&name=&page=4

This is a test page, any of the nav links will take you to the live pages, you'll have to come back here to get to the demo page!

If you hover the mouse over the top two thumbnails which have associated image info files the enlarged image is displayed along with the title and other metadata. At the end of the meta data is an info icon which should link to a popup but it doesn't, it opens a new page. Below the viewer I have placed another icon for test purposes. This is outside of the Image Thumbnail Image Viewer II script but still served by php. Clicking this opens the popup. If you look at the "page source code" you will see that the working link is:
[

<a href = 'notes/tempest_series.php' class='popup1'> <img src = 'images/info.png'>

the broken link is:

<a href = "notes/tempest_series3.php" class="popup1"> <img src = "images/info.png"></a>

The difference is double and single quotes. The php code is identical in both cases so the choice of quotes is made by the php or the jarvascript

The "viewer link" is generated by
[

                while($row = mysql_fetch_array($data))
                {
// This bit is not working properly - class=popup1 is not being passed to the j-query script
                    if ($row[PicNotes]) {
                        $icon = "<a href = \"notes/$row[PicNotes]\" class=\"popup1\"> <img src = \"images/info.png\"> </a>";
                    
                    }else{
                        $icon='';}
    // Display LHS Thumbnail and Viewer Pic Data
                        
                        echo "<a href='images/".$row['vfile']."' rel='enlargeimage' rev='targetdiv:loadarea' title='&lt;b&gt;".$row['Title']."&lt;/b&gt;&lt;br /&gt;".$row['Medium']." &nbsp; &nbsp; &nbsp; ".$row['iw']." x ".$row['ih']." cm. .$icon'><img border='1' src='images/".$row['tnfile']." ' alt=' '  width='".$row['tnx']."' height='".$row['tny']."' class='tn' /></a><br />";
                } 

The working link is generated by

    $tmp = "tempest_series.php";                
    echo "<a href = 'notes/$tmp' class='popup1'> <img src = 'images/info.png'> </a>"; 

I tried replacing the "$icon" with hard code but the results are the same

Using single quotes or not escaping the double quotes causes the thumbnail display to garble of the whole script to crash.

The other point of note is that the right hand thumbnail page source, which has not been modified yet, looks very different.

Using curly braces doesn't help.

I have only just upgraded this page to the new (2010) version of ITNV II. The results were the same using the original (2007) code.

Please, can anybody spot the error.

[jscheuer1]

The quotes used don't matter. It's that the links that the thumbnail script generates haven't been initialized. Where you have:

	//Call the function when the page loads
	window.onload = function (){
	    attachPopup();
	}

replace that with:

jQuery('[class^="popup"]').live('click', function(e){e.preventDefault(); eventHandler.apply(this);});

The browser cache may need to be cleared and/or the page refreshed to see changes.

[sabreur]

That's fixed it, Many thanks, John, you're a genius.

I have just noticed some odd behaviour. The script is set for mouseover selection which works just fine but I find that if I click on a thumbnail it opens in a new page. IE8 shows the enlarged image top left on a white background and Firefox 28 shows it centered over a black background. I removed the popup scripts to see if they were effecting it but it would appear not. I don't remember the old version doing this. Have I done something to "break" it?

[jscheuer1]

You've done nothing wrong. All that's happening is that the links are firing normally. Some people like that to happen, others don't, the rest don't really care. To prevent it add this (highlighted) as shown after the external tag for the thumbnail viewer script:

		<script src="js/thumbnailviewer2a.js" type="text/javascript">

			/***********************************************
			* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
			* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
			* This notice must stay intact for legal use
			***********************************************/

		</script>
<script type="text/javascript">
jQuery(function($){
	$('a[rel="enlargeimage"]').click(function(e){e.preventDefault();});
});
</script>

[sabreur]

You've done nothing wrong. All that's happening is that the links are firing normally. Some people like that to happen, others don't, the rest don't really care. To prevent it add this (highlighted) as shown after the external tag for the thumbnail viewer script:

		<script src="js/thumbnailviewer2a.js" type="text/javascript">

			/***********************************************
			* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
			* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
			* This notice must stay intact for legal use
			***********************************************/

		</script>
<script type="text/javascript">
jQuery(function($){
	$('a[rel="enlargeimage"]').click(function(e){e.preventDefault();});
});
</script>

Thanks, page working perfectly, now. Delighted to help The Ocean Conservancy.