Question

我有灯箱图库视图脚本，工作正常。

在我的网站中，我使用ajax脚本调用另一个页面并将其加载到DIV

例如：

ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4){
    var ajaxDisplay = document.getElementById('loadmailfunctions');
    ajaxDisplay.innerHTML = ajaxRequest.responseText; sizeit();
    setVisibility('uploads', 'block'); settotime();
  }
}
ajaxRequest.open("GET", "profile/photos.inc.php", true);
ajaxRequest.send(null);

然后加载我需要的所有照片，但是当我点击照片并使用rel =“lightbox”时它不起作用。

这与父DOM /窗口有什么关系吗？对不起一点菜鸟，但我希望有人能指出我正确的方向？

编辑：

在加载的页面profile / photos.inc.php中，我有这段代码：

echo '<li><a href="',$row['localdirectory'],$row['photo'],'" rel="lightbox" ><img src="',$row['localdirectory'],$row['photo'],'" style="width:110px; height:85px;" alt="" /></a></li>'

但不执行Lighbox查看器脚本。

Answer 1

Lightbox在页面加载后激活，它扫描DOM树搜索具有rel="lightbox"属性的锚点并将onclick事件绑定到它们。当您执行AJAX调用时，新元素将添加到DOM树中，但您必须手动初始化扫描新锚点。

Answer 2

正如dev-null-dweller暗示的那样，Lightbox用法示例仅在页面加载时激活rel="lightbox"链接：

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
    overlayBgColor: '#FFF',
    overlayOpacity: 0.6,
    imageLoading: 'http://example.com/images/loading.gif',
    imageBtnClose: 'http://example.com/images/close.gif',
    imageBtnPrev: 'http://example.com/images/prev.gif',
    imageBtnNext: 'http://example.com/images/next.gif',
    containerResizeSpeed: 350,
    txtImage: 'Imagem',
    txtOf: 'de'
   });
});
</script>

你应该为Ajaxifying之后div神奇地出现的新元素重新运行它：

<script type="text/javascript">
var lightBoxOptions = {
    overlayBgColor: '#FFF',
    overlayOpacity: 0.6,
    imageLoading: 'http://example.com/images/loading.gif',
    imageBtnClose: 'http://example.com/images/close.gif',
    imageBtnPrev: 'http://example.com/images/prev.gif',
    imageBtnNext: 'http://example.com/images/next.gif',
    containerResizeSpeed: 350,
    txtImage: 'Imagem',
    txtOf: 'de'
};

$(function() {
   // Set Lightbox handlers on "static" elements
   $('a[@rel*=lightbox]').lightBox(lightBoxOptions);
});

// then, whereever your AJAX code is:
ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4){
    var ajaxDisplay = document.getElementById('loadmailfunctions');
    ajaxDisplay.innerHTML = ajaxRequest.responseText; sizeit();
    setVisibility('uploads', 'block'); settotime();

    // Set Lightbox handlers on new elements
    $('#loadmailfunctions a[@rel*=lightbox]').lightBox(lightBoxOptions);
  }
}
</script>

顺便说一下，如果你正在使用lightbox jQuery插件（我必须假设你是，因为你没有另外指定），为什么你不使用jQuery作为一个整体？

如果你不使用jQuery插件，那么以类似的方式重复你的事件处理程序设置。

Javascript中的Rel属性

2 个答案: