向 Galleria 灯箱添加替代文字答案

【问题标题】：Add alt text to Galleria lightbox向 Galleria 灯箱添加替代文字
【发布时间】：2012-10-18 04:39:29
【问题描述】：

我在 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]

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

如果可能的话，我希望能够显示标题后跟替代文本，例如。 “我的图片标题：我的替代文字”。我知道我需要定位的 div 容器是.galleria-lightbox-info，其中是.galleria-lightbox-title。我想我需要在其中添加另一个名为 .galleria-lightbox-alt 的 div？我似乎在我的 wordpress 文件夹中的任何地方都找不到与 Galleria 相关的任何文件（php、js、css 等）！

【问题讨论】：

插件的文件应该在/wp-content/plugins.

标签： wordpress galleria

【解决方案1】：

我知道您在 2012 年发布了此内容，但这是您问题的答案。我必须让这个工作符合 WCAG 合规性。我实际上使用的是 ASP.NET，所以是占位符。只需将其添加到您使用 Galleria 工具的页面。我在结束正文标记之前编写了脚本。最大的收获是 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%>');
     });
 });

【讨论】：