712 posts
  • Elite Author
  • United Kingdom
  • Sold between 100 000 and 250 000 dollars
  • Author had a File in an Envato Bundle
  • Most Wanted Bounty Winner
  • Exclusive Author
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Referred between 200 and 499 users
+2 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!)

1400 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says
712 posts
  • Elite Author
  • United Kingdom
  • Sold between 100 000 and 250 000 dollars
  • Author had a File in an Envato Bundle
  • Most Wanted Bounty Winner
  • Exclusive Author
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Referred between 200 and 499 users
+2 more
josweb says

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

712 posts
  • Elite Author
  • United Kingdom
  • Sold between 100 000 and 250 000 dollars
  • Author had a File in an Envato Bundle
  • Most Wanted Bounty Winner
  • Exclusive Author
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Referred between 200 and 499 users
+2 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! :)

1400 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
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.

541 posts Magento Elite & Gravity Maker
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has been a member for 4-5 years
  • Referred between 50 and 99 users
  • Bought between 1 and 9 items
  • Exclusive Author
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
  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
WPPixelprint says

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

712 posts
  • Elite Author
  • United Kingdom
  • Sold between 100 000 and 250 000 dollars
  • Author had a File in an Envato Bundle
  • Most Wanted Bounty Winner
  • Exclusive Author
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Referred between 200 and 499 users
+2 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). :)

541 posts Magento Elite & Gravity Maker
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has been a member for 4-5 years
  • Referred between 50 and 99 users
  • Bought between 1 and 9 items
  • Exclusive Author
GravityDept says

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

2429 posts
  • Has been a member for 4-5 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Microlancer Beta Tester
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