有没有什么办法可以在Magento上调试Lightbox2 1411

Question

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

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

任何线索？

谢谢

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>