Loading Bootstrap Lightbox for product images in Magento

Question

This Magento store is developed on Twitter's Bootstrap and we're trying to implement jbutz's Bootstrap Lightbox instead of the Bootstrap Modal.

We've called the Bootstrap Lightbox js with the rest of Bootstrap's js like so:-

    <script src="<?php echo $this->getSkinUrl('js/jquery.js'); ?>"></script>

    <script src="<?php echo $this->getSkinUrl('js/google-code-prettify/prettify.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-transition.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-alert.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-modal.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-lightbox.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-dropdown.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-scrollspy.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-tab.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-tooltip.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-popover.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-button.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-collapse.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-carousel.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/bootstrap-typeahead.js'); ?>"></script>
    <script src="<?php echo $this->getSkinUrl('js/application.js'); ?>"></script>

We've called the Bootstrap Lightbox css with the other Bootstrap css like so:-

<action method="addCss"><stylesheet>css/bootstrap.css</stylesheet></action>
<action method="addCss"><stylesheet>css/bootstrap-responsive.css</stylesheet></action>
<action method="addCss"><stylesheet>css/bootstrap-lightbox.css</stylesheet></action>

All files are being called on page load and are accessible.

In template/catalog/product/view/media.phtml, we're, using the following markup:-

<a data-toggle="lightbox" href="#myGallery_<?php echo $_product->getId()?>" class="main-image">
    <?php echo $_helper->productAttribute($_product, $_img, 'image'); ?>
</a>

<div class="lightbox hide fade" id="myGallery_<?php echo $_product->getId()?>" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="lightbox-header">
        <a class="close" data-dismiss="lightbox">×</a>
        <h3><?php echo $_product->getName()?></h3>
    </div>
    <div class="lightbox-content">
        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(600)?>" alt="<?php echo $this->htmlEscape($this->getImageLabel())?>" title="<?php echo $this->htmlEscape($this->getImageLabel())?>" />
    </div>
    <div class="lightbox-footer">
        <a href="#" class="btn" data-dismiss="lightbox">Close</a>
    </div>
</div>

I can't for the life of me however, get the lightbox to trigger when the product image is clicked, nothing happens at all. Even implementing the exact markup from the demo into the Magento template file still doesn't work - it's as if the js is being called/triggered correctly. You can see an example of this not working on jsfiddle.

Could anyone point out the issue please?

Answer 1

First of all your jsfiddle link does not seem to work, further more taking a look at http://jbutz.github.io/bootstrap-lightbox/ gives me an idea how lightbox works.

You have to either trigger lightbox using data attribute as inline coding in your link or via javascript.

Magento has a built in lightbox using prototype so try to use your console to have a look if your JS file is properly loaded and if there are any errors or conflicts.

Also it seems that lightbox depends on bootstrap.min.js Try to load this script before loading your lightbox script.

Answer 2

Go to app/frontend/your_theme/default/layout/page.xml (or in some cases app/frontend/default/your_theme/layout/page.xml)

comment out these lines (around line 38)

<action method="addJs"><script>prototype/prototype.js</script></action>
 <action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
 <action method="addJs"><script>scriptaculous/builder.js</script></action>
 <action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
 <action method="addJs"><script>varien/menu.js</script></action>
 <action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>

Do this.. If after this your lightbox works perfectly and "Add to Cart" does not, then there's nothing wrong with your code.. Its the prototype (all of them are based on prototype.js) conflicting with bootstrap's jquery.