Add to ajax loaded image link

  • Hello. Love your plugin. Its been great.

    I have a text list of images that are added via an ajax request. I want them to load the image via your lightbox.

    If I add the ‘<a href=”myimage.jpg”>View image</a>’ code direct into the template it works as I’d expect. So lightbox exists and the method I linked to the image is valid. However I need to pull this image list form another service so its added via ajax.

    I saw on this post here https://github.com/arnowelzel/lightbox-photoswipe/issues/26 that you could do that by calling “lbwpsInit();” after I have loaded my ajax. But that doesnt work. JS console tells me that “ReferenceError: lbwpsInit is not defined”.

    Can you please tell me what function I can call to get it to attached the lightbox listener to my image links? It get it to re-check the page for links?

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter katmacau

    (@katmacau)

    I worked out that if I add the following data attributes to my links that it works:

    <a href="my_image.jpg" data-lbwps-width="600" data-lbwps-height="400" data-lbwps-srcsmall="my_image.jpg">My image</a>

    However my images are all different sizes and stored externally. Do I need to know the image size for this work? I know I can use code to get that but ideally are the other parameter options I can use? Eg can I set the width to a fixed value and the height to auto?

    Is there some documentation for options I can use here? Thank you.

    Plugin Author Arno Welzel

    (@awelzel)

    Yes, without knowing the image size PhotoSwipe does not work. Also see here: https://photoswipe.com/getting-started/#required-html-markup

    You may need to implement some backend script which loads the image header to determine the size and caches that result in a local database table – so next time you include that same image somewhere the backend script already knows the data and can add the required attributes.

    To get an idea how that works, see https://github.com/arnowelzel/lightbox-photoswipe/blob/main/src/LightboxPhotoSwipe/LightboxPhotoSwipe.php#L1080-L1112

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add to ajax loaded image link’ is closed to new replies.