photoswipe 4 이미지의 너비와 높이를 정의하지 않고

Question

필자는 사진 닦기 웹 사이트에서 데모를 시도했다.

하지만 모든 이미지의 너비와 높이를 정의하지 않고도 photoswipe를 사용할 수 있습니까? 수시로 업데이트되는 약 300 개의 이미지 갤러리가 있습니다. 따라서 업데이트에는 많은 작업이 필요합니다. 큰 이미지는 모두 1600px (가장 큰 쪽)이며 이미지는 가로, 세로 또는 정사각형이 될 수 있습니다.

필자의 코딩 기술이 매우 제한적이므로 어떤 제안이라도 환영합니다.

내가 제안한 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/

사용

$(document).ready(function() { 
    $(".fancybox").jqPhotoSwipe(); 
}); 

0을 썼다

플러그인 코드

/*! 
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);