415 posts
  • Has referred 10+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
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
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
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 :)

2468 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+2 more
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
  • Has been part of the Envato Community for over 1 year
  • Has collected 10+ items on Envato Market
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

2468 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+2 more
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
  • Has been part of the Envato Community for over 2 years
  • Has collected 10+ items on Envato Market
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
  • Has been part of the Envato Community for over 4 years
  • Located in Canada
  • Has collected 1+ items on Envato Market
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
  • Has collected 1+ items on Envato Market
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
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
Johangsl says

You sir, saved me. Thanks for this solution!

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by