加載Bootstrap燈箱在Magento中的產品圖像

Question

這個Magento商店是在Twitter的Bootstrap上開發的，我們試圖實現jbutz的Bootstrap Lightbox而不是Bootstrap模式。

我們稱之爲引導燈箱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上看到這樣的例子。

任何人都可以指出問題嗎？

Answer 1

首先你的jsfiddle鏈接似乎不工作，進一步看看http://jbutz.github.io/bootstrap-lightbox/給了我一個想法如何運作燈箱。

您必須觸發燈箱使用數據屬性作爲內聯編碼在您的鏈接或通過JavaScript。

Magento內置燈箱使用原型，所以試着用你的控制檯來看看你的JS文件是否正確加載，如果有任何錯誤或衝突。

此外，它似乎是lightbox取決於bootstrap.min.js 嘗試加載此腳本加載您的燈箱腳本之前。

Answer 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）與引導程序的jquery衝突。