Question

我使用标题中的当前代码使W3C对prettyPhoto有效。

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

未经修改的代码，由prettyPhoto文档推荐

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

使用页面代码如下。

<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。它在拇指上使用LazyLoad，但也可以正常工作。

照片中的图片是正在工作由prettyPhoto，但它们没有在Gallery中打开（没有下一个，上下文等，我认为它没有检测到使用相同标签的其他图像），我怀疑它与[pp_gal]和我编写的代码有关，以使其处理data-gal而不是rel =。

我怀疑这是jQuery Gurus的一个简单修复。感谢

Answer 1

由于您的数据attraibutes的值为prettyPhoto[pp_gal]而不是prettyPhoto，我们可以推断出prettyPhoto插件在那里看到了获取您想要的信息所需的信息

您需要进入prettyPhoto的来源并查看data-gal而不是rel。

Answer 2

经过调查，似乎prettyPhoto最近改进了他们的代码并采用这种改变是直截了当的，因为他们现在挂钩'REL'属性并改变一个值修复所有。呐喊呐喊！

相信是如何使prettyPhoto W3C有效的一个例子。在线8你有这个

(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">

寻找这个

jQuery.extend({hook:'rel'

并改为

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

或者，您可以下载我编辑的版本及其最新版本，并在此处找到jquery.prettyPhoto-3.1.4-W3C.js

prettyPhoto有效W3C但没有Gallery

2 个答案: