lightbox加载内容ajax后重新加载

时间:2013-07-01 03:41:28

标签: jquery ajax lightbox reload zooming

http://serennz.sakura.ne.jp/toybox/lightbox/

如何让脚本处理由ajax加载的新元素?

此代码有效,但加载后无法缩放。 ; /

var lightbox = new Lightbox({
        loadingimg:'resource/loading.gif',
        expandimg:'resource/expand.gif',
        shrinkimg:'resource/shrink.gif',
        blankimg:'resource/blank.gif',
        previmg:'resource/prev.gif',
        nextimg:'resource/next.gif',
        closeimg:'resource/close.gif',
        /*effectimg:'resource/zzoop.gif',*/
        effectpos:{x:-40,y:-20},
        effectclass:'effectable',
        resizable:true,
        animation:true
});

1 个答案:

答案 0 :(得分:0)

假设你的Ajax工作正常,你成功获得了一些HTML数据。它会是这样的:

$.get('ajax/more_pictures.html', function(data) {
  displayNewImages(data);
});

现在,您将新图像添加到某个容器中,并为其指定“lightbox”属性:

function displayNewImages(images){
  $("#images_container").html(images);
  $("#images_container").find("a").attr("rel" , "lightbox").addClass("effectable");
}

然后创建Lightbox实例:

var lightbox = new Lightbox({ 
  // all the rest
});

就是这样,只需将rel="lightbox"class="effectable"属性添加到包裹图片的a元素,就完成了!