Add The Alt Attribute To Light Box Slideshow Title?

I am using Nivo Lightbox plugin. I am also using CMS surreal. I want the clients to be able to change the title of the images in the Nivo Lightbox slideshow. The titles to the sli

Solution 1:

I can't find any option in the plugin; without any change to the HTML (or DOM changes) my actual solution (but I think can be improved) is to use the beforeShowLightbox and afterShowLightbox events to get the child img alt attribute and set it in the lightbox title.

Code:

var altText;
$(document).ready(function () {
    $('#nivo-lightbox-demo a').nivoLightbox({
        effect: 'fade',
        beforeShowLightbox: function () {
            altText = $($(this)[0].el).find('img').prop('alt');
        },
        afterShowLightbox: function (light) {
            if (altText!=="") $($(light)[0]).find('.nivo-lightbox-title').html(altText);
        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/MH8mu/

Solution 2:

To not change CMS neither Lightbox plugin code, I would use watchplugin to get noticed whenever alt attribute has changed and after that change title attribute.

Solution 3:

with jquery: $('[data-lightbox-gallery] img').attr('alt', $('[data-lightbox-gallery] img').parent().attr('title'));

Later edit: i don't know if i missunderstood you, but seems like you wanted the exactly reverse thing i've wrote:

$('[data-lightbox-gallery]').each(function(){ $(this).attr('title', $(this).children('img').attr('alt')); }