3

XHTML 1.0 doctype 用に記述された JQuery 画像ギャラリーを HTML5 サイトに実装しようとしています。問題は、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>

「rel」の代わりに HTML5 カスタム「data-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>

ご存知のように、「rel」の値が検証されないため、上記の例は HTML5 として検証されません。

「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 に答える