图像关闭时制作动画Photoswipe

我使用photoswpie创建图像库。但是当某些图像关闭时（当您在图像之外点击某处时），我无法制作动画。我想看看这样的例子：图像关闭时制作动画Photoswipe

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

 
      };

来源

2015-12-07 mistery_girl

首先，代码中存在大量错误。我试图编辑它，但意识到它不适合简单的格式更改。你错过了一些项目，需要的部分代码被评论......它一团糟。我正在通过同一个插件工作，所以我可以告诉。另外，我们使用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，这是一个string，与getBoundingClientRect方法。 String没有此方法。 Information about getBoundingClientRect method

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

var thumbnail = event.target;

修复这个错误后，你应该能够当您单击缩略图以正确加载画廊。问题是：你仍然不会有缩放动画，就像PhotoSwipe的演示页面一样。

为了让画廊的动画开始工作，您需要在items array - 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(); 
     }); 
    }); 
});

希望这有助于！

来源

2016-04-27 22:00:15

图像关闭时制作动画Photoswipe

回答

相关问题