Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Thanked 0 Times in 0 Posts

    Conflict between lightbox and jquery

    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


  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    London, England
    Thanked 2,573 Times in 2,551 Posts
    Quote Originally Posted by petenaylor View Post
    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.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts