Search code examples
javascriptjquerylightboxprettyphoto

prettyPhoto with valid W3C but no Gallery

I'm using the current code in the header to make prettyPhoto valid by W3C. 

 jQuery(document).ready(function() {
     jQuery("a[data-gal^='prettyPhoto']").prettyPhoto({
     social_tools:false 
     });
 });

Untouched Code and Recommended by prettyPhoto Documentation

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

With the on page code as follows. 

<li><a href="http://cdn.domain.com/1.jpg" data-gal="prettyPhoto[pp_gal]"><img class="lazy" src="http://cdn.domain.com/grey.gif" data-original="http://cdn.domain.com/1.jpg" alt=""></a></li>
<li><a href="http://cdn.domain.com/2.jpg" data-gal="prettyPhoto[pp_gal]"><img class="lazy" src="http://cdn.domain.com/grey.gif" data-original="http://cdn.domain.com/2.jpg" alt=""></a></li>

PS. It's using LazyLoad on the thumb, but thats working fine too.

The images are WORKING in the lightbox by prettyPhoto but they are not opening in Gallery (no next, prev etc, I think its not detecting the other images using the same tag), I suspect it has to do with the [pp_gal] and the code that I've written to get it working on data-gal instead of rel=.

I suspect this is a easy fix for the jQuery Gurus. Thanks

Solution

  • Since the value of your data attraibutes is prettyPhoto[pp_gal] and not plain prettyPhoto we can infer that the prettyPhoto plug-in looks there to get the information it needs to do what you want.

    You need to go into the source of prettyPhoto and make it look at data-gal instead of rel.