Thumbnail Viewer 2 - Adding anchor tag to title=

**sabreur** · 06-08-2014, 04:03 PM

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?

**sabreur** · 06-12-2014, 05:56 PM

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?

**auntnini** · 06-12-2014, 10:00 PM

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.

**sabreur** · 06-13-2014, 01:09 PM

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!