phpBB Lightbox and Iframe integration correct scroll
Posted: Fri Dec 21, 2018 9:51 am
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:
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!
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 );
});
});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!