i am currently building an online photo gallery for myself and have currently introduced Lightbox, although not absolutely perfect as when i click on my image, the image is displayed in the position to how i want it to, however that is not really an issue right now.
The problem i am having now is that when i click the ‘Home’ link and click on my first image, regardless of which image that is, it automatically is displayed on another webapge as seen on the image shack llink,
The problem you are having seems to be that clicking on a link will make it follow the path you specified in the href attribute.
What you would need to do (in JS) is add an event listener on the link and set preventDefault on the (click) event for standards compliant browsers, and return false for IE8-
Your html is invalid so you should fix that first. You can’t have divs inside anchors and your closing anchor is misplaced outside the div making the nesting incorrect also.
hi, i validated my html code and it has now no errors. However, i am still get the same problem, i am running IE 7, do i still need to add the javascript code in my .js file?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title> Shanghai Trip 2010</title>
<link rel="stylesheet" type="text/css" href="style_V1.css">
<script type="text/javascript" src="lightbox.js"></script>
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> SHANGHAI TRIP 2010 </h1>
</div>
<div id="navigation">
<ul>
<li><a href="index.php?link=home">Home</a></li>
<li><a href="index.php?link=shanghaizoo">Shangai Zoo</a></li>
<li><a href="index.php?link=chengtemple">Cheng Huang Temple</a></li>
</ul>
</div>
<div id="content">
<div class="pagedesc">
<p>
Hi, welcome to my site, here you will be able to see a wide variety of holiday pictures taken while
I was in Shanghai 2010 during the Summer holidays. You will also be able to see what it was like in
The Shanghai World Expo to places such as Shanghai Financial center.sssssssssssssssssssssssssdddddd
dddddddddddddddddddddddddddddddd
</p>
</div>
<div class="imageswrapper">
<div class="thumb"><a href="./images/IMG_0075.JPG" rel="lightbox">
<img src="./images/IMG_0075.JPG" width="150" height="100" alt="Temple Area Market"></a><div class="caption"><a href="./images/IMG_0075.JPG" rel="lightbox"><b>Description:</b>Temple Area Market</a></div></div><div class="thumb"><a href="./images/IMG_0109.JPG" rel="lightbox">
<img src="./images/IMG_0109.JPG" width="150" height="100" alt="side view"></a><div class="caption"><a href="./images/IMG_0109.JPG" rel="lightbox"><b>Description:</b>side view</a></div></div><div class="thumb"><a href="./images/IMG_0111.JPG" rel="lightbox">
<img src="./images/IMG_0111.JPG" width="150" height="100" alt="Dragon Head"></a><div class="caption"><a href="./images/IMG_0111.JPG" rel="lightbox"><b>Description:</b>Dragon Head</a></div></div><div class="thumb"><a href="./images/IMG_0302.JPG" rel="lightbox">
<img src="./images/IMG_0302.JPG" width="150" height="100" alt="Just hanging around!"></a><div class="caption"><a href="./images/IMG_0302.JPG" rel="lightbox"><b>Description:</b>Just hanging around!</a></div></div><div class="thumb"><a href="./images/IMG_0196.JPG" rel="lightbox">
<img src="./images/IMG_0196.JPG" width="150" height="100" alt="snake"></a><div class="caption"><a href="./images/IMG_0196.JPG" rel="lightbox"><b>Description:</b>snake</a></div></div><div class="thumb"><a href="./images/IMG_0214.JPG" rel="lightbox">
<img src="./images/IMG_0214.JPG" width="150" height="100" alt="Monkey"></a><div class="caption"><a href="./images/IMG_0214.JPG" rel="lightbox"><b>Description:</b>Monkey</a></div></div><div class="thumb"><a href="./images/IMG_0268.JPG" rel="lightbox">
<img src="./images/IMG_0268.JPG" width="150" height="100" alt="Pelecon"></a><div class="caption"><a href="./images/IMG_0268.JPG" rel="lightbox"><b>Description:</b>Pelecon</a></div></div><div class="thumb"><a href="./images/IMG_0090.JPG" rel="lightbox">
<img src="./images/IMG_0090.JPG" width="150" height="100" alt="Pond view"></a><div class="caption"><a href="./images/IMG_0090.JPG" rel="lightbox"><b>Description:</b>Pond view</a></div></div><div class="thumb"><a href="./images/IMG_0147.JPG" rel="lightbox">
<img src="./images/IMG_0147.JPG" width="150" height="100" alt="temple test"></a><div class="caption"><a href="./images/IMG_0147.JPG" rel="lightbox"><b>Description:</b>temple test</a></div></div><div class="thumb"><a href="./images/IMG_0155.JPG" rel="lightbox">
<img src="./images/IMG_0155.JPG" width="150" height="100" alt="temple test 02"></a><div class="caption"><a href="./images/IMG_0155.JPG" rel="lightbox"><b>Description:</b>temple test 02</a></div></div>
</div> <!-- End Imageswrapper -->
</div> <!-- End Content div -->
</div><!-- End Wrapper -->
<div id="footer">
FOOTER
</div>
</body>
</html>
That implies that there is a file called lightbox.js in the same folder as the current page. The code that goes in the js file is provided on the page you linked to above.
If you want other files to access this js file, it might be better to locate it in a folder (within the root folder) called something like /scripts/. E.g.
Try setting this up and see if the gallery works. I expected that another js file would be needed in addition to this (a javascript library, like jquery) but the example page doesn’t seem to have it, so see how you go.
Hi, i managed to discover that there is a new version of Lightbox, Lightbox 2, http://www.huddletogether.com/projects/lightbox2/ which from what i have read is meant to have better markup language. So i read the instructions and it eventually displayed correctly, but what i wanted to ask is do you know what is used to display the horizontal line as seen in my image? The reason why i ask is because i don’t actually want it there.