740 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
+7 more
josweb says

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

1476 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
OriginalEXE says
740 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
+7 more
josweb says

Thanks for that… do you think that Fancybox works better?

740 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
+7 more
josweb says

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

1476 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
OriginalEXE says

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.

588 posts Magento Elite & Gravity Maker
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+3 more
GravityDept says

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.

8 posts
  • Has been part of the Envato Community for over 1 year
  • Has collected 1+ items on Envato Market
WPPixelprint says

I heard that one of CC authors is working on pretty nice free lightbox script https://twitter.com/brad_frost/status/299912537078657024

740 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
+7 more
josweb says

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

588 posts Magento Elite & Gravity Maker
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+3 more
GravityDept says

Don’t forget the iPod Touch is an extremely cheap way to get an iPhone for testing purposes (minus the phone).

2445 posts
  • Has referred 100+ members
  • Has sold $100+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
digitalimpact says

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/

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:

1. -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)

2. 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.

by
by
by
by
by
by