Forums > lightbox 2 javascript

Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics

callous

Jul 26 2007, 09:36 AM

My uncle wants me to make a website for his company. I've never made one before. This is all new to me. I'm using frontpage (and i hate it).

I want to use lightbox2. I followed the directions as best as I could. I put the files where they're supposed to go, and I put the codes where they needed to go.

It doesnt work and I'm confused. :(

help??

heres the code for the whole page:

CODE

<html>
<head>
<title>Pictures</title>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<style>

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

body {
    background-color:  #ffffff;
    font-family: tahoma;
    font-size: 7pt;
    color: #e7e7e7;
    scrollbar-3dlight-color: #ffffff;
    SCROLLBAR-ARROW-COLOR: #ffffff;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-face-color: #ffffff;
    SCROLLBAR-SHADOW-COLOR: #ffffff;
    SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
    scrollbar-track-color: #2E779A;


background-image:url('4xwdyf6.png');
background-repeat : repeat



}

h1 {
    background-color: #e7e7e7;

    color: #2E779A;
    font-family: georgia;
    font-size: 7pt;
    font-weight: bold;
    letter-spacing: 5px;
    text-align: left;
    margin: 0;

}


a:link, a:active, a:visited {
    color: #2E779A;
    text-decoration: none;
    font-family: georgia;
  font-size: 9px;
    font-weight: bold;
    cursor: help;

}

a:hover {
    text-decoration: none;
    color: #2E779A;
    cursor: help;
    font-weight: bold;
    font-family: georgia;
    font-size: 9px;

}

b {
    font-family: georgia;
    font-size: 7px;
    color: #2E779A;
}

input, textarea{

    font-family: tahoma;
    font-size: 9px;

}
</style>

<script language="JavaScript" fptype="dynamicanimation">

</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>

</head>
<body link="#008080" vlink="#0000FF" alink="#808080" onload="dynAnimation()">


<font face="Times New Roman">


<img src="header.jpg" style="position: absolute; left: 129px; top: 0;" width="726" height="213">
</font>

<div name="content" style="position: absolute; width: 665; left: 160; top: 230;height:296">


<a href="http://agsshop.com/" onmouseover="var img=document['fpAnimswapImgFP12'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP12'].src=document['fpAnimswapImgFP12'].imgRolln">
<img src="http://i10.tinypic.com/5yhmzxk.png" width="109" height="36" border="0" id="fpAnimswapImgFP12" name="fpAnimswapImgFP12" dynamicanimation="fpAnimswapImgFP12" lowsrc="hom%20blur.png"></a>
<a onmouseover="var img=document['fpAnimswapImgFP13'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP13'].src=document['fpAnimswapImgFP13'].imgRolln" href="a_g_s-.htm">
<img src="http://i11.tinypic.com/5x6malw.png" width="109" height="36" border="0" id="fpAnimswapImgFP13" name="fpAnimswapImgFP13" dynamicanimation="fpAnimswapImgFP13" lowsrc="pic%20blur.png"></a>
<a href="http://agsshop.com/toppage2.htm" onmouseover="var img=document['fpAnimswapImgFP14'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP14'].src=document['fpAnimswapImgFP14'].imgRolln">
<img src="http://i9.tinypic.com/6cr6zuo.png" width="109" height="36" border="0" id="fpAnimswapImgFP14" name="fpAnimswapImgFP14" dynamicanimation="fpAnimswapImgFP14" lowsrc="ch%20blur.png"></a>
<a href="http://agsshop.com/a_g_s-product_line.htm" onmouseover="var img=document['fpAnimswapImgFP15'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP15'].src=document['fpAnimswapImgFP15'].imgRolln">
<img src="http://i15.tinypic.com/535dim8.png" width="109" height="36" border="0" id="fpAnimswapImgFP15" name="fpAnimswapImgFP15" dynamicanimation="fpAnimswapImgFP15" lowsrc="pl%20blur.png"></a>
<a onmouseover="var img=document['fpAnimswapImgFP16'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP16'].src=document['fpAnimswapImgFP16'].imgRolln" href="/a_g_s-contact.htm">
<img border="0" src="conta.png" id="fpAnimswapImgFP16" name="fpAnimswapImgFP16" dynamicanimation="fpAnimswapImgFP16" lowsrc="cont%20blur.png" width="109" height="36"></a><p>

<b><font size="4" color="#2E779A" face="Times New Roman">Pictures</font></b></p>
<p>

<b><font color="#2E779A" size="2" face="Times New Roman">Doors</font></b></p>

<p>

<center>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<p>

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

Second attempt: <div class="thumbnail">
        <a href="images/image-1.jpg" rel="lightbox" title="Optional caption."><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
    </div>


</p>

</center>
</body>

queen

Jul 26 2007, 09:40 AM

why did you put the javascripts inside your <style> tag. take it out and put it above it.

callous

Jul 26 2007, 09:44 AM

because i don't know what i'm doing.

thanks.it works now.

steezahh

Jul 26 2007, 10:59 AM

~~the images have to by in .jpg or .jpeg format. that same thing happened to me. but once you fix it, it should work.~~ nvm.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.