JavaScript 中的 Rel 属性

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>'

但不执行 Lightbox 查看器脚本。

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>

您应该为神奇地出现在 div 中的新元素重新运行此示例 after Ajaxifying：

<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 插件，则以类似的方式重复您的事件处理程序设置。