New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Lightbox Notes

To add Lightbox functionality to any single image:

  1. Add rel="lightbox" to the anchor tag.
  2. Add a title="" attribute to the anchor tag.
  3. Add an alt="" attribute to the image tag.

To add Lightbox functionality to any series of images:

  1. Add rel="lightbox[value]" to the anchor tag of each image.
  2. Add a title="" attribute to the anchor tag of each image.
  3. Add an alt="" attribute to the image tag of each image.
  4. Any set of pictures with the same rel="lightbox[value]" will display with nav buttons.

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
Digging Into WordPress: Take your WordPress skills to the next level.

2 responses to “Lightbox Notes”

  1. What causes dotted/dashed lines to show across the images while being displaying in lightbox once next or previous is selected?

    Is there a fix for this?

  2. Jeff Starr

    What do the lines look like? My ability to help you would be greatly improved if you were to provide a link to a page that demonstrates the issue you are describing.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Digging Into WordPress: Take your WordPress skills to the next level.
Thoughts
Book updates complete! DigWP, .htaccess, Tao-WP, and WP Themes books all updated and current with all the latest.
Stop giving so much juice to social media. Get a site and OWN your content.
I would give my left testicle for macOS Finder to remember column widths.
The chemical name for titin (the largest known protein) has 189,819 characters and takes several hours to pronounce.
Working on book updates, should be available for download sometime next week.
iCloud is like the Terminator. It will never stop trying to get your data. An endless fight on each Apple device to keep iCloud disabled and empty.
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.