【问题标题】：jQuery pretty photo plugin doesn't show thumbnails in galleryjQuery 漂亮的照片插件不在画廊中显示缩略图
【发布时间】：2013-11-08 10:48:36
【问题描述】：

我正在使用 jquery 漂亮照片插件作为我的图片库。但是当我打开一张照片时，它可以正常工作但不显示缩略图，而是显示在其 css 中定义的默认背景：

我的结果：

我想要的结果：

我的 HTML：

<ul class="hover_thumb_wrap">
    <li class="hover_thumb_unit">
        <a rel="prettyPhoto[18]" class="imgwrap" title="Item Title" href="http://placehold.it/800x600" style="cursor: pointer;">
        <img width="50" height="50" alt="Item Thumbnail Alt" class="attachment-50x50" src="http://placehold.it/50x50">
        </a>
    </li>
    <li class="hover_thumb_unit">
        <a rel="prettyPhoto[18]" class="imgwrap" title="Item Title" href="http://placehold.it/400x500" style="cursor: pointer;">
        <img width="50" height="50" alt="Item Thumbnail Alt" class="attachment-50x50" src="http://placehold.it/50x50">
        </a>
    </li>

</ul>

我的 Javascript：

jQuery("#item-wrap a[rel^='prettyPhoto']").prettyPhoto({
            animationSpeed: 'normal', /* fast/slow/normal */
            padding: 15, /* padding for each side of the picture */
            opacity: 0.7, /* Value betwee 0 and 1 */
            showTitle: false, /* true/false */
            allowresize: true, /* true/false */
            counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
            //theme: 'dark_square', /* light_rounded / dark_rounded / light_square / dark_square */
            hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
            modal: false, /* If set to true, only the close button will close the window */
            callback: function() {
                var url = location.href;
                var hashtag = (url.indexOf('#!prettyPhoto')) ? true : false;
                if (hashtag) location.hash = "!";
            } /* Called when prettyPhoto is closed */,
            social_tools : ''
      });

【问题讨论】：

请提供小提琴。
@MichałRybak，很难做到，请猜一猜。
调试是关于分析代码，而不是猜测错误在哪里。您可以毫无问题地将外部资源导入 jsFiddle。

标签： javascript jquery html css prettyphoto

【解决方案1】：

问题是 prettyPhoto 验证您的图片网址。验证以 jpg|jpeg|png|gif 结尾的图像 url。所以解决方案是：

800x600.jpg

2：编辑文件：jquery.prettyPhoto.js（解压版）第763行：注释这段代码

if(!pp_images[i].match(/\b(jpg|jpeg|png|gif)\b/gi)){
                    classname = 'default';
                    img_src = '';
                }else{
                    classname = '';
                    img_src = pp_images[i];
                }

替换为

classname = '';
img_src = pp_images[i];

完成！

【讨论】：

【解决方案2】：

<script>
    $(document).ready(function(){
    $("a[rel^='prettyPhoto["18"]']").prettyPhoto({animation_speed:'normal',theme:'pp_default',slideshow:3000, autoplay_slideshow: false});
});

</script>

将此脚本添加到您的头文件或任何其他合适的 js 文件中。

【讨论】：

【解决方案3】：

尝试添加：

overlay_gallery:true,
overlay_gallery_max:30

【讨论】：

$.prettyPhoto.initialize = function() { ... // 将 SRC、TITLE、ALT 放入数组中。 pp_thumbs = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return $(n).find('img').attr ('src');}) : $.makeArray($(this).find('img').attr('src')); pp_images = ...
$.prettyPhoto.open = function(event) { ... pp_thumbs = $.makeArray(arguments[0]); pp_images = ... function _build_overlay(caller){ for (var i=0; i