Results 1 to 4 of 4

Thread: Thumbnail Viewer 2 - Adding anchor tag to title=

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

    Default Thumbnail Viewer 2 - Adding anchor tag to title=

    1) Script Title: Image Thumbnail Viewer II

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

    3) Describe problem: I would like to a link after the title text to open a popup with more info.
    however although this is working on Firefox and IE the page faile the W3C Validator ad the code contains a nested link which is forbidden in XHTML. I understand that nested links can be used in HTML5 but I havent got my head around that yet!

    I have prepared some test/demo pages:

    The basic page which validates OK is:-
    http://www.watermeadowstudio.co.uk/n...ew=&ex=&page=1
    The page with the "info link" is:-
    http://www.watermeadowstudio.co.uk/n...ew=&ex=&page=1
    This lights up like a christmas tree on the W3C Validator

    The original php code for the viewer dispaly is:-
    Code:
    //Get LHS Thumbnail and Pic data
    	$data = mysql_query("SELECT * FROM $tbl_name WHERE type='$type' LIMIT $start, $limit_col_1");}
    	// Extract data from db table
    	while($row = mysql_fetch_array($data))
    	{
    		if ($row['PicNotes']) {
    			$info = "<a href = \"notes/$row[PicNotes]\" class=\"popup1\"> <img src = \"images/info.png\"> </a>";
    		
    		}else{
    			$info='';}
    // 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.'><img border='1' src='images/".$row['tnfile']." ' alt=' ' title='' width='".$row['tnx']."' height='".$row['tny']."' class='tn' /></a><br />";
    	}
    
    	echo	"</td>";
    // Viewer cell
    	echo "<td width='41'></td>
    			<td align='center' valign='top' width='640'>
    				<div id='loadarea' class='viewer'><img src='images/wmlogo.gif' width='300' height='197' alt='' /><br />
    					Move the mouse over the thumbnails<br />
    					to view a larger image.</div>
    			</td>
    			<td width='41'></td>
    			<td width='110' align='center' valign='top'>";
    // Get RHS Thumbnail & Pic data
    		$data = mysql_query("SELECT * FROM $tbl_name WHERE type='$type' LIMIT $start_col_2, $limit_col_2");}
    // Extract data from db table					
    	while($row = mysql_fetch_array($data))
    	{
    		if ($row['PicNotes']) {
    			$info = "<a href = \"notes/$row[PicNotes]\" class=\"popup1\"> <img src = \"images/info.png\"> </a>";
    		
    		}else{
    			$info='';}
    // Display RHS 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.'><img border='1' src='images/".$row['tnfile']." ' alt=' '  width='".$row['tnx']."' height='".$row['tny']."' class='tn' /></a><br />";
    	}
    
    	
    	echo "	</td>
    			<td width='41'></td>
    
    		</tr>
    	</table>";
    The variable $info holds the link or is empty if there is no info data in the table.
    At this point $info has not been added to the title="..." statement.

    in the second version of the page with the $info added, the viewer lines become:-
    Code:
    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. $info'><img border='1' src='images/".$row['tnfile']." ' alt=' '  width='".$row['tnx']."' height='".$row['tny']."' class='tn' /></a><br />";
    Maybe this is a blind alley. I looked at modifying the js script to add a second title statement in its own <a tag> but that is a little (lot!) beyond my abilities at present. Is there a simple solution or should I start learning HTML 5?

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

    Default

    Ok, well I have another idea but I can't quite get it to work!

    Instead of trying to embed an anchor in an anchor suppose we use an onClick event to call the popup window.

    So I used a fairly standard javascript popup:-
    Code:
    <script type="text/javascript">
    	// Info popup window
    	function showInfo(infFilename) {
    		alert(infFilename);
    		popupWin = window.open('notes/"+infFilename+"','open_window','width=400,height=300,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=20,top=20' );
    				}
    </script>
    I then modified the enlarged image calls:-
    Code:
    while($row = mysql_fetch_array($data))
    {
    	if ($row['PicNotes']) {
    //								$icon = "<a href = \"notes/$row[PicNotes]\" class=\"popup1\"> <img src = \"images/info.png\" /> </a>";
    		$icon = "<img src = \"images/info.png\"  onclick=\"showInfo(+$row[PicNotes]+)\" /> ";
    	}else{
    		$icon='';}
    // Display RHS 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 />";
    }
    This almost works but I can't see how to get the quotes and escaping right.

    you can see the the results at:-
    http://www.watermeadowstudio.co.uk/n...ew=&ex=&page=1

    The left hand side thumbnails are using the "bad html" ie
    Code:
    <a href= "blabla" <a href="blabla2"> </a> </a>
    Which works in my browsers!

    and the right hand side thumbnails are using the "image and onclick" code which dosen't work. It looks to me as the popup function is not getting called or the filename is not being passed to it.

    Any suggestions?

  3. #3
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default

    Not sure if this is what you might want, but see http://www.jacquimorgan.com/hist/index.html# -- rollover to change large "holder" image, click for pop-up.

    The pop script is
    Code:
    /*in BODY <a href="#nogo" onclick="loadpage('../things/___.jpg')">TEXT</a>*/          
    // JavaScript Document
    var mypop=null;
    function loadpage(url) {
    	if ((!mypop) || (mypop.close)) {
    		mypop = window.open (url, 'mypop', 'width=400px,height=375px,toolbar=0,resizable=1,screenx=0,left=20,screeny=0,top=20');
    		} else { mypop.document.location.href=url; }
    		mypop.focus(); return true; 
    	}
    Not sure what happens to new window attributes in HTML5, but you can modify those shown here.

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

    Default

    Thanks for this but I don't think the problem is the javascript. My hunch is that the XHTML is wrong. It seems to render according to the "view source" but I can't tell if it is a real jarvascript call or just plain text - too many or too few single and double quotes!

Similar Threads

  1. Resolved Thumbnail Viewer II - image title with <p> code
    By KarenEZ in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-22-2014, 08:00 PM
  2. Resolved Image Thumbnail Viewer II - title attribute
    By dipper85 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-15-2009, 01:45 AM
  3. Thumbnail Viewer II with HTML Title
    By cardin.smith in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-11-2008, 03:09 PM
  4. Image Thumbnail Viewer II-help with title length
    By genia in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 01-28-2008, 12:53 PM
  5. Can I center the title in Image Thumbnail Viewer
    By jljacobs in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-17-2007, 12:55 AM

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
  •