Add the alt attribute to light box slideshow title?

Question

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>
```
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?

n1kkou · Answer 1 · 2014-04-08T11:37:44.633

0

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

edited Apr 08 '14 at 11:37

answered Apr 08 '14 at 11:23

n1kkou

3,096
2
21
32

1

`$('[data-lightbox-gallery] img').each(function(){$(this).attr('alt', $('[data-lightbox-gallery] img').parent().attr('title'));})` – n1kkou Apr 08 '14 at 11:27

score 0 · Answer 2 · answered Apr 08 '14 at 11:26

0

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.

answered Apr 08 '14 at 11:26

IProblemFactory

9,551
8
50
66

Irvin Dominin · Accepted Answer · 2014-04-08T12:39:34.250

0

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/

edited Apr 08 '14 at 12:39

answered Apr 08 '14 at 11:59

Irvin Dominin

30,819
9
77
111

thanks, I am trying to use your code however it's not working for me. Perhaps you can have a look at my page and see what I am doing wrong http://intelligen.info/pro%20templates/template%20grid%20center/ – angela Apr 08 '14 at 12:22
@angela Ok, I see that the legend is not created, can you try so set an value in title attribute? – Irvin Dominin Apr 08 '14 at 12:27

Add the alt attribute to light box slideshow title?

3 Answers3

Linked