prettyPhoto styling for small screens

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 :slight_smile:

Grab the code here: http://pastie.org/4034229

See what it looks like: http://screencast.com/t/UJ9gZmsVgfI4

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 edited only this line of the code:

.pp_details { width: 94%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px!important; }

into:

.pp_details { width: 100%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px!important; }

Now the details bar is also at the full width of the screen.

Thanks for the solution to this :slight_smile:

Something that I would like to add to this:

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 :slight_smile:

unisphere said

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 :slight_smile:

Grab the code here: http://pastie.org/4034229

See what it looks like: http://screencast.com/t/UJ9gZmsVgfI4

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?

Thank you.
Dana

Dana, you would place that in your CSS, in a media block, like so:

@media only screen and (max-device-width : 600px)  {

// put that code here

}

The above can only be tested on a device; if you need to test it in your browser, replace max-device-width with max-width.

Also, make sure you have something like this in the of your page :

Thank you for the 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.

Any idea why it does not work?

Thanks!

JulieLap said

Thank you for the 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.

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 :wink:

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!

You sir, saved me. Thanks for this solution!

Really nice…thanks. I fixed the missing padding at the top of the image by adding “padding-top:20px !important;” to this line:

.pp_content { width: 100%!important; height: auto!important; padding-top:20px !important; }

Thank you @unisphere!! You’re the best :slight_smile:

@unisphere
Could you please upload your solution to another hoster (e.g. pastebin.com) because pastie.org doesn’t work anymore.