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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum