Lightbox image viewer 2.03a Help

**dobbin** · 04-26-2008, 08:47 PM

1) Script Title:Lightbox image viewer 2.03a

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

3) Describe problem: How do you add a Thumb in to this code below?

HTML Code:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

**jscheuer1** · 04-26-2008, 10:46 PM

Code:

<a href="images/image-1.jpg" rel="lightbox" 
title="my caption"><img src="images/image-1_tbn.jpg" 
alt="Thumbnail Image" title="Hide My Caption" border=0></a>

Or even as simple as:

Code:

<a href="images/image-1.jpg" rel="lightbox" 
title="my caption"><img src="images/image-1_tbn.jpg" alt="" border=0></a>

In either case, the file:

Code:

images/image-1_tbn.jpg

must exist at that location. In other words, just put a normal image tag in place of the text:

Code:

image #1

**dobbin** · 04-27-2008, 08:15 PM

Thanks for those codes but its not working in stead of opening up in that thingy.
It opens up in a new page.
Cheack if this code bleow is right?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Beddau temp.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Beddau U15's | The Team | Connor Dobbin</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<style type="text/css">
<!--
body,td,th {
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}
body {
	background-image: url(../../layout/images/backround.jpg);
	margin-left: 120px;
	margin-top: 0px;
	margin-right: 120px;
	margin-bottom: 20px;
	background-color: #FFFFFF;
}
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a:link {
	text-decoration: none;
	color: #009900;
}
a:visited {
	text-decoration: none;
	color: #009900;
}
a:hover {
	text-decoration: none;
	color: #009900;
}
a:active {
	text-decoration: none;
	color: #009900;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 18px;
	color: #009900;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('../../layout/Button%20rollover/Home%202.gif','../../layout/Button%20rollover/Fixtures%202.gif','../../layout/Button%20rollover/The%20team%20.gif','../../layout/Button%20rollover/Sponsors%202.gif','../../layout/Button%20rollover/Contact%202.gif')">
<table width="766" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="2"><img src="../../layout/images/spacer.jpg" width="2" height="181" /></td>
    <td colspan="7"><img src="../../layout/images/header.jpg" width="764" height="181" /></td>
    <td width="2"><img src="../../layout/images/spacer.jpg" width="2" height="181" /></td>
  </tr>
  <tr>
    <td rowspan="2"><img src="../../layout/images/spacer%202.jpg" width="2" height="45" /></td>
    <td colspan="7"><img src="../../layout/images/green%20bar.jpg" width="762" height="8" /></td>
    <td rowspan="2"><img src="../../layout/images/spacer%202.jpg" width="2" height="45" /></td>
  </tr>
  <tr>
    <td width="20" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="103" bgcolor="#FFFFFF"><a href="../Main%20Pages/Home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../../layout/Button%20rollover/Home%202.gif',1)"><img src="../../layout/Button%20rollover/Home%201.gif" name="Home" width="102" height="38" border="0" id="Home" /></a><a href="../Home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../../layout/Button%20rollover/Home%202.gif',1)"></a></td>
    <td width="138" bgcolor="#FFFFFF"><a href="../Main%20Pages/Fixtures.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fixtures','','../../layout/Button%20rollover/Fixtures%202.gif',1)"><img src="../../layout/Button%20rollover/Fixtures%201.gif" name="Fixtures" width="137" height="38" border="0" id="Fixtures" /></a><a href="../Fixtures.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fixtures','','../../layout/Button%20rollover/Fixtures%202.gif',1)"></a></td>
    <td width="177" bgcolor="#FFFFFF"><a href="../Main%20Pages/The%20team.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('The Team','','../../layout/Button%20rollover/The%20team%20.gif',0)"><img src="../../layout/Button%20rollover/The%20team%201.gif" name="The Team" width="176" height="38" border="0" id="The Team" /></a><a href="../The%20team.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('The Team','','../../layout/Button%20rollover/The%20team%20.gif',1)"></a></td>
    <td width="168" bgcolor="#FFFFFF"><a href="../Main%20Pages/Sponsors.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Sponsors','','../../layout/Button%20rollover/Sponsors%202.gif',1)"><img src="../../layout/Button%20rollover/Sponsors%201.gif" name="Sponsors" width="167" height="38" border="0" id="Sponsors" /></a><a href="../Sponsors.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Sponsors','','../../layout/Button%20rollover/Sponsors%202.gif',1)"></a></td>
    <td width="136" bgcolor="#FFFFFF"><a href="../Main%20Pages/Contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../../layout/Button%20rollover/Contact%202.gif',1)"><img src="../../layout/Button%20rollover/Contact%201.gif" name="Contact" width="135" height="38" border="0" id="Contact" /></a><a href="../Contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../../layout/Button%20rollover/Contact%202.gif',1)"></a></td>
    <td width="20" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="9" background="../../layout/images/mid.jpg"><div align="center"><!-- InstanceBeginEditable name="EditRegion4" --><!-- InstanceEndEditable --></div></td>
  </tr>
  <tr>
    <td colspan="9" background="../../layout/images/mid.jpg"><div align="center"><!-- InstanceBeginEditable name="EditRegion3" -->
      <table width="756" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="120" height="120" bgcolor="#CCCCCC"></a>&nbsp;<a href="../../images/Team page pictures/Connor Dobbin/Connor 1.gif" rel="lightbox" 
title="my caption"><img src="../../images/Team page pictures/Connor Dobbin/Connor 1 Thumb.gif" alt="" border=0></a></td>
          <td width="628" bgcolor="#CCCCCC"><div align="left">
            <p>Connor Dobbin<br />
              14<br />
              <a href="http://en.wikipedia.org/wiki/Rugby_union_positions#1._Loosehead_prop_.26_3._Tighthead_prop">Tighthead Prop</a> </p>
            </div>   </td>
        </tr>
        <tr>      
        </tr>
        <tr>
          <td colspan="2">&nbsp; </td>
        </tr>
      </table>
    <!-- InstanceEndEditable --></div></td>
  </tr>
  <tr>
    <td colspan="9" background="../../layout/images/mid.jpg"><div align="center">Template and site designed by <a href="mailto:lil-dobby@hotmail.co.uk">connor dobbin</a> &copy;Beddau R.F.C U14</div></td>
  </tr>
  <tr>
    <td colspan="9"><img src="../../layout/images/bottom.jpg" width="766" height="9" /></td>
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>

**jscheuer1** · 04-28-2008, 12:33 AM

Generally that means that the external scripts and/or style are not where their tags on the page say that they are, or that there is a script conflict or other script error, or all of or a combination of some of the above. However, this (highlighted red) also is wrong, and may or may not be all or a part of the problem:

Code:

<td width="120" height="120" bgcolor="#CCCCCC"></a>&nbsp;<a href="../../images/Team page pictures/Connor Dobbin/Connor 1.gif" rel="lightbox" 
title="my caption"><img src="../../images/Team page pictures/Connor Dobbin/Connor 1 Thumb.gif" alt="" border=0></a></td>

If you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**dobbin** · 04-28-2008, 04:25 PM

Sorry but i am still in the process of making the site but the code of the pake is above.

**jscheuer1** · 04-28-2008, 05:13 PM

Originally Posted by dobbin

Sorry but i am still in the process of making the site but the code of the pake is above.

That doesn't tell me what's happening though. I could, using all of the files available to me, create a mock up from your code, but that is no guarantee I will have recreated the same circumstances that exist on your 'pake' (page). For one thing, I won't have the images.

Maybe you should check the code for typos?

If I have some time, I will give this a shot, though it is usually much easier for me to help you if you have a live demo.

Was it working before you put the image tag in there for the thumbnail?

Thread: Lightbox image viewer 2.03a Help

Thread Tools

Search Thread

Lightbox image viewer 2.03a Help

Bookmarks

Bookmarks

Posting Permissions