首页 文章

将alt文本添加到Galleria灯箱

提问于
浏览 次
2

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

单击图像将启动一个显示图像 Headers （左下角）和幻灯片计数（右下角）的灯箱 .

如果可能的话，我希望能够显示 Headers ，然后是alt文本，例如 . "My image title: My alt text" . 我知道我需要定位的div容器是 .galleria-lightbox-info ，其中 .galleria-lightbox-title . 我想我需要在那里添加另一个名为 .galleria-lightbox-alt 的div？我似乎无法在我的wordpress文件夹中的任何地方找到与galleria相关的任何文件（php，js，css等）！

wordpress galleria

1 回答

  • 0

    我知道你在2012年发布了这个，但这里是你的问题的答案 . 我必须让这项工作符合WCAG标准 . 我实际上使用ASP.NET所以 <%=Name%> 是占位符 . 简单地将此添加到您使用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%>');
     });
 });
    回复于

相关问题