Results 1 to 5 of 5

Thread: Thumbnail Image Viewer II

  1. #1
    Join Date
    Jul 2008
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Thumbnail Image Viewer II

    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:
    HTML Code:
    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:
    [
    HTML Code:
    <a href = 'notes/tempest_series.php' class='popup1'> <img src = 'images/info.png'>
    the broken link is:

    HTML Code:
    <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
    [
    PHP Code:
                    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
    PHP Code:
        $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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

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

    Code:
    	//Call the function when the page loads
    	window.onload = function (){
    	    attachPopup();
    	}
    replace that with:

    Code:
    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.
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2008
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    		<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>
    - John
    ________________________

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

  5. #5
    Join Date
    Jul 2008
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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:

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

Similar Threads

  1. Replies: 4
    Last Post: 02-09-2013, 09:55 PM
  2. Image Thumbnail Viewer II - Option for thumbnail?
    By doriggidy in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-11-2012, 12:45 AM
  3. Image Thumbnail Viewer II Active Thumbnail on Slideshow? (help please) :)
    By SoulieBaby in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-11-2008, 12:41 AM
  4. Image Thumbnail Viewer - unwanted border around thumbnail images
    By solder_on in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-23-2007, 11:19 AM
  5. Image Thumbnail Viewer II - thumbnail question
    By sarahmdr in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-17-2006, 10:06 PM

Tags for this Thread

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
  •