具有有效W3C但没有图库的prettyPhoto

Question

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

Answer 1

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 .

Answer 2

After investigating it seems that prettyPhoto have improved their code recently and adopting this change was straight forward since they now Hook the 'REL' attribute and changing one value fixes all. Whoop Whoop!

Believe is an example of how to make prettyPhoto W3C Valid. Online 8 you have this

(function($){$.prettyPhoto={version:'3.1.4'};$.fn.prettyPhoto=function(pp_settings){pp_settings=jQuery.extend({hook:'data-gal',animation_speed:'fast',ajaxcallback:function(){},slideshow:5000,autoplay_slideshow:false,opacity:0.80,show_title:true,allow_resize:true,allow_expand:true,default_width:500,default_height:344,counter_separator_label:'/',theme:'pp_default',horizontal_padding:20,hideflash:false,wmode:'opaque',autoplay:true,modal:false,deeplinking:true,overlay_gallery:true,overlay_gallery_max:30,keyboard_shortcuts:true,changepicturecallback:function(){},callback:function(){},ie6_fallback:true,markup:'<div class="pp_pic_holder">

Look For this

jQuery.extend({hook:'rel'

And change to

jQuery.extend({hook:'data-gal'

Alternatively you can download the version that I edited, its the latest version and be found here jquery.prettyPhoto-3.1.4-W3C.js