Question

我使用了Reference link中的代码，允许用户根据WP内置的库功能创建幻灯片。我发现的问题是，当用户在页面上创建多个幻灯片时，两者之间会相互冲突。

function create_slideshow() {

// Remove the HTML tags generated in the gallery.
jQuery('.single-format-gallery style').remove();
jQuery('.gallery p').remove();

// Wrap the gallery.
jQuery('.gallery').wrap('<div id="divSlideshow" class="box_slideshow gallery-wrap">');

// Add the slideshow controller.
jQuery('.gallery-wrap').append('<div id="divSlideshow_Nav" class="box_nav"><span id="jqc-pages"></span></div>');

// Add the controls.
//  jQuery('#slideshow-controller').prepend('<button class="dir-button dir-button-l" id="jqc-prev" href="#">Prev</button>');
//  jQuery('#slideshow-controller').append('<button class="dir-button dir-button-r" id="jqc-next" href="#">Next</button>');

jQuery('.gallery').cycle({
    fx                : 'fade',
    speed             : 1000,
    timeout           : 3000,
    cleartypeNoBg     : true,
    activePagerClass  : 'activeSlide',
    pager             : '#jqc-pages',
    prev              : '#jqc-prev',
    next              : '#jqc-next',
    pause             : true,
    pagerAnchorBuilder: function (index,elem) {
        return '<button class="" id="jqc-button-' + index + '" value="' + index + '"><span>' + (index+1) + '</span></button>';
    }
});
}

jQuery(document).ready(function() {
jQuery.noConflict();
create_slideshow();
});

Answer 1

我认为如果你改变所有用ID设置的元素而不是用类来设置，那就应该解决冲突，因为ID选择器应该用来指定一个唯一的元素。

jQuery('.gallery-wrap').each(function(){
  var control = '';
  $(this).append(control);
});

将var control设置为要附加的控制器的位置

Answer 2

我必须完全重写js，因为按钮没有进入正确的div并且每个div都没有分配自己的id。

function create slideshow（）{

// Remove the HTML tags generated in the gallery.
jQuery('.single-format-gallery style').remove();
jQuery('.gallery p').remove();

// Wrap the gallery.
jQuery('.gallery').each(function(i,elm){
    jQuery(this).wrap('<div id="divSlideshow-'+i+'" class="box_slideshow gallery-wrap">').after('<div id="divSlideshow_Nav-'+i+'" class="box_nav"><span class="jqc-pages"></span></div>');

    jQuery(this).cycle({
        fx                : 'fade',
        speed             : 1000,
        timeout           : 3000,
        cleartypeNoBg     : true,
        activePagerClass  : 'activeSlide',
        pager             : '#divSlideshow_Nav-'+i+' .jqc-pages',
        prev              : '#divSlideshow_Nav-'+i+' #jqc-prev',
        next              : '#divSlideshow_Nav-'+i+' #jqc-next',
        pause             : true,
        pagerAnchorBuilder: function (index,elem) {
            return '<button class="" id="jqc-button-' + index + '" value="' + index + '"><span>' + (index+1) + '</span></button>';
        }
    });

}); 

}
jQuery(document).ready(function() {
jQuery.noConflict();
create_slideshow();
});

WordPress将图库转换为幻灯片 - 每页多个幻灯片

2 个答案: