View Full Version : Conflict between lightbox and jquery

12-22-2010, 05:04 PM
Hi all

I have a page on a website I am creating that has both a lightbox rel link and a quick calculator to work out a size of a product.

Here are the links to the java files I am using:

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/jquery.lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.lightbox.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/sandstone.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>

Here is the actual lightbox link:

<a href="testimage.jpg" rel="lightbox" ><img src="testimage.jpg" >

And finally the calculator:

<form method="post" action="">
<table width="220" border="0" cellpadding="2" cellspacing="0">
<tr align="left"><td width="87" height="30" class="meter-calc-text">Width (m)</td>
<td width="117" height="30" align="left">
<input name="width" type="text" id="calc-width" size="6" /></td>
<tr align="left"><td height="30" class="meter-calc-text">Length (m)</td>
<td height="30" align="left"><input name="length" type="text" id="calc-length" size="6" /></td>
<tr align="left"><td height="40" colspan="2">
<select name="packcontents" class="meter-calc-dropdown" id="calc-packcontents" onchange="updateProduct(this.options[this.selectedIndex].id)" style="width:140px;">
<option value="0" selected class="meter-calc-text">Product Select</option>
<option value="1" selected class="meter-calc-text">1</option>
<option value="2" selected class="meter-calc-text">2</option>
<input type="button" name="go" value="Go" id="calc-trigger" class="calc-go" />
<table width="220" border="0" cellpadding="2" cellspacing="0">
<td width="83" height="30" class="meter-calc-text">You Require:</td>
<td width="121" height="30" align="left" class="product-cell-info-table-text">
<input name="meters" type="text" class="small" id="calc-meters" value="" size="5" />
<span class="meter-calc-text">m2</span>
<td height="30" class="meter-calc-text">&nbsp;</td>
<td height="30" align="left" class="product-cell-info-table-text">
<input name="packs" type="text" class="small" id="calc-packs" value="" size="5" />
<span class="meter-calc-text">Packs</span>
<input type="hidden" name="productid" id="productid" value="">
<div id="addit" style="display:none">
<a name="addit" class="meter-calc-text" onclick="location.href='basket.php?action=add&id='+$('#productid').val()+'&quantity='+$('#calc-packs').val()+'&return=http://www.cq-designs.co.uk/clientarea/sandstonecentre/clientarea/sandstonecentre/product.php?category=2&type=&colour=1'">Add To Cart</a>

The problem I am having is that they both don't work together. If I comment out the lightbox javascript the calcukator works but not the lightbox and Vice Versa!

Please help


Philip M
12-22-2010, 06:15 PM
Here are the links to the java files I am using:

Java and Javascript are entirely different programming languages, in spite of the confusingly similar names.

This problem has arisen several times before. Use the search feature of this forum - to discover that no satisfactory solution has yet been found.

You are attempting to use several different Javascript frameworks which is a sure-fire recipe for problems.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.