Results 1 to 6 of 6

Thread: Lightbox image viewer 2.03a Help

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

    Default Lightbox image viewer 2.03a Help

    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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

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

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

    Default

    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>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

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

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

    Default

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by dobbin View Post
    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?
    Last edited by jscheuer1; 04-28-2008 at 05:19 PM. Reason: add question
    - John
    ________________________

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

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
  •