[英]jQuery pretty photo plugin doesn't show thumbnails in gallery
我正在使用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 : ''
});
問題是prettyPhoto驗證您的圖像網址。 使用jpg | jpeg | png | gif驗證圖片網址結束。 所以解決方案是:
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];
完成!
<script>
$(document).ready(function(){
$("a[rel^='prettyPhoto["18"]']").prettyPhoto({animation_speed:'normal',theme:'pp_default',slideshow:3000, autoplay_slideshow: false});
});
</script>
在頭文件或任何其他合適的js文件中添加此腳本。
嘗試添加:
overlay_gallery:true,
overlay_gallery_max:30
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.