Add the alt attribute to light box slideshow title?

Question

1. 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 slideshow are given in the anchor tag that surrounds the image tag, with the title attribute declaring the title displayed on the slideshow:

    <a href="images/1.jpg" title="Untitled 2013" data-lightbox-gallery="gallery1"><img     src="images/1.jpg" /></a>
   

2. The CMS editor only gives the client the option to edit the alt attribute of the image. Therefore I need to swap the title attribute of the anchor to the alt tag of the image.

Question: How can I make the title of the slideshow link to the alt attribute of the image tag instead of the title attribute of the anchor surrounding it?

Answer 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/

Answer 2

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

Answer 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')); }