• Home
  • Idea Book

Wordpress Image Captions in wp-lightbox2

November 20th, 2007

In an ideal world I would have found a Wordpress image captions plugin that just worked the way I wanted - not a perfect world I guess. Last night I struggled with Javascript and edited wp-lightbox2 so it would display any image with a link having a title attribute as a caption. This is lightweight and works great for me. here is an example:

Matt Spohn Climbing Gram Parson’s In Joshua Tree, CA

Here is how I did it:

After downloading and activating wp-lightbox open plugins/wp-lightbox/js/lightbox.js near line 350 after:

if(anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
anchor.onclick = function () {myLightbox.start(this); return false;}

Add:

//set the id attreibute
anchor.setAttribute('id', 'caption'+i);
//get the caption attribute
captionDiv = document.getElementById('caption'+i);
caption = captionDiv.title;
anchor.innerHTML+='<span class="caption">'+caption+'</span>';

Thats it! Use the class ‘caption’ in your stylesheet to edit the caption’s style.

del.icio.us Slashdot Digg Facebook Technorati Google StumbleUpon Bookmark.it Diigo Squidoo

Posted in Javascript, Web Development

2 Responses to “Wordpress Image Captions in wp-lightbox2”

  1. 1 John Marcotte
    May 9th, 2008 at 12:02 pm

    Thanks for this. But you didn’t actually do what you say you did.

    “Last night I struggled with Javascript and edited wp-lightbox2 so it would display any image’s alt attribute as a caption. This is lightweight and works great for me.”

    Your script doesn’t use the “alt” attribute from the image. It uses the “title” attribute from the link. If someone follows your directions, it doesn’t work at all.

    So you figured it out, came up with a great solution and then explained it wrong on your site.

    That’s the only reason I can think of that you haven’t gotten more comments. No one can get it to work.

    Well, it’s working for me now. So I’ll thank you again. You might want to touch up your instructions though.

  2. 2 Zach Blank
    May 10th, 2008 at 7:44 pm

    @John

    Thanks for catching that. I have fixed my explanation.






  • Just another Blog and narcissistic self esteem builder. If you think I have anything to say take a second and let me know - Post a comment - and you too can shamelessly promote yourself just as I do here. Have Fun!
  • Archives

    • May 2008
    • April 2008
    • March 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • July 2007
  • Categories

    • Advertising
    • APIs
    • Cool Shit
    • CSS
    • Cyber Culture
    • Digital Marketing Conference
    • Idea Book
    • Javascript
    • Live
    • MySQL
    • Rant
    • Tools
    • Uncategorized
    • Web Development
    • Wordpress
  • Blogroll

    • 1 + 1 = 11
    • A List Apart
    • A Moment of Wonderful
    • Dave Shea
    • Deb Morrison
    • Logic + Emotion
    • Love is a Verb
    • Mashable
    • Micro Persuasion
    • Photomatt
    • Professor Christy’s Blog
    • Step into my World…
    • Straight Up With BK
  • Tags

    AJAX API Book Class Cool CSS Facebook FedEx Flash geocoding Google Google Maps ID Idea Book Images Innovation iPhone Javascript Jonathan Harris JSON Life MySQL News OpenSource Overview PackMapr PEAR HTTP_Request PHP Pingdom Politics Programming RSS School Starbucks Stats Tools Tutorial University of Oregon UPS USPS Web Trends Weiden + Kennedy What if Wordpress youTube

Powered by Wordpress | Design by Zach Blank
XHTML Strict | RSS Entries