在 Magento 中为产品图片加载 Bootstrap Lightbox答案

【问题标题】：Loading Bootstrap Lightbox for product images in Magento在 Magento 中为产品图片加载 Bootstrap Lightbox
【发布时间】：2013-07-04 08:31:15
【问题描述】：

这个 Magento 商店是在 Twitter 的 Bootstrap 上开发的，我们正在尝试实现 jbutz 的 Bootstrap Lightbox 而不是 Bootstrap Modal。

我们将 Bootstrap Lightbox js 与 Bootstrap 的其余 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>

我们将 Bootstrap Lightbox css 与其他 Bootstrap css 一起调用，如下所示：-

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

所有文件都在页面加载时被调用并且可以访问。

在 template/catalog/product/view/media.phtml 中，我们使用以下标记：-

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

但是，我一辈子都做不到，当点击产品图片时触发灯箱，什么也没有发生。即使将演示中的确切标记实现到 Magento 模板文件中仍然不起作用 - 就好像 js 被正确调用/触发一样。您可以看到一个在 jsfiddle 上不起作用的示例。

谁能指出问题？

【问题讨论】：

标签： javascript magento twitter-bootstrap magento-1.7

【解决方案1】：

首先，您的 jsfiddle 链接似乎不起作用，进一步查看 http://jbutz.github.io/bootstrap-lightbox/ 让我了解灯箱的工作原理。

您必须使用 data 属性作为链接中的内联编码或通过 javascript 触发灯箱。

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

似乎灯箱依赖于 bootstrap.min.js 在加载您的灯箱脚本之前尝试加载此脚本。

【讨论】：

js 正在加载是的。错误包括：- Uncaught TypeError: Object [object Object] has no method 'backdrop' 和 Uncaught TypeError: Object [object Object] has no method 'hideWithTransition' 在控制台中。 Lightbox js 在其他一切都没有区别之后现在最后加载。谢谢。
这个 jsfiddle 对你有用吗？这正是他们网站上的引导灯箱演示所使用的，它也不能在 jsfiddle 中工作......jsfiddle.net/zigojacko/bLMvn

【解决方案2】：

转到app/frontend/your_theme/default/layout/page.xml（或在某些情况下app/frontend/default/your_theme/layout/page.xml）

注释掉这些行（大约第 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>

执行此操作.. 如果在此之后您的灯箱可以正常工作而“添加到购物车”没有，那么您的代码没有任何问题.. 它的 prototype（它们都基于prototype.js）与bootstrap 的 jquery。

【讨论】：