在 php 中调用 html 时，Jquery lightbox 不起作用

Question

我有一个 jquery 插件，可以在单击时翻转 div 框。当它翻转时，我有一个缩略图，单击该缩略图应该会拉出我的灯箱，但它只会拉出不同页面中的图像。我正在使用 php 数组调用多个 div。我尝试了各种方法来调用图像，但没有任何效果。这是一些代码。

$(function() {
  $('a').lightBox();
});

foreach($sponsors as $image) {
    echo '<div class="sponsor" title="Click to flip">
            <div class="sponsorFlip">
                <img src="img/sponsors/'.$image[0].'.png"  />
            </div>
            <div class="sponsorData">
                <div class="sponsorDescription" id="gallery">
                    <a href="img/sponsors/'.$image[1].'.png"/><img src="img/sponsors/'.$image[0].'.png" /></a>
                 </div>
                 <div class="sponsorURL">
                 </div>
            </div>
        </div>';
}

这就是我的翻转框的脚本。

$(document).ready(function () { /* The following code is executed once the DOM is loaded */
    $('.sponsorFlip').bind("click", function () {
        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
        var elem = $(this);
        // data('flipped') is a flag we set when we flip the element:
        if (elem.data('flipped')) {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:
            elem.revertFlip();
            // Unsetting the flag:
            elem.data('flipped', false)
        }
        else {
            // Using the flip method defined by the plugin:
            elem.flip({
                direction: 'lr',
                speed: 350,
                onBefore: function () {
                    // Insert the contents of the .sponsorData div (hidden from view with display:none)
                    // into the clicked .sponsorFlip div before the flipping animation starts:
                    elem.html(elem.siblings('.sponsorData').html());
                }
            });
            // Setting the flag:
            elem.data('flipped', true);
        }
    });
});

$(".sponsorFlip").bind("click", function (e, block) {
    if (block) return false;
    $(".sponsorFlip").not($(this)).each(function () {
        if ($(this).data("flipped")) $(this).trigger("click", [true]);
    });
});

Answer 1

我不确定您使用的是哪个灯箱插件，但听起来它并没有阻止默认标签操作的触发。您也许可以通过添加以下内容来修复它：

$('a').click(function(evt){
    evt.preventDefault();
});

Answer 2

我通过将其放入我的 js 文件中来翻转我的内容来使其工作。

$(document).find('#leftcontent a').lightBox({fixedNavigation:true});