Javascript中的Rel属性

我有lightbox gallery视图脚本，工作正常

在我的站点中，我使用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>'

echo'
'

---

但不执行Lighbox查看器脚本。

Lightbox在页面加载后激活，它扫描DOM树，使用

rel=“Lightbox”

属性搜索锚，并将

onclick

事件绑定到锚。当您执行AJAX调用时，会向DOM树中添加新元素，但您必须手动初始化扫描新锚

正如开发人员所暗示的，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>

顺便说一句，如果您使用的是lightbox jQuery插件（我必须假设您是，因为您没有另外指定），那么为什么不整体使用jQuery呢

---

如果您没有使用jQuery插件，请以类似的方式重复事件处理程序设置。

什么是“它不工作”？这是非常模糊的。代码中的任何内容都与HTML的

rel

属性无关。在加载的页面配置文件/photos.inc.php中，我在加载的页面配置文件/photos.inc.php中有此代码，我有这段代码echo'

，但没有执行Lighbox查看器脚本我希望当点击链接时，它会在lightbox gallery视图中打开较大的图像，但它不会工作，有什么想法吗？谢谢，我明白你的意思了，那么我如何初始化新锚的扫描呢？我是否在Ajax调用的末尾添加了一个方法？您应该在

ajaxDisplay.innerHTML=ajaxRequest.responseText但我不知道您使用的是哪种lightbox库，因此我无法提供确切的代码。非常感谢，是的，我正在使用lightbox jQuery插件，我会尝试一下。谢谢你的帮助：）a[@rel*=lightbox]

中的

@

是什么意思？@Rocket:坦白说，我不知道。没有提到它，但似乎对它很满意，这是一个被所有帐户广泛使用的插件。因此，我将把特定的选择器留给他们使用。@Rocket:可能与（尽管这似乎意味着jQuery灯箱不再工作）：“注意：在jQuery 1.3中，删除了[@attr]样式选择器（它们以前在jQuery 1.2中被弃用）。只需从选择器中删除“@”符号，即可使它们再次工作。”不过，我还是让插件作者来决定。我只是扩展了它们的用法示例，而不是重写它。@Wayne:您能提供一个您正在使用的实际插件的引用吗？你从来没说过。

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