javascript - 有什么方法可以在 Magento 1411 上调试 Lightbox2

Question

我正在尝试在 view.phtml 上使用 Lightbox2。我包含了“lightbox.js”和“lightbox.css”。我正在使用 jQuery 1.8.2。 jQuery 在“lightbox.js”之前被调用。当我查看主页代码时，我可以看到这些文件已包含在内，我可以下载“lightbox.js”和“lightbox.css”代码。

当我点击灯箱链接时，它会在新页面中显示第一张图片，而不是在弹出窗口中弹出图片。

有什么线索吗？

谢谢

Answer 1

我使用了下面的代码

        <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
        <a class="example-image-link"  visibility: hidden href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
        <a class="example-image-link" visibility: hidden href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
        <a class="example-image-link" visibility: hidden href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>

首页标题

<link rel="stylesheet" type="text/css" href="http://staging.lapetiteflute.com/js/calendar/calendar-win2k-1.css" />
<link rel="stylesheet" type="text/css" href="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/css/styles-th-lpf.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/css/adpopup-pro.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/css/lightbox.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://staging.lapetiteflute.com/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/default/css/print.css" media="print" />
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/varien/js.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/varien/form.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/varien/menu.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/mage/translate.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/varien/product.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/calendar/calendar.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/js/varien/weee.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/js/jquery.1.8.2.noConflict.min.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/js/jquery.sliderTE-min.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/js/adpopup-pro.min.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/js/lightbox.js"></script>
<script type="text/javascript" src="http://staging.lapetiteflute.com/skin/frontend/interface_lpf_fr/theme_lpf/js/general.js"></script>