Add global API to open the Lightbox

[arnowelzel]

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]

"window.lbwpsOpenPhotoSwipeById is not a function" :(

[arnowelzel]

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 ;-)

[arnowelzel]

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();

[PawelPatyk]

I added the code below and nothing happens :(

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

[arnowelzel]

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]

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]

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

[PawelPatyk]

No errors in the console, jQuery is working.

[arnowelzel]

Please check the result of this in the console:

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

[PawelPatyk]

[arnowelzel]

Then this should open the lightbox:

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

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

[PawelPatyk]

Works, thanks :)

[arnowelzel]

As I said - without console.log:

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

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

[arnowelzel]

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