0

我正在使用 Wordpress，在我的主题顶部，这些脚本按此顺序排列。jquery.js- cycle2.js- header_scripts.js-lightbox.js

我想要做的是链接灯箱和cycle2插件，所以当你按下灯箱上的next / prev时，幻灯片将在cycle2上改变。这段代码就是这样做的。

$('body').on('lightboxNext', function() {
    var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
    var index = $(slideshow).data("cycle.opts").currSlide;
    if (index > $(slideshow).data("cycle.opts").slideCount) {
        return;
    }
    $(slideshow).cycle("goto", index + 1);
});

$('body').on('lightboxPrev', function() {
    var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
    var index = $(slideshow).data("cycle.opts").currSlide;
    $(slideshow).cycle("goto", index - 1);
});

笔记。lightboxNext / Prev 在灯箱脚本中添加如下。

this.$lightbox.find('.lb-prev').on('click', function() {
  $('body').trigger('lightboxPrev');
  // ...
});

如果将此代码放在 Wordpress 循环中，它将起作用并被执行。但是，代码不能留在那里，因为如果有多个帖子，则侦听器会被触发多次而不是一次。

我尝试将我的代码移动到 header_scripts.js 中。代码不执行。以下代码已添加到 header_scripts.js

$(document).ready(function() {

    console.log('document ready');

    $('body').on('click', function() {
        console.log('body clicked');
    })

    $('body').on('lightboxNext', function() {
        var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
        var index = $(slideshow).data("cycle.opts").currSlide;
        if (index > $(slideshow).data("cycle.opts").slideCount) {
            return;
        }
        $(slideshow).cycle("goto", index + 1);
    });

    $('body').on('lightboxPrev', function() {
        var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
        var index = $(slideshow).data("cycle.opts").currSlide;
        $(slideshow).cycle("goto", index - 1);
    });
});

加载页面并单击正文，我在控制台中得到以下信息：

准备好文件

身体被点击

然而 lightboxNext/Prev 监听器不会触发。为什么？

我还尝试将此代码添加到页面底部。也不行。由于某种原因，该代码仅在 Wordpress 循环中有效。非常感激任何的帮助。

4

0 回答 0