slideshow title not showing when clicking through slideshow?

Question

See my demo page here: http://intelligen.info/pro%20templates/template%20grid%20center/

I am using Nivo Lightbox plugin. I am also using CMS surreal. From a previous question I posted on here (Add the alt attribute to light box slideshow title?) I got the code below to 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?

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

This works perfectly when clicking on the individual thumbnails, then the title is displayed, however if one clicks through the slideshow the title isn't displayed anymore. How do I get the slideshow to display the titles while clicking through the slideshow?

fiddle here: http://jsfiddle.net/rabelais/MH8mu/2/

The documentation says that if you want a title to be displayed, you just have to put the text you want in the title attribute of the a tag holding your image .. isn't it what you would like to achieve ? — Stphane, Apr 08 '14 at 13:32
yes, however if you look at the previous question I asked, the reason I need the alt attribute of the image to act as the title attribute of the anchor is due to using CMS surreal. So I can't put the title in the title attribute of the a. I need it to be in the alt attribute of the image so the user can edit it through the CMS. — angela, Apr 08 '14 at 13:36

Stphane · Accepted Answer · 2015-10-21T13:35:56.020

The plugin was not designed do this properly but I managed to make things work without having to modify the lightbox code.

$(document).ready(function () {
    var navHandler = function(element){
        if(element[0])
            element = element[0][0];
        var title = $(element).children().attr('alt');
        $(element).attr('title', title);   
        $('.nivo-lightbox-overlay .nivo-lightbox-title').html(title);
    };
    $('#nivo-lightbox-demo a').nivoLightbox({
        effect: 'fade',
        beforeShowLightbox: function(){navHandler(this.el);},
        onPrev: navHandler,
        onNext: navHandler
    });
});

Fiddle updated HERE

slideshow title not showing when clicking through slideshow?

1 Answers1