Question

我尝试了photoswipe网站上的演示，该网站非常适合我需要它。

但是，如果不必为每张图像定义宽度和高度，是否可以使用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/* 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 2

必须定义。可以使用下面的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 3

检查我写的jQuery插件

插件页面

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

<强>使用

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

插件代码

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

photoswipe 4没有定义图像的宽度和高度

3 个答案: