415 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 5-6 years
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Referred between 10 and 49 users
  • Portugal
unisphere says

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

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

1 post
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
zaloo says

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

2440 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
digitalimpact says

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

1 post
  • Bought between 10 and 49 items
  • Has been a member for 1-2 years
danagivens says

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

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

2440 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
digitalimpact says

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 <head> of your page :

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
1 post
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
JulieLap says

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!

1 post
  • Bought between 1 and 9 items
  • Canada
  • Has been a member for 3-4 years
Etic says

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 ;)

1 post
  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
evaeskilsson says
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!

1 post
  • Bought between 1 and 9 items
  • Has been a member for 5-6 years
Johangsl says

You sir, saved me. Thanks for this solution!

by
by
by
by
by
by