当图片关闭时制作动画Photoswipe

Question

我正在使用Photoswipe来创建图像库。但是当一些图片关闭（即你在图片外面点击时）时，我无法制作动画效果。我希望它看起来像这个例子：

http://photoswipe.com/

我正在使用自定义代码。我已经修改了代码，我的整个代码如下：（请看到注释中的“animation”-这是我需要做的部分）

现在，它会抛出错误：

TypeError: thumbnail.getBoundingClientRect不是一个函数

         $(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};
                }

            };

- ivva

Answer 1

首先，你的代码存在大量错误。我试图编辑它，但发现无法通过简单的格式更改来解决。你缺少一些项目，必要的代码部分被注释掉了……这很混乱。我正在处理同一个插件，所以我可以说。此外，我们正在使用相同的源来实现PhotoSwipe的jQuery。

现在，正确的代码。要在您的情况下实现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 没有这个方法。 getBoundingClientRect方法的信息 你应该提供页面上的一个元素，像这样：

var thumbnail = event.target;

在解决这个错误后，当你点击缩略图时，应该能够正确加载相册。问题是：你仍然没有缩放动画，就像PhotoSwipe演示页面上一样。

为使相册打开动画正常工作，需要在items数组中提供另一个元素-msrc，其中包含缩略图的链接。

要获得缩放动画，需要将缩略图源链接添加到项目数组中作为“msrc”属性。还需要从getThumbBoundsFn中删除cycle（不知道它在做什么）。完成的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的主页面一样。

我无法自行解决一个问题：如果您更改幻灯片并关闭图库，则关闭动画将在错误的缩略图上播放（在演示页面上正常工作）。我正在自己解决这个问题。在您的情况下，由于幻灯片在图库关闭时淡出，因此几乎不会注意到此问题。

希望这可以帮助您！

编辑：

我成功找到了如何对正确的矩形进行动画处理的方法：您需要提供适当的缩略图元素。而不是使用“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();
        });
    });
});

希望这有所帮助！

- Yuri Predborski