TypeError: parentEl is undefined #1271

Open
davetgreen opened this Issue Jan 11, 2017 · 1 comment

Projects

None yet

1 participant

@davetgreen
davetgreen commented Jan 11, 2017 edited

I'm getting the above error when trying to initialize PhotoSwipe.

All the required CSS and JS assets are enqueued on the page, the HTML is as per the Getting Started guide (unchanged) and I'm using the <figure> markup as per the guide with the .single-gallery-item class used to target them.

Is this a genuine bug, or am I missing something obvious?

    var openPhotoSwipe= function() {
        var galleryItems   = $('.single-gallery-item');
        var pswpElement = $('.pswp');
        var pswpSlides = [];

        galleryItems.each(function(i, e) {

          var img = $(e).find( 'img' );
          var anchor = $(e).find( 'a' );
          var imgData = {
              msrc: img.attr( 'src' ),
              src: anchor.attr( 'href' ),
              h: img.attr( 'height' ),
              w: img.attr( 'width' )
          };

          pswpSlides.push( imgData );
        });

        var imgIndex = $(this).index();
        var options = {
          index: imgIndex
        };

        var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, pswpSlides, options);
        gallery.init();
    }

    $('#single-gallery').on( 'click', 'figure', function(e) {
      e.preventDefault();
      openPhotoSwipe();
    });

Sample gallery markup from my masonry grid of thumbnails:

<div id="single-gallery" class="single-gallery masonry-grid" itemscope="" itemtype="http://schema.org/ImageGallery" style="position: relative; height: 1997px;">

<div class="grid-sizer"></div>

<figure class="single-gallery-item landscape" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">

    <a href="http://www.domain.com/image_full.jpg" itemprop="contentUrl">
        <img src="http://www.domain.com/image.jpg" itemprop="thumbnail" alt="" width="450" height="252"><span class="overlay"></span>
    </a>
</figure>

...
</div>

Thanks for your time @dimsemenov, looking forward to using this great plugin!

@davetgreen

Closing this issue as on closer inspection, it is in fact my mistake. Be wary that if you're initializing via jQuery you need to make sure that you're passing pswpElement, you're passing in the reference to the node itself, not a jQuery object.

So var pswpElement = document.querySelectorAll('.pswp')[0]; instead of var pswpElement = $('.pswp');

/derp.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment