WordPress.org

Ready to get started?Download WordPress

Forums

Lightbox Gallery
Caption overlapping "Image x/y" (10 posts)

  1. aliastephen
    Member
    Posted 1 year ago #

    Some of my captions are quite long (and need to be), and when they get to a certain length they start overlapping with the image x/y in the bottom left corner.
    for example, see the first image in this gallery: http://www.aliastephen.com/lighting-design-portfolio/two-merchants/

    I've been trying to fix it by changing things in the lightbox-gallery/lightbox-gallery.css editor, but I haven't found the exact section to edit.

    I'm not very literate in CSS but usually common sense will take me to eventually getting what I want, but this time I haven't found it. That being said, the editor says that lightbox-galler.css is inactive, and I'm not sure what that means exactly.

    Thanks!

    http://wordpress.org/extend/plugins/lightbox-gallery/

  2. mo-ment
    Member
    Posted 1 year ago #

    The same problem.

  3. Susie Brew
    Member
    Posted 1 year ago #

    And me -

  4. Web2Guru
    Member
    Posted 1 year ago #

    I had the same issue. Here is what I did and other things you can do to get different designs.

    Add the styles below to your stylesheet, this will move the text up a little so that it covers the very bottom edge of the image, with a semi-transparent background and darker text.

    #cboxTitle {
        background-color: white;
        bottom: 28px;
        color: #444444;
        opacity: 0.8;
        padding: 4px 0;
    }

    For a more transparent look, you could make the text color completely black (#000000) and lower the opacity to maybe 0.7 or even 0.6. This also affects the text transparency so any lower starts to make it too hard to read.

    If you want to go completely transparent, remove the background-color and opacity setting, and I would suggest adding a white text-shadow, something like "text-shadow: 1px 1px 1px #ffffff;" (adjust the px to get different shadow position and blur).

    To put the text across the top instead of the bottom, replace "bottom: 28px;" with "top: 0;" and add "height: 12px;".

    For long text that wraps to two (or more) lines, adjust the bottom position higher or height higher by 16 for each additional line (two lines = 28px), and add "line-height: 14px;".

    You can adjust the height, line-height, and padding to get more or less spacing around the line(s) of text, something like "padding: 6px 0; height: 14px; line-height: 16px;" might look good.

    Of course, there might be some differences depending on your theme too, so keep adjusting until you get it like you want.

  5. Susie Brew
    Member
    Posted 1 year ago #

    Hi Web2Guru - many thanks indeed for your help. I have inserted this code and removed the code that was there for the cboxTitle line in the lightbox css file. This has now had the effect of only displaying the image number and not the description or title (e.g. image 19 of 22). Both would be nice (but not on top of one another!) but the title is probably more important. Do you know what I need to change to get this information displaying? Sorry - I'm a bit of a beginner to wordpress so am treading very carefully! Many thanks, Susie
    http://www.wiltonwindmill.co.uk/photo-gallery

  6. Web2Guru
    Member
    Posted 1 year ago #

    I did not remove the code from the lightbox css file. It contains additional styles that are needed. The styles I used overwrite or add on to those styles.

    In my case, I am not using the image title and description, I have inserted a gallery and have set the captions. So there may be some differences in this case. I will review the title and descriptions later today to see what differences there are.

  7. Susie Brew
    Member
    Posted 1 year ago #

    Thanks Web2Guru - I have reinstated the original code and this works well.

  8. valeriacordero
    Member
    Posted 11 months ago #

    Hello, I am having a problem with the menu text overlapping the image on the gallery.
    http://vaearts.org/US/archives/1096
    if you click on the first image you will see the items from the main menu show in the center of the image when the gallery pops up.
    if anyone can help me solve this problem I would really appreciate it.
    many thanks.

  9. Web2Guru
    Member
    Posted 11 months ago #

    @valeriacordero, I do not see the problem. I do not see the main menu and I do not see any caption text. Let us know if you have already fixed it.

    If this is not related to the original problem posted here, please start your own topic.

  10. valeriacordero
    Member
    Posted 11 months ago #

    Thank you Web2Guru, i am sorry i didnt mentioned it here. I was able to fix it today by updating the lightbox gallery plugin. many thanks for your time and attention. best.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic