phpBB Lightbox and Iframe integration correct scroll

User avatar
axew3
w3all User
w3all User
Posts: 2677
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

phpBB Lightbox and Iframe integration correct scroll

Post by axew3 »

As you may noted if on your board run phpBB Lightbox extension
when on topic there are several replies with images attachments, by clicking on the image to open the lightbox gallery and display the image on it, the result is that the lightbox container gallery is forced to the top of the page.
If the topic contain several answers so you have to scroll manually to top the browser window to correctly view the image. Further more, when you close the gallery mode, you we'll be not scrolled to the position of the page where onclick the gallery has been fired.

How to resolve this?
on overall_footer.html, where you added the resizer js code, add this code just after the first opening <script> tag:

Code: Select all

$(".postimage").on("click", function(event) {
var pos = event.pageY - 100;
 $(parent.window).scrollTop( 200 );
var el = document.getElementById("lightbox");
$("#lightboxOverlay").on("click", function() {
$(parent.window).scrollTop( pos );
});
$(".lb-close").on("click", function() {
$(parent.window).scrollTop( pos );
});
$(".lightbox").on("click", function() {
$(parent.window).scrollTop( pos );
});
});
to fit correctly your needs, may change -100 and 200 values, that refer to:
var pos = event.pageY - 100; -> position of the mouse when click event fire, and where to return to
$(parent.window).scrollTop( 200 ); -> position to scroll to when lightbox fire

The complete trick has been added on v2 and v3 iframe integration code.
Cheers to all cool people!
User avatar
axew3
w3all User
w3all User
Posts: 2677
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: phpBB Lightbox and Iframe integration correct scroll

Post by axew3 »

At date of this post the v2 and v3 code has been updated about this last fix because an instruction was added in wrong place, now it is correct.
https://www.axew3.com/w3/2018/09/wordpr ... -embed-v2/
Post Reply