3

我正在尝试为我的 HTML5 站点实现为 XHTML 1.0 doctype 编写的 JQuery 图像库,问题是我不能在 HTML5 中使用自定义“rel”属性:

<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
    $("a[rel='first_gallery']").colorbox({opacity: ".75"});
    $("a[rel='second_gallery']").colorbox({opacity: ".75"});
});
</script>

<!-- In <body> tag -->
<a href="first_gallery/1.jpg" title="Image 1" rel="first_gallery"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>

<a href="second_gallery/2.jpg" title="Image 2" rel="second_gallery"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>

我尝试使用 HTML5 自定义“data-rel”属性而不是“rel”,但我的 JQuery 有什么问题?

<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
    $("a[data-rel='first_gallery']").colorbox({opacity: ".75"});
    $("a[data-rel='second_gallery']").colorbox({opacity: ".75"});
});
</script>

<!-- In <body> tag -->
<a href="first_gallery/1.jpg" title="Image 1" data-rel="first_gallery"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>

<a href="second_gallery/2.jpg" title="Image 2" data-rel="second_gallery"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>
4

2 回答 2

2

我最近遇到了同样的问题,我完全得到了你想要实现的目标,但首先我将修复你使用“rel”属性的初始代码”

请注意,“rel”属性是 jquery.colorbox 对象中的一个选项:

<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
    $("a").colorbox({ rel: "first_gallery", opacity: ".75"}); // this means <a rel="first_gallery" …&gt;
    $("a").colorbox({ rel: "second_gallery", opacity: ".75"}); // this means <a rel="second_gallery" …&gt;
});
</script>

<!-- In <body> tag -->
<a rel="first_gallery" href="first_gallery/1.jpg" title="Image 1"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a rel="second_gallery" href="second_gallery/2.jpg" title="Image 2"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>

如您所知,上面的示例不会验证为 HTML5,因为“rel”的值不会验证。

如果您想使用“data-rel”,您的代码应如下所示:

<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
    $("a").colorbox({ rel: $(this).data('rel'), opacity: ".75"});
});
</script>

rel: $(this).data('rel')告诉 jquery.colorbox 使用“data-rel”来包装画廊。它有点有限:您不能使用自定义的“data-”属性,也不能使用“data-rel”中的值。

上面的代码将适用于您使用“data-rel”的两个画廊:

<!-- In <body> tag -->
<a data-rel="first_gallery" href="first_gallery/1.jpg" title="Image 1"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a data-rel="second_gallery" href="second_gallery/2.jpg" title="Image 2"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>

如果您想为不同的画廊设置不同的选项,那么缺点就来了,比如说不同的不透明度,一个实际的例子是:

<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
    $("a.gallery1").colorbox({ rel: $(this).data('rel'), opacity: ".75"});
    $("a.gallery2").colorbox({ rel: $(this).data('rel'), opacity: ".80"});
});
</script>

<!-- In <body> tag -->
<a class="gallery1" data-rel="first_gallery" href="first_gallery/1.jpg" title="Image 1"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a class="gallery2" data-rel="second_gallery" href="second_gallery/2.jpg" title="Image 2"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>

我希望我没有混淆你的解释。

于 2013-03-12T10:37:57.760 回答
0

注意它的错误。

它工作得很好。

在这里测试它:http: //jsfiddle.net/RASG/NCrmb/

如果您遇到问题(您没有说正在发生的事情或应该发生的事情),则可能是其他问题。

于 2012-10-14T00:33:47.893 回答