PrettyPhoto overlay exceeds image height

8 posts from 4 voices

• Started 7 months ago by nuforms
• Latest reply from Dude
• This topic is resolved

Tags:

• prettyphoto overlay image

1. 

   nuforms
   Member

   Hello support team!

   I found one small thing that is really annoying and I tried to find css and js solution for it with no success.

   PrettyPhoto overlay exceeds image height in 6px
   You can see it here on top image of demo site with latest Choices 1.5 and dummy data:
   http://demo.nuforms.com/nfwp/

   What I did:
   1) Inserted into post image linked to itself through WordPress
   2) Added rel="lightbox" to a tag

   Here is the code:

   <a href="http://demo.nuforms.com/nfwp/wp-content/uploads/2012/04/0133.jpg" rel="lightbox"><img src="http://demo.nuforms.com/nfwp/wp-content/uploads/2012/04/0133.jpg" alt="" title="013" /></a>

   I tried different images and result always the same: there is 6px on the bottom overlay that looks not so pretty.
   I know it's possible to apply css with overlay:false; to outer div with certain height, but I'ts bad if you have different images with different height..

   Can you please help.

   Thanks,
   Aleksandr

   Posted 7 months ago #
2. 

   Nick
   Moderator

   Hi,

   Please add this to your Quick CSS.
   

   .lightbox_video, .lightbox_image, .image_overlay_effect, .image_overlay_effect_inside {height: 99%;}
    }
    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .lightbox_video, .lightbox_image, .image_overlay_effect, .image_overlay_effect_inside {height: 99%;}
    }
    @media only screen and (max-width: 767px) {
     .lightbox_video, .lightbox_image, .image_overlay_effect, .image_overlay_effect_inside {height: 98%;}
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
     .lightbox_video, .lightbox_image, .image_overlay_effect, .image_overlay_effect_inside {height: 98%;}
   }
    @media only screen and (max-width: 479px) {
     .lightbox_video, .lightbox_image, .image_overlay_effect, .image_overlay_effect_inside {height: 96%;}
   }

   Thanks,

   Nick

   Posted 7 months ago #
3. 

   nuforms
   Member

   Hi Nick,

   I'm sorry, but this fix doesn't work, now it's shorter.
   http://demo.nuforms.com/nfwp/

   You adjusted overlay image to one size, but it's dirty fix that doesn't solve the bug.
   It really strange that native WordPress image inserting doesn't work properly with PrettyPhoto.

   Hope you can provide common fix for this problem.

   Thanks,
   Aleksandr

   Posted 7 months ago #
4. 

   Devin
   Moderator

   Hi Aleksandr,

   I've tagged the post for Peter to take a look at as he is much more familiar with prettyPhoto and should be able to give some input on what the best solution would be in the long term.

   Regards,

   Devin

   Posted 7 months ago #
5. 

   nuforms
   Member

   Hi Devin,

   Thanks, waiting for the fix.

   As I see there are many fixes individually done in Choices thread.
   I wonder, will there be a new Choices version? Hope it is so.

   Thanks,
   Aleksandr

   Posted 7 months ago #
6. 

   Dude
   Dude

   Hey!

   Try to add following code to css/custom.css:

   a[rel^="lightbox"]{
       font-size: 1px;
       line-height: normal;
   }

   Regards,
   Peter

   Posted 7 months ago #
7. 

   nuforms
   Member

   Hey Dude,

   Thanks, seems it did the job :)
   Do you have any news regarding new Choices version?

   BR,
   Aleksandr

   Posted 7 months ago #
8. 

   Dude
   Dude

   Hey!

   Yes, Kriesi released his new theme Incarnation a few days ago and he'll take care of the theme updates now.

   Best regards,
   Peter

   Posted 7 months ago #

RSS feed for this topic

Reply

You must log in to post.