Question

FIDDLE：http://jsfiddle.net/2patspw2/3423/

我正在尝试在prettyPhoto（）[inline]内容中激活lightSlider。当模态加载内联内容时，脚本在委派事件之外处于活动状态。但是，内容是空白的;意思是它正在执行该功能。在代表团活动之外，它不起作用。

我尝试过像$(document).on('load', function {});这样的代表团。我尝试了几个其他的委托事件，比如隐藏一个看不见的锚，看看它是否会触发jQuery，但事实并非如此。

我阅读了prettyPhoto的文档，它可以选择在其中运行自定义内容。所以，我试过了，

$("a[rel^='prettyPhoto']").prettyPhoto({
       custom_markup: '<ul class="gal"></ul>',
       changepicturecallback: function(){ slider); }
    });
    function slider(){
    $('.gal').lightSlider({
        gallery: true,
        item: 1,
        loop: true,
        slideMargin: 0,
        thumbItem: 9
    });
    };

然而，它产生了相同的结果。如何在prettyPhoto中运行lightslider，是否有一个我没有尝试或可能尝试加载序列的委托？

这是我目前的标记：

HTML

<a href="#gal" rel="prettyPhoto[inline]">CLICK ME</a>
<ul id="gal">
  <li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
    <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" / class="img"> TEST
  </li>
  <li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
    <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
</ul>

JS

$(document).ready(function() {
  $("a[rel^='prettyPhoto']").prettyPhoto();
});
$(document).on('click', '#gal', function() {
  $('#gal').show();
  $('#gal').lightSlider({
    gallery: true,
    item: 1,
    loop: true,
    slideMargin: 0,
    thumbItem: 9
  });
});

在[内联] prettyPhoto内容模式中播放轮播

0 个答案: