Add alt text to Galleria lightbox

1 Views

I’m using the Galleria slideshow in WordPress 3.0 (inFocus 3.0 theme). Currently each slide in the slideshow has 2 captions – the title, and an alt text. The wp shortcode is: [image title="My title" alt="My alt text"]http://www.mywebsite.com/wp-content/uploads/myimage.jpg[/image]

Clicking the image launches a lightbox that displays the image title (bottom left) and a slide count(bottom right).

Read More

If possible I’d like to be able to display the title followed by the alt text eg. “My image title: My alt text”. I know the div container I need to target is .galleria-lightbox-info, within which is .galleria-lightbox-title. I guess I need to add another div in there called .galleria-lightbox-alt? I can’t seem to find any files (php, js, css etc) relating to galleria anywhere in my wordpress folders!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. I know you posted this in 2012, but here is the answer to your question. I had to get this working for WCAG compliance. I am actually using ASP.NET so the <%=Name%> are place holders. Simple add this to the page where you are using the Galleria Tool. I have it scripted before the closing body tag. The big catch is the setTimeout, because you have to give the light-box time to load.

     Galleria.ready(function () {
        this.bind('image', function (e) {
        // UNCOMMIT FOR TESTING // console.log(this); // the gallery scope                        
        $('.galleria-image').find('img').attr('alt', '<%=Name%>');
        });
        this.bind('thumbnail', function (e) {
        // add alt to thumbnails image
        e.thumbTarget.alt = e.galleriaData.original.alt + " ThumbNail(s)";
        });                                    
        $('.galleria-image').mouseup(function () {
           setTimeout(function () {
          $('div.galleria-lightbox-image').children().children().attr('alt', '<%=Name%>');
          }, 5000);
        });                                   
        $('.galleria-lightbox-prevholder').click(function () {
        $('div.galleria-lightbox-image').children().children().attr('alt', '<%=Name%>');
     });
     $('.galleria-lightbox-nextholder').click(function () {
     $('div.galleria-lightbox-image').children().children().attr('alt', '<%=Name%>');
     });
 });