I’m pretty new to designing responsive sites and I was wondering if there is anything that I need to do in regards to the PrettyPhoto lightbox and mobile devices? I haven’t got an iPhone to test so I would like to know if there is any extra code /scripts that I need to add please. Many thanks! (got to learn somewhere!)
Check this out: http://themeforest.net/forums/thread/prettyphoto-styling-for-small-screens/66783?page=1#588799
Thanks for that… do you think that Fancybox works better?
Right fixed that…
Can anybody tell me if simulators such as http://www.testiphone.com/ give an exact representation of things such as Lightboxes etc? Thank you!
I personally can’t recomment a lightbox as I have not used all of them. I have used fancybox (1) in the past and it was great, I can imagine 2 is only better so if I were you I would go with fancybox.
You should not be using a lightbox on small screens at all. It’s the wrong design pattern: http://bradfrostweb.com/blog/post/conditional-lightbox/
Regarding testing, if you intend to actually design for mobile devices then you must own mobile devices. You can’t simulate the dexterity of an interface on a laptop. That’s not the answer you’re looking for but you’ll never produce designs for mobile to your potential without real devices to test.
I heard that one of CC authors is working on pretty nice free lightbox script https://twitter.com/brad_frost/status/299912537078657024
Thanks for he article. For my next template I am going to look for a different solution. I’m also going to invest in an iPhone with my next Envato payment. (fingers crossed).
Don’t forget the iPod Touch is an extremely cheap way to get an iPhone for testing purposes (minus the phone).
GravityDept saidYou should not be using a lightbox on small screens at all. It’s the wrong design pattern: http://bradfrostweb.com/blog/post/conditional-lightbox/
I don’t think that article should be a rule when designing for mobile. They’re just comparing regular/desktop sites with their app alternative, not with another (responsive) site. I’m not against it, it is a viable option, but I just don’t think it should be a rule, because you definitely can have a solid lightbox for smartphones.
Here you go, my version based on João’s (unisphere) code:
/*prettyPhoto adjustments for mobile devices. 1024px is presumed widest device.*/
@media screen and (max-device-width: 1024px) {
.pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: scroll; -webkit-overflow-scrolling : touch; }
div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
.pp_content { width: 100%!important; height: auto!important; }
.pp_fade { width: 100%!important; height: 100%!important; }
a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
#pp_full_res img { width: 100%!important; height: auto!important; }
#pp_full_res { line-height: 0.7 !important; }
.pp_details { width: 94%!important; padding: 15px 3% 15px 3%; min-height: 35px; background-color: #fff; margin: 0!important; }
div.pp_default .pp_description {margin: 11px 50px 5px 153px !important; }
div.ppt { display:none !important; }
.pp_play {margin-right: 20px !important;}
.pp_arrow_previous {margin-right: 5px !important;}
}
Two notes on the code above:
-
-webkit-overflow-scrolling : touch; is used to enable native scrolling of the prettyPhoto wrapper, in Webkit browsers. You will need to add the same property to the main wrapper of your content, otherwise scrolling will get disabled in prettyPhoto (you won’t be able to even close it)
-
As is, the bar with captions, nav arrows and close button sticks to the bottom. I agree this isn’t very elegant for portrait photos, but one can easily adjust code to stick that bar to the top.
WPPixelprint saidI heard that one of CC authors is working on pretty nice free lightbox script https://twitter.com/brad_frost/status/299912537078657024
Thanks!