Javascript 在Magento中加载产品映像的引导灯箱

这个Magento商店是在Twitter的Bootstrap上开发的，我们试图实现jbutz而不是Bootstrap模式

我们将Bootstrap的其余js称为Lightbox js，如下所示：-

    <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>

<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>

---

首先，您的JSFIDLE链接似乎不起作用，进一步了解lightbox的工作原理

您必须使用数据属性作为链接中的内联编码或通过javascript触发lightbox

Magento有一个使用prototype的内置lightbox，因此请尝试使用您的控制台查看JS文件是否正确加载以及是否存在任何错误或冲突

另外，lightbox似乎依赖于bootstrap.min.js
在加载lightbox脚本之前，请尝试加载此脚本。
转到
app/frontend/your_-theme/default/layout/page.xml
（或在某些情况下
app/frontend/default/your_-theme/layout/page.xml
）

注释掉这些行（第38行周围）

prototype/prototype.js
lib/ccard.js
prototype/validation.js
scriptaculous/builder.js
scriptaculous/effects.js
scriptaculous/dragdrop.js
scriptaculous/controls.js
scriptaculous/slider.js
varien/js.js
varien/form.js
varien/menu.js
mage/translate.js
mage/cookies.js

这样做。。如果在此之后，您的lightbox工作正常，而“添加到购物车”没有，那么您的代码就没有问题。。它的
prototype
（它们都基于prototype.js）与bootstrap的jquery冲突。
js正在加载yes。错误包括：-
uncaughttypeerror:Object[Object]没有方法“background”
和
uncaughttypeerror:Object[Object]没有方法“hideWithTransition”
。Lightbox js现在加载到最后，其他一切都没有区别。谢谢。这个JSFIDLE对你有用吗？这正是bootstrap lightbox演示在他们的网站上使用的，它在JSFIDLE中也不起作用。。。
<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>

<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>