View Full Version : Lightbox 2 JS Coding Issue

05-22-2009, 03:18 AM
Hey, first off sorry if I posted this in the wrong forum. I wasn't sure whether to post it here or the JS forum. Mods, please move it if I've got it wrong xD.

I've been using Lightbox 2 (http://www.huddletogether.com/projects/lightbox2/) to help with the coding of my interactive website for my school assignment. For some reason, the ability to group my images isn't working. I figure it might be because of some sort of HTML error I've made while coding. A live preview of the site can be viewed here (http://ericaftw.com/history). Below is the HTML being used for the site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Economy :: The Game</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" />
<!-- Original: Randy Bennett (rbennett@thezone.net) -->
<!-- Web Site: http://home.thezone.net/~rbennett/sitemap.htm -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
return false;
else {
ob = event.srcElement.parentElement.style;
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
function MU() {
ob = null;

if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
// End -->
<body style="background-color: #5C0202;">
<div id="game" align="center">
<img src="images/history.gif" alt="" border="0" usemap="#game" />
<map name="game">
<area shape="rect" coords="646,127,756,218" href="#" alt="" />
<area shape="rect" coords="647,302,745,389" href="#" alt="" />
<area shape="rect" coords="569,469,655,560" href="#" alt="" />
<area shape="rect" coords="398,387,481,473" href="#" alt="" />
<area shape="rect" coords="225,298,315,388" href="#" alt="" />
<area shape="rect" coords="141,128,228,219" href="#" alt="" />
<area shape="rect" coords="55,302,140,386" href="images/questions/q1.png" rel="lightbox[one]" alt="" />
<div id="1" style="position:absolute;left:50;top:500;">
<img src="images/piece1.png" name="1" alt="" />
<div id="2" style="position:absolute;left:70;top:500;">
<img src="images/piece2.png" name="2" alt="" />

<div id="hidden" style="visibility: hidden;">
<img src="images/questions/a1.png" rel="lightbox[one]" alt="" />

If any other code is needed, please specify.

Any help is appreciated :)

05-22-2009, 06:34 AM
The rel attribute doesn't go on the images. I suggest you look on the lightbox 2 page carefully and figure out what you did wrong. Hint: You have no links.

Also lightbox isn't setup to work with image maps.