Photoswipe not opening popup when using with Wordpress media files

[Lippiun]

Hi,

I'm using Photoswipe on a Wordpress site and the images i wish to use it on are taken from the wp-content/uploads folder. When clicking on an image it's taking me to the default wordpress media file location rather than opening up in the lightbox?

So it's redirecting me to this link: http://localhost:8888/wp-content/uploads/2017/11/1010x1514.png

When i try using the image you supplied it works? https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg

 <div class="gallery">
                       <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="http://localhost:8888/wp-content/uploads/2017/11/1010x1514.png" itemprop="contentUrl" data-size="1024x1024">
          <img class="scene_element scene_element--fadeinright" src="http://via.placeholder.com/555x372" itemprop="thumbnail" alt="Image description" />
      </a>
                                          <figcaption itemprop="caption description">Image caption  1</figcaption>

    </figure>
                        </div>

[arnowelzel]

How do you use PhotoSwipe in WordPress? You need a plugin to integrate PhotoSwipe - which one do you use? Did you try "Lightbox with Photoswipe" yet (https://wordpress.org/plugins/lightbox-photoswipe/)?

[marcelomgerais]

Hi, im using Total WP Theme, that have native lightbox inside it. Im trying to use photoswipe plugin, because i need the zoomer function, but is does not works. Any tip to make it 'parental' than ilightbox of Total wp theme? Tks a lot!

[arnowelzel]

You have to check the options of Total WP Theme if you can disable the lightbox there or ask the creators of Total WP Theme if there is a setting for this.

[marcelomgerais]

Hi Arno, thanks. i will verify with the webmaster of Total wp theme. Thanks a lot. cheers!

[marcelomgerais]

Hi, it works!! i disable the wp gallery, like on this doc: (https://wpexplorer-themes.com/total/docs/custom-wp-gallery/); but now, images are with no space between them on galleries. any style to get margin or padding between the itens? tks.

[arnowelzel]

You need to check the HTML code of the gallery. Identify the elements which contains the thumbnails and add a CSS rule for these elements.

For example - you need to check YOUR SITE - this is just an EXAMPLE:

<div id='gallery-1' class='gallery galleryid-171 gallery-columns-4 gallery-size-thumbnail'>
  <figure class='gallery-item'>
    <div class='gallery-icon landscape'>
      <a href='...'><img ... /></a>
    </div>
  </figure>
...
</div>

So in this case, the CSS class "gallery-item" needs an additional margin to create a space between the gallery items:

.gallery-item {
  margin: 1em;
}

Or if he margin should only be to the right and bottom:

.gallery-item {
  margin-right: 1em;
  margin-bottom: 1em;
}

[marcelomgerais]

hi, thanks a lot!! Using margin is broken the lines of images. So, i use a little padding (2px) to resolve this. tks.