After developing my first responsive theme there’s one thing that really bugs me, the #$% lightbox appears all wonky on mobile devices. Well, today I came up with a small custom CSS that you can apply to your media queries and it should look pretty much equal in every theme using prettyPhoto
The solution works very well, but if you already scrolled a bit down and the image you’re opening is rather small in height, all you will get is the semi-transparent black overlay - the image rests at the top of the document, due to top: 0 !important; being set on .pp_pic_holder.pp_default.
My solution was to use the callback prettyPhoto provides each time you open a photo.
So, remove that bit of CSS from João’s example (the ‘top’ part) and have your prettyPhoto code look something like this:
// store the viewport width in a variable
var viewportWidth = $('body').innerWidth();
$("a.lightbox").prettyPhoto({
theme: 'pp_default',
changepicturecallback: function(){
// 1024px is presumed here to be the widest mobile device. Adjust at will.
if (viewportWidth < 1025) {
$(".pp_pic_holder.pp_default").css("top",window.pageYOffset+"px");
}
}
});
As you can see, I’m checking for a mobile device based on resolution. There are other ways of doing that, but you get the idea - prettyPhoto now shows up at the top of your viewport, not at the top of the document. Hope this helps someone
After developing my first responsive theme there’s one thing that really bugs me, the #$% lightbox appears all wonky on mobile devices. Well, today I came up with a small custom CSS that you can apply to your media queries and it should look pretty much equal in every theme using prettyPhoto
Keep in mind this is a very early solution, would love to see what you can add to the above code to make it even better.
Cheers
I’m so confused as to where to place this code. Do I paste it in the prettyPhoto.CSS or in the prettyPhoto.js and where exactly in either of those files am I supposed to place this line of code?
However, it does not seem to work for me. I already have a media block and I can modify other parts of the CSS for the selected viewport, but the section of code applied to PrettyPhoto does not take effect. There is no other CSS placed after this code that would overrule it.
However, it does not seem to work for me. I already have a media block and I can modify other parts of the CSS for the selected viewport, but the section of code applied to PrettyPhoto does not take effect. There is no other CSS placed after this code that would overrule it.
Any idea why it does not work?
Thanks!
Maybe it is related with the order in which your css files are loaded. Make sure that prettyPhoto.css is loaded BEFORE your css in which your modifications take place.
I have integrated the above solution and it is working PRETTY well, thanks alot unisphere
the image rests at the top of the document, due to top: 0 !important; being set on .pp_pic_holder.pp_default
Digitalimpact, could you please tell me where in the .js file I need to put in your code in order to make the lightbox opens in the actual window I’m viewing and not on top of document?
I also can’t figure out what ‘top’ part to delete?
I have used the css from Unispare to style my lightbox on mobile and it works fine.
I know it’s an old thread, but I hope you are still here!
Thanks!