图片关闭时制作动画 Photoswipe

Question

我正在使用 photoswpie 创建图库。但是当某些图像关闭时（当您单击图像外部的某个地方时），我无法制作动画。我想以这种方式看这个例子：

http://photoswipe.com/

我正在使用自定义代码。我已经更改了它，我的整个代码是：（请查看评论在哪里 "animation" - 这是我需要做的部分）

现在，它抛出错误：

TypeError: thumbnail.getBoundingClientRect is not a function

         $(document).ready(function() {
                $('.my-gallery').each( function() {
                    var $pic     = $(this),
                            getItems = function() {
                                var items = [];
                                $pic.find('a').each(function() {
                                    var $width   = $(this).data('width');
                                    var $height   = $(this).data('height');
                                            var $href = $(this).data('src'),

                                          //  $size   = $(this).data('size').split('x'),

                                            $width  = $width ,
                                            $height = $height;


                                    var item = {
                                        src : $href,
                                        w   : $width,
                                        h   : $height
                                    }

                                    items.push(item);
                                   // alert($height);
                                });
                                return items;
                            }

                    var items = getItems();


                    var $pswp = $('.pswp')[0];
                    $pic.on('click', '.pic-gallery', function(event) {
                        event.preventDefault();

                        var $index = $(this).index();
                       // alert($index);
                        var options = {
                            index: $index,
                            bgOpacity: 0.7,
                            showHideOpacity: true,
        //                    fadeOutSpeed:100,
                            enableMouseWheel: false, enableKeyboard: false,
                           showHideOpacity:true, getThumbBoundsFn:false, 
                          
                          //animation
                          getThumbBoundsFn: function(index) {

                        $pic.find('a').each(function() {
                            var thumbnail = $(this).data('src');
                 

                            var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;

                            var rect = thumbnail.getBoundingClientRect();


                            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
                        });
                            //end animation
                          }
                        
                          var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
                        lightBox.init();

                    });




                });
           });

    <div id="post_gallery" class="my-gallery">

                @foreach($gallery as $pic)
                    <div class="left pic-gallery">
                        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                       <?php $img_src = 'myproject.com/'. $pic['path'] .'/'. $pic['filename']; list($width, $height) = getimagesize($img_src);?>

                        <a itemprop="contentUrl" data-size="{{$width}}x{{$height}}" title="{{ $pic['title'] }}" data-width="{{$width}}" data-height="{{$height}}" data-src="myproject.com/{{ $pic['path'] }}/{{ $pic['filename'] }}"  href="myproject.com/{{ $pic['path'] }}/{{ $pic['filename'] }}" rel="bookmark">
                            <img class="left img-thumbnail" width="100" height="75" src="myproject.com/{{ $pic['path'] }}/thumbs/thumbs_{{ $pic['filename'] }}" alt="thumbnail {{ $pic['title'] }}">
                        </a>
                            
                        </figure>
                    </div>


                @endforeach

In examples this is done by using the following:

options = {

                // define gallery index (for URL)
                galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                getThumbBoundsFn: function(index) {
                    // See Options -> getThumbBoundsFn section of documentation for more info
                    var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                        pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                        rect = thumbnail.getBoundingClientRect(); 

                    return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
                }

            };

Answer 1

首先，您的代码中存在大量错误。我试图对其进行编辑，但意识到它不适合简单的格式更改。您遗漏了一些项目，对代码的必需部分进行了注释……一团糟。我正在通过同一个插件工作，所以我可以告诉。此外，我们使用相同的来源 jQuery 实施 PhotoSwipe。

现在，获取正确的代码。要在您的案例中实施 PhotoSwipe，您需要进行一些更改：从 figure a 获取大小属性，并将其分解为 width 和 height（该部分已被注释掉）。然后你需要使用 $size[0] 和 $size[1] 来获取图像的高度和宽度。

接下来，您遗漏了一些右括号 } 并且您在重复 getThumbBoundsFn

我的HTML（我没有用PHP，它很普通HTML，我试着模仿你的标签）：

<div class="row my-gallery" itemscope itemtype="http://schema.org/ImageGallery" id="img-gallery">
    <figure class="pic-gallery" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
        <a href="images/nature/DSC_7216.jpg" itemprop="contentUrl" data-size="1200x795" data-src="images/nature/DSC_7216.jpg">
            <img src="images/nature/DSC_7216_t.jpg" itemprop="thumbnail">
        </a>
    </figure>
    <figure class="pic-gallery" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
        <a href="images/nature/DSC_7218.jpg" itemprop="contentUrl" data-size="1200x795" data-src="images/nature/DSC_7218.jpg">
            <img src="images/nature/DSC_7218_t.jpg" itemprop="thumbnail">
        </a>
    </figure>
</div>

更正 Javascript 以重现您的问题：

$(document).ready(function() {
    $('.my-gallery').each( function() {
        var $pic     = $(this),
        getItems = function() {
            var items = [];
            $pic.find('a').each(function() {
                var $width   = $(this).data('width');
                var $height   = $(this).data('height');
                var $href = $(this).data('src'),
                    $size   = $(this).data('size').split('x'),
                    $width  = $size[0],
                    $height = $size[1];

                var item = {
                    src : $href,
                    w   : $width,
                    h   : $height
                };

                items.push(item);
                // alert($height);
            });
            return items;
        }

        var items = getItems();

        var $pswp = $('.pswp')[0];
        $pic.on('click', '.pic-gallery', function(event) {
            event.preventDefault();
            var $index = $(this).index();
            // alert($index);
            var options = {
                index: $index,
                bgOpacity: 0.7,
                showHideOpacity: true,
                //fadeOutSpeed:100,
                enableMouseWheel: false, 
                enableKeyboard: false,

                //animation
                getThumbBoundsFn: function(index) {
                    $pic.find('a').each(function() {
                        var thumbnail = $(this).data('src');
                        var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
                        var rect = thumbnail.getBoundingClientRect();
                        return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
                    });
                }//end animation
            };
            var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
            lightBox.init();
        });
    });
});

现在，最精彩的部分。您正在尝试将 src 与 getBoundingClientRect 方法一起使用，这是一个 string。 String没有这个方法。 Information about getBoundingClientRect method

您应该做的是提供页面元素。你可以这样做：

var thumbnail = event.target;

修复此错误后，您应该能够在单击缩略图时正确加载图库。问题是：你仍然不会像 PhotoSwipe 的演示页面那样有缩放动画。

为了使画廊打开动画起作用，您需要在 items 数组中再提供一个元素 - msrc，其中包含一个 link 缩略图。

要获得缩放动画，您需要将缩略图源 link 添加到项目数组中作为 'msrc' 属性。您还需要从 getThumbBoundsFn 中删除循环（不知道它在那里做什么）。完成的 javascript 将如下所示：

$(document).ready(function() {
    $('.my-gallery').each( function() {
        var $pic = $(this),
        getItems = function() {
            var items = [];
            $pic.find('a').each(function() {
                var width   = $(this).data('width');
                var height   = $(this).data('height');
                var href = $(this).data('src'),
                    thumb = $(this).children("img").attr("src"),
                    size   = $(this).data('size').split('x'),
                    width  = size[0],
                    height = size[1];

                var item = {
                    src : href,
                    msrc : thumb,
                    w   : width,
                    h   : height
                };

                items.push(item);
            });
            return items;
        }

        //var items = getItems();
        var items = itemArray;

        var $pswp = $('.pswp')[0];
        $pic.on('click', '.pic-gallery', function(event) {
            event.preventDefault();
            var $index = $(this).index();
            // alert($index);
            var options = {
                index: $index,
                bgOpacity: 0.7,
                showHideOpacity: true,
                //fadeOutSpeed:100,
                enableMouseWheel: false, 
                enableKeyboard: false,

                //animation
                getThumbBoundsFn: function(index) {
                    var thumbnail = event.target;
                    var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
                    var rect = thumbnail.getBoundingClientRect();
                    return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
                }//end animation
            };
            var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
            lightBox.init();
        });
    });
});

使用此代码，您将拥有放大缩小动画，就像 PhotoSwipe 的主页一样。

有一个我自己无法解决的问题：如果您更改幻灯片并关闭画廊，关闭动画将在错误的缩略图上播放（在演示页面上可以正常工作）。 I'm working on this problem myself。不过，在您的情况下，问题几乎不会引起注意，因为您的幻灯片会在画廊关闭时淡出。

希望对您有所帮助！

编辑：

我想出了如何为右矩形设置动画：您需要提供适当的缩略图元素。而不是使用 "event.target"，您需要找到项目索引并使用它来计算边界矩形。

最终代码看起来像这样（适用于我之前提供的 HTML 部分）：

$(document).ready(function() {
    $('.my-gallery').each( function() {
        var $pic = $(this),
        getItems = function() {
            var items = [];
            $pic.find('a').each(function() {
                var width   = $(this).data('width');
                var height   = $(this).data('height');
                var href = $(this).data('src'),
                    thumb = $(this).children("img").attr("src"),
                    size   = $(this).data('size').split('x'),
                    width  = size[0],
                    height = size[1];

                var item = {
                    src : href,
                    msrc : thumb,
                    w   : width,
                    h   : height
                };

                item.el = $(this).find("img")[0];

                items.push(item);
            });
            return items;
        }

        var items = getItems();
        //var items = itemArray;

        var $pswp = $('.pswp')[0];
        $pic.on('click', '.pic-gallery', function(event) {
            event.preventDefault();
            var $index = $(this).index();
            // alert($index);
            var options = {
                index: $index,
                bgOpacity: 0.7,
                showHideOpacity: true,
                //fadeOutSpeed:100,
                enableMouseWheel: false, 
                enableKeyboard: false,

                //animation
                getThumbBoundsFn: function(index) {
                    var thumbnail = items[index].el;
                    var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
                    var rect = thumbnail.getBoundingClientRect();
                    return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
                }//end animation
            };
            var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
            lightBox.init();
        });
    });
});

希望对您有所帮助！

图片关闭时制作动画 Photoswipe

Making animation when image is closed Photoswipe

javascript

jquery

image

photoswipe