这个Magento商店是在Twitter的Bootstrap上开发的,我们试图实现jbutz的Bootstrap Lightbox而不是Bootstrap模式。加载Bootstrap灯箱在Magento中的产品图像
我们称之为引导灯箱JS与引导的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>
我们称之为引导灯箱CSS与其他引导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>
所有文件都在页面加载时被调用并且可以访问。
在模板/目录/产品/视图/ 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上看到这样的例子。
任何人都可以指出问题吗?
js正在加载yes。错误包括: - 未捕获的TypeError:Object [object Object]没有方法'backdrop'和'Uncaught TypeError:Object [object Object]在控制台中没有方法'hideWithTransition'。灯箱js现在加载后的一切都没有区别。谢谢。 – zigojacko
这个jsfiddle是否适合你?这正是自举灯箱演示在他们的网站上使用的,它不在jsfiddle中工作... http://jsfiddle.net/zigojacko/bLMvn/ – zigojacko