How to Remove a Title Over an Image on Lightbox

Save

A variety of jQuery lightbox plugins exist that allow you to display images and galleries in a styled window that overlays your website. Depending on the way the lightbox was programmed, it may include features such as navigation arrows, descriptions or titles. Hiding any one of these options is also dependent on the lightbox plugin and how it was designed. In the case of the original jQuery lightBox plugin, hiding the image title or caption can be done through the CSS style-sheet or through editing the JavaScript file.

Modify Title Using CSS

  • Open the CSS style-sheet that was packaged with your lightbox plugin. For jQuery lightBox, you would open the "jquery.lightbox.css" file located in the "css" folder.

  • Locate the selector pertaining to your lightbox title or caption container. If you are not sure which selector to choose, use Opera or Firebug for Firefox and right-click the text you want to hide.

  • Choose "Inspect Element" to view the snippet of code related to the text area, and make note of the ID or class assigned to the span or div. For example, jQuery lightBox uses "#lightbox-image-details" and "#lightbox-image-details-caption." Copy these styles into your website's main CSS style-sheet.

  • Add a line to each class with a "display:none" rule. This will effectively hide the element in most cases. Since CSS tricks are unpredictable across all browsers, results may vary. If hiding the element does not work, add a line to each class with a negative "text-indent" value. This CSS trick will push any text in the element far outside of the element borders. Make sure each change you make is appended with "!Important" to tell the browser to use your style declaration instead of the script's default. For example:

    lightbox-container-image-data #lightbox-image-details {
    width: 70%;

    float: left;

    text-align: left;

    display: none !important;

    text-indent: -9999px !important;

    }

  • Change the background color or background attribute of the class to "none" if your image title or description container is overlaying your images. For example:

    lightbox-container-image-data-box {
    font: 10px Verdana, Helvetica, sans-serif;

    background-color: none !important;

    margin: 0 auto;

    line-height: 1.4em;

    overflow: auto;

    width: 100%;

    padding: 0 10px 0;

    }

Tips & Warnings

  • Replace titles on your images with "alt" text instead. This is considered a better practice than using CSS hacks or altering your JavaScript file and is less likely to cause strange visual effects in older browsers. Always keep a backup of your original style-sheet in case you make a change you cannot reverse. Some lightbox scripts contain a "titleShow" attribute in the initialization script, or the main JavaScript file which can simply be changed to "false." This is not present in all scripts however, and will be overwritten if you update the script, therefore creating custom styles is often more foolproof.

References

  • Photo Credit Brand X Pictures/Brand X Pictures/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!