0

この Magento ストアは Twitter の Bootstrap で開発されており、Bootstrap Modal の代わりにjbutz のBootstrap Lightboxを実装しようとしています。

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 CSS とともに Bootstrap Lightbox 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で機能しない例を見ることができます。

誰でも問題を指摘できますか？

4

2 に答える 2

0

まず、jsfiddle リンクが機能していないようです。さらにhttp://jbutz.github.io/bootstrap-lightbox/を見ると、ライトボックスがどのように機能するかがわかります。

リンクのインラインコーディングとしてデータ属性を使用するか、javascript を介してライトボックスをトリガーする必要があります。

Magento にはプロトタイプを使用したライトボックスが組み込まれているため、コンソールを使用して、JS ファイルが適切にロードされているかどうか、エラーや競合がないかどうかを確認してください。

また、ライトボックスは bootstrap.min.js に依存しているようです。ライトボックス スクリプトをロードする前に、このスクリプトをロードしてみてください。

于 2013-07-04T09:12:02.197 に答える