Photoswipe plugin strange behavior

Support
1

Hi
I’m trying to use photoswipe plugin and I don’t get it right.
I’m making it as simple as the sample but I the swipe does not appear. Instead, when moving the mouse over image, I get a grey bar under the picture.
I think it’s a very small stupid thing I do somewhere but I can’t find it.
Could somebody help ? (may be @Karmalakas Karmalak ?)
attached the resulting html (you can see the grey stuff) and here is the piece of code :

{{ photoswipe('photoswipe-gallery', 'a') }}

<section class="carousel">
    <ul class="carousel-items" id="photoswipe-gallery">
        {% for child in p.collection %}
            {% include 'partials/blog_item.simple.html.twig' with {'refpage':child, 'truncate':true} %}
        {% endfor %}
    </ul>
</section>

And in blog_item.simple.html.twig :

<li class="carousel-item" pageref="{{ refpage.url}}" href="{{ refpage.url}}">
	<div class="card">
	<a href="{{ refpage.media.images|first.url}}" data-size="2000x2000" class="gallery-item"> 
	{{ refpage.media.images|first.cropResize(500,350).html(refpage.title ~ " : " ~ html_entity_decode(strip_tags (refpage.content|truncate(150))),refpage.title, 'imgCard img-fluid')}}
	</a>
	</div>
</li>

Capture d’écran 2022-01-19 à 15.29.44
Capture d’écran 2022-01-19 à 15.29.44749×468 189 KB

2

Judging by the card class name I assume you’re using Bootstrap. Photoswipe plugin itself doesn’t provide any styling for the photo grid you might want to show, so this layout completely is up to you. My guess would be to add display: block; or at least display: inline-block; to .card > a. Still not sure though if it will fix your issue. Quite difficult to understand non-formatted code sample. Please use 3 backticks (```) to wrap code in posts.

Does Photoswipe itself get initialized and work or does it fail? Is there a JS error maybe?

3

thanks for your answer. So…
This fun theme is made from scratch, so I guess it’s based on Bootstrap yes.
PSwipe get initialized yes, I can debug script and everything seems to go well (that’s the strange point). Therefore I guess you are right, that must be some css problem.
I tryed to modify “display” but without result.
So, I’m going to dig this way, and come back with the solution … or not :face_with_raised_eyebrow:

1 Like
4

I really hope you will figure this out. As I mentioned, photo list/grid/whatever you want is completely up to you how you design and implement it :slight_smile:

BTW, Both opening and closing backticks should be in new line :wink:

```
// code goes here
```
5

:melting_face: I’m not used to this, sorry ! :wink:

6

Ok, it seems for strange reason (mostly css but not found at this time :roll_eyes:) that animation happens at image back. Is it possible ?
I could not identify why it’s going like this. I tried to debug your script but without seeing anything.
Still dig it…

7

What animation? And what is image back? :thinking: Not seeing it live makes it difficult to suggest something

Here’s one example with a plain <a/> list
Here’s another one with a different approach using <figure/>

Didn’t encounter any issues while implementing :thinking:

8

ok ok may be I misexplain. When the mouse is on the image, I can see something happening behind the image, a grey rectangle appears…
I already took some html from your demo site (with figure) without success. I’m sure it’s a stupid thing in my code…
(btw the a/> is not doing any swipe ?)

9

Definitely some CSS and :hover case

What do you mean? I just checked and it works fine for me :thinking:

10

my god ! I’m so sorry ! I just found my stupid misunderstood and bad coding.
Of course it was working !
I had just another event captured when mouseclick (result of another dirty coding that should be remove ) resulting in this terrible and strange behavior !
PLease forgive me for that :cold_face:
Thanks a lot for your time.

11

No worries. Glad you figured it out