Changing rel Attribute to data-rel in JQuery to Work with HTML5
I am trying to implement a JQuery image gallery written for an XHTML 1.0 doctype to my HTML5 site, the problem is I cannot use custom "rel" attributes with HTML5:
<!-- 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>
I have tried using HTML5 custom "data-rel" atrributes instead of "rel" but what is wrong with my 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>
Answer
I recently faced the same problem and I completely get what you are trying to achieve, but first I will fix the initial code where you use the "rel" attribute"
Please, notice that the "rel" attribute is an option within the jquery.colorbox object:
<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
$("a").colorbox({ rel: "first_gallery", opacity: ".75"}); // this means <a rel="first_gallery" …>
$("a").colorbox({ rel: "second_gallery", opacity: ".75"}); // this means <a rel="second_gallery" …>
});
</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>
As you know, the example above will not validate as HTML5 since the values for "rel" will not validate.
If you want to use "data-rel" your code should look like this:
<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
$("a").colorbox({ rel: $(this).data('rel'), opacity: ".75"});
});
</script>
rel: $(this).data('rel') tells jquery.colorbox to use "data-rel" to wrap up galleries. It's somewhate limited: you cannot use a custom "data-" attribute nor the value in "data-rel".
The code above will work for both of your galleries using "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>
The disadvantage comes if you would like to set different options for different galleries, let's say different opacity, a practical example will be:
<!-- 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>
I hope i did not confuse you with the explanation.