Создание анимации при закрытии изображения 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

Во-первых, в коде содержится большое количество ошибок. Я попытался отредактировать его, но понял, что он не будет вписываться в простое изменение форматирования. Вам не хватает некоторых элементов, требуемые части кода прокомментированы ... это беспорядок. Я прокладываю себе путь через тот же плагин, поэтому могу сказать. Кроме того, мы используем тот же источник для реализации 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, который является 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. В вашем случае проблема едва заметна, так как ваш слайд исчезает, когда галерея закрывается.

Надеюсь, это поможет!

Edit:

мне удалось выяснить, как оживить правильный прямоугольник: вы должны обеспечить надлежащий элемент эскиза. Вместо использования «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(); 
     }); 
    }); 
}); 

Надеюсь, что это помогает!