Question

我在WordPress 3.0（inFocus 3.0主题）中使用Galleria幻灯片演示。目前，幻灯片中的每张幻灯片都有2个标题 - 标题和替代文字。 wp短代码为：[image title="My title" alt="My alt text"]http://www.mywebsite.com/wp-content/uploads/myimage.jpg[/image]

单击图像会启动一个显示图像标题（左下角）和幻灯片计数（右下角）的灯箱。

如果可能，我希望能够显示标题，然后是alt文本，例如。＆＃34;我的图片标题：我的替代文字＆＃34;。我知道我需要定位的div容器是.galleria-lightbox-info，其中.galleria-lightbox-title。我想我需要在那里添加另一个名为.galleria-lightbox-alt的div？我似乎无法在我的wordpress文件夹中找到任何与galleria相关的文件（php，js，css等）！

Answer 1

我知道你在2012年发布了这个，但这里是你问题的答案。我必须让这项工作符合WCAG标准。我实际上使用的是ASP.NET，因此＆lt;％= Name％＆gt; 是占位符。简单地将此添加到您使用Galleria工具的页面。我在关闭body标签之前编写了脚本。最大的问题是setTimeout，因为你必须给灯箱加载时间。

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

将alt文本添加到Galleria灯箱

1 个答案: