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

发布于 2024-09-28 01:58:39 字数 2381 浏览 8 评论 0原文

我有一个 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]);
    });
});

I have jquery plugin that flips the div box when it's clicked. When it's flipped over I have a thumbnail that when clicked should pull up my lightbox but it just pulls up the image in a different page. I'm calling multiple div using php arrays. I have tried every way to call the images but nothing works. Here is some of the code.

$(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>';
}

And this is what the script looks like for my flipping box.

$(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]);
    });
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

复古式 2024-10-05 01:58:39

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

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

I'm not sure which lightbox plugin you're using, but it sounds like it's not preventing the default a tag action from firing. You may be able to fix it by adding:

$('a').click(function(evt){
    evt.preventDefault();
});
末蓝 2024-10-05 01:58:39

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

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

I got it to work by putting this inside my js file that flips my content.

$(document).find('#leftcontent a').lightBox({fixedNavigation:true});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文