phpBB Lightbox and Iframe integration correct scroll

Post a reply


This question is a means of preventing automated form submissions by spambots.
Smilies
:D :) ;) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :| :mrgreen: :geek: :ugeek:

BBCode is ON
[img] is ON
[url] is ON
Smilies are ON

Topic review
   

If you wish to attach one or more files enter the details below.

Maximum filesize per attachment: 1 MiB.

Expand view Topic review: phpBB Lightbox and Iframe integration correct scroll

Re: phpBB Lightbox and Iframe integration correct scroll

by axew3 » Fri Dec 21, 2018 4:28 pm

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/

phpBB Lightbox and Iframe integration correct scroll

by axew3 » 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:

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!

Top