arnowelzel/lightbox-photoswipe

Add global API to open the Lightbox

Opened this issue · 14 comments

arnowelzel commented

Also see https://wordpress.org/support/topic/opening-photoswipe-via-javascript-api/

There may be usecases which require to open the lightbox without clicking in image. This could be done by exposing a global function. For example:

window.lbwpsOpenPhotoSwipe(linkObject)

window.lbwpsOpenPhotoSwipeById(id)

Where linkObject is the image link to open and id would be the ID. Depending on if you have an object or just an ID you can then use the appropriate function.

Usage example:

<a id="image1" href="myimage.jpg" ...><img src="myimage-300x300.jpg" ...></a>

<button type="button" onClick="window.lbwpsOpenPhotoSwipeById('image1');">Open me!</button>
PawelPatyk commented

"window.lbwpsOpenPhotoSwipeById is not a function" :(

arnowelzel commented

Yes, because is not implemented yet. This issue only describes how it could be done for future versions, not how it is at the moment.

Everybody is invited to provide a pull request ;-)

  • 😕1
arnowelzel commented

Since you are a bit disappointed - sorry, but I maintain this project in my free time and some things don't have a high priority.

At https://wordpress.org/support/topic/opening-photoswipe-via-javascript-api/ you also find other solutions like using the .click() method on the image links which also opens the lightbox.

For example: on https://arnowelzel.de/en/projects/electronics/brymen-bm257s you can use the following call to open the first image there:

document.querySelector('a[href="https://arnowelzel.de/en/wp-content/uploads/sites/2/2021/07/brymen-bm257s.jpg"]').click();

  • 👍1
PawelPatyk commented

I added the code below and nothing happens :(

$('#button-photo-swipe').on('click', function() {
    $('#image-1').click();
});
arnowelzel commented

Well - since I don't see the HTML code in which this should be used, just a hint:

#image-1 needs to be the ID of the link to the image, not the image itself:

<a id="image1" href="..." data-lbwps...

arnowelzel commented

Also check your web developer console for errors and make sure, that jQuery is available (my plugin does not need jQuery, but your code does).

PawelPatyk commented

Link:
<a href="img.jpg" id="image-1" data-lbwps-width="990" data-lbwps-height="643" data-lbwps-handler="1">...</a>

PawelPatyk commented

No errors in the console, jQuery is working.

arnowelzel commented

Please check the result of this in the console:

console.log(document.getElementById('image-1'))

arnowelzel commented

Then this should open the lightbox:

document.getElementById('image-1').click();

(Edit: of course without console.log...)

PawelPatyk commented

Works, thanks :)

arnowelzel commented

As I said - without console.log:

Then this should open the lightbox (sorry for the typo):

document.getElementById('image-1').click();

  • ❤️1
arnowelzel commented

Ok, then your jQuery call may not be correct. But this is something which has nothing to do with my plugin.

  • 👍1