Jquery colorbox within a jquery tab, results in colorbox failing

JavaScript
1

Hello there,

I’m building a shop using opencart, and I’m trying to move the code for jquery colorbox into a jquery tab, but as soon as I place it there it stops working. Outside of the tabs it works fine.

Here’ the code opencart uses to display the colorbox on a page:

<div class="product-info">

        <div class="left">

            <div class="image"><a href="http://url/image/cache/data/img/product-492x654.jpg" title="product title" class="colorbox" rel="colorbox"><img src="http://url/image/cache/data/img/product-401x533.jpg" title="product title" alt="product alt tag" id="image" /></a></div>

</div></div></div>

I’m using standard jquery ui tabs code using a ul for the main tabs and divs for the content.

I assume this is the actual jquery scripts clashing, but I know nothing about these things, so if anyone can help me to get this working it’d be most appreciated.

Thank you,
Dan

2

Sure thing. Show us what you’re doing that’s not working well, and we’ll try to get it working for you.

3

Thanks paul - here’s the code that opencart from the php within the tab I’m talking about:

  <div id="tabs" class="htabs">

    <ul>

        <li><a href="#tab-introduction">Introduction</a></li>

     <li><a href="#tab-why-organic-whey">Why</a></li>

    <li><a href="#tab-nutritional-info">Nutritional Info</a></li>
    <li><a href="#tab-review">Reviews (0)</a></li>
</ul>

  <div id="tab-introduction" class="tab-content">

<section>

 <h2>Product</h2>
 <p>

	Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>

<p>

	Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia</p>

<div class="price">Price:                £22.99                <br />
            </div>

                  <div class="cart">

        <div>Qty:          <input type="text" name="quantity" size="2" value="1" />

          <input type="hidden" name="product_id" size="2" value="42" />

          &nbsp;<input type="button" value="Add to Cart" id="button-cart" class="button" />

          </div>
 </div>

      </section>

<section>

 <div class="product-info">

        <div class="left">

            <div class="image"><a href="http://127.0.0.1:4001/1521/image/cache/data/img/packaging_no_bubbles-492x654.jpg" title="Product" class="colorbox" rel="colorbox"><img src="http://127.0.0.1:4001/1521/image/cache/data/img/packaging_no_bubbles-401x533.jpg" title="Product" alt="Product" id="image" /></a></div>

                </div>

    </div></section></div>


  <div id="tab-why" class="tab-content">

next tab.....

And this is the head of the page, so you can see which jquery files are involved:

<!doctype html>

<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->

<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->

<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->

<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->

<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>

<meta charset="utf-8">

<title>Product</title>

<base href="http://127.0.0.1:4001/1521/" />

<link href="http://127.0.0.1:4001/1521/image/data/cart.png" rel="icon" />

<link href="http://127.0.0.1:4001/1521/Product" rel="canonical" />

<link rel="stylesheet" type="text/css" href="catalog/view/theme/opc/css/style.css" />

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/colorbox/colorbox.css" media="screen" />

<!-- http://t.co/dKP3o1e -->

<meta name="HandheldFriendly" content="True">

<meta name="MobileOptimized" content="320">

<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0">

<!-- For all browsers -->

<link rel="stylesheet" href="catalog/view/theme/opc/css/style.css">

<link rel="stylesheet" media="print" href="catalog/view/theme/opc/css/print.css">

<!-- For progressively larger displays -->

<link rel="stylesheet" media="only screen and (min-width: 480px)" href="catalog/view/theme/opc/css/480.css">

<link rel="stylesheet" media="only screen and (min-width: 540px)" href="catalog/view/theme/opc/css/540.css">

<link rel="stylesheet" media="only screen and (min-width: 680px)" href="catalog/view/theme/opc/css/680.css">

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="catalog/view/theme/opc/css/768.css">

<link rel="stylesheet" media="only screen and (min-width: 992px)" href="catalog/view/theme/opc/css/992.css">

<!-- For Retina displays -->

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)" href="catalog/view/theme/opc/css/2x.css">



<!--[if (lt IE 9) & (!IEMobile)]>

<script src="js/libs/selectivizr-min.js"></script>

<link rel="stylesheet" href="catalog/view/theme/opc/css/480.css">

<link rel="stylesheet" href="catalog/view/theme/opc/css/540.css">

<link rel="stylesheet" href="catalog/view/theme/opc/css/680.css">

<link rel="stylesheet" href="catalog/view/theme/opc/css/768.css">

<link rel="stylesheet" href="catalog/view/theme/opc/css/992.css">

<![endif]-->

<!-- JavaScript -->

<script src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>

<script src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>

<script src="catalog/view/javascript/jquery/ui/external/jquery.cookie.js"></script>

<script src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>

<script src="catalog/view/javascript/jquery/tabs.js"></script>

<script src="catalog/view/javascript/common.js"></script>

<script src="catalog/view/javascript/plugins.js"></script>

<script src="catalog/view/javascript/script.js"></script>

<script src="catalog/view/javascript/mylibs/helper.js"></script>

<script src="catalog/view/javascript/libs/modernizr-2.0.6.min.js"></script>



<!-- For iPhone 4 -->

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">

<!-- For iPad 1-->

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">

<!-- For iPhone 3G, iPod Touch and Android -->

<link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">

<!-- For Nokia -->

<link rel="shortcut icon" href="img/l/apple-touch-icon.png">

<!-- For everything else -->

<link rel="shortcut icon" href="/favicon.ico">



<!--iOS. Delete if not required -->

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<link rel="apple-touch-startup-image" href="img/splash.png">



<!--Microsoft. Delete if not required -->

<meta http-equiv="cleartype" content="on">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--[if lt IE 7 ]><script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script><script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script><![endif]-->



<!-- http://t.co/y1jPVnT -->

<link rel="canonical" href="/">

</head>

And this is an opencart product demo page with a product image using the colorbox, as I’d like it to work with one of the tabs (which are also on this page):
http://demo.opencart.com/index.php?route=product/product&path=33&product_id=30

Thanks again Paul - I appreciate your help with this!

Dan

4

I’ve just used the error console in chrome while loading the webpage, and the following error comes up:

Uncaught ReferenceError: display is not defined (line 174)

Here’s where this error message is related to

<script type="text/javascript">
                    $mjs(document).je1('domready', function() {
                      var olddisplay = display; [COLOR="#FF0000"](this is line 174)[/COLOR]
                      window.display = function (view) {
                        MagicZoomPlus.stop();
                        olddisplay(view);
                        MagicZoomPlus.start();
                      }

I don’t know if this is of any help…

Thanks,
Dan

5

Great - I’ve finally figured it out! The <div id=“tabs” class=“htabs”> needed to be closed after the </ul> - it now works.