photoswipe 4沒有定義圖片的寬度和高度

Question

我嘗試了photoswipe網站的演示，這對我所需要的非常適用。

但是有可能使用photoswipe而不必爲每個圖像定義寬度和高度？ 我有不時更新的約300張圖片。所以更新需要很多工作。 我所有的大圖像都是1600像素（最大的一面），圖像可以是水平的，垂直的或正方形的。

歡迎任何建議，因爲我的編碼技能非常有限。

我已經嘗試了建議的PHP，但我用錯了方式我猜。 這是我做的。

<?php 
$img_url = "https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" 
$img_size = getimagesize($img_url); 
?> 

<a href="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" data-size="$arr[0]x$arr[1]" 
data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" 
data-med-size="1024x1024" data-author="Folkert Gorter" class="demo-gallery__img--main"> 
<img src="../farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" /> 
<figure>This is dummy caption.</figure> 
</a> 

Answer 1

必須定義。可以使用下面的PHP方法。

<?php 
$img_url = get_image_path($goods_id, $gallery_img['img_url'], false, 'gallery'); //This part according to your situation to obtain the images URL. 
$img_size = getimagesize($img_url); 

/** 
* 這裏$img_size爲一個數組類型 
* $img_size[0] 爲圖像的寬度 
* $img_size[1] 爲圖像的高度 
* $img_size[2] 爲圖像的格式，包括jpg、gif和png等 
* $img_size[3] 爲圖像的寬度和高度，內容爲 width="xxx" height="yyy" 
*/ 
?> 
data-size="$img_size[0]x$img_size[1]" 

Answer 2

<?php/* xx.jpg the photo you want to get the size of */ 
$img_url = "http://www.google.com/xx.jpg" 
$arr = getimagesize($img_url); 

/** 
* array $arr 
* $arr[0] photo width 
* $arr[1] photo height 
* $arr[2] photo format, i.e.:jpg,gif,png 
* $arr[3] photo width and height: width="xxx" height="yyy" 
*/ 

?> 

data-size="$arr[0]x$arr[1]" 

Answer 3

檢查jQuery插件我寫

插件頁面

https://ergec.github.io/jQuery-for-PhotoSwipe/

使用

​​

插件代碼

/*! 
jqPhotoSwipe v0.1 - jQuery for PhotoSwipe 
https://ergec.github.io/jQuery-for-PhotoSwipe/ 
*/ 
(function (jQuery) { 
    jQuery.fn.jqPhotoSwipe = function (options) { 
     var _photoswipe = {}; 
     var defaults = {}; 
     _photoswipe.galleries = []; 
     _photoswipe.galleriesindex = []; 
     var $galleryid = 0; 
     var pswpHTML = '<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button><button class="pswp__button pswp__button--share" title="Share"></button><button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button><button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div> </div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button><button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div>'; 
     var pswpElement = $(pswpHTML).appendTo("body")[0]; 
     this.each(function() { 
      var $options = $.extend(defaults, options); 
      var $this = $(this); 
      var $galleryname = $this.data("fancybox-group"); 
      if (!$galleryname) { 
       $galleryname = "singleimage" + (Math.random() * (9999999 - 1) + 1); 
       $this.data("fancybox-group", $galleryname); 
      } 
      if (_photoswipe.galleriesindex.indexOf($galleryname) === -1) { 
       $galleryid = _photoswipe.galleriesindex.length; 
       _photoswipe.galleriesindex.push($galleryname); 
       _photoswipe.galleries[$galleryid] = {}; 
       _photoswipe.galleries[$galleryid].items = []; 
       _photoswipe.galleries[$galleryid].i = 0; 
      } else { 
       $galleryid = _photoswipe.galleriesindex.indexOf($galleryname); 
      } 
      var $galleryid2 = $galleryid; 
      $this.data("i", _photoswipe.galleries[$galleryid].i); 
      _photoswipe.galleries[$galleryid2].items.push({ 
       src: $this.attr("href"), 
       title: $this.attr("title"), 
       w: 0, 
       h: 0 
      }); 
      $this.off("click").on("click", function (e) { 
       var index = $(this).data("i"); 
       $options.index = index; 
       _photoswipe.galleries[$galleryid2].obj = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, _photoswipe.galleries[$galleryid2].items, $options); 
       _photoswipe.galleries[$galleryid2].obj.init(); 
       _photoswipe.galleries[$galleryid2].obj.listen('imageLoadComplete', function(index, item) { 
        if (item.w == 0 && item.h == 0) { 
         var imgpreload = new Image(); 
         imgpreload.onload = function() { 
          item.w = this.width; 
          item.h = this.height; 
          _photoswipe.galleries[$galleryid2].obj.invalidateCurrItems(); 
          _photoswipe.galleries[$galleryid2].obj.updateSize(true); 
         }; 
         imgpreload.src = item.src; 
        } 
       }); 
       return false; 
      }); 
      _photoswipe.galleries[$galleryid].i ++; 
     }); 
     return _photoswipe; 
    }; 
})(jQuery);