javascript - 图片关闭时制作动画 Photoswipe

Question

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

http://photoswipe.com/

我正在使用自定义代码。我已经更改了它，我的整个代码是:(请查看评论是“动画”的地方 - 这是我需要做的部分)

现在，它抛出错误:

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

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

现在，获取正确的代码。要在您的案例中实现 PhotoSwipe，您需要进行一些更改:从 figure a 获取 size 属性，并将其分解为 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(一个 string)与 getBoundingClientRect 方法一起使用。 String 没有这个方法。 Information about getBoundingClientRect method

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

var thumbnail = event.target;

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

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

要获得缩放动画，您需要将缩略图源链接作为“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();
        });
    });
});

希望这对您有所帮助!