Question

如何使用jquery.galleria.js在缩略图和大图像中添加替代文字？

$(window).load(function() {
      Galleria.loadTheme('http://www.bulogjatim.com/wp-content/themes/duotive-fortune/js/jquery.galleria.template.js');
      $("#galleria").galleria({
        width: 880,
        height: 439,
        transition: 'fadeslide'
      });
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="galleria" class="galleria-wrapper">
  <a class="image-wrapper" href="http://veithen.github.io/images/icon-stackoverflow.svg">
    <img src="http://veithen.github.io/images/icon-stackoverflow.svg" />
  </a>
</div>

Answer 1

您可以通过在data代码中添加img属性来实现这一目标。

例如data-layer会为您的图片写一个标题。

使用示例：

    <img data-layer="my caption" src="image.jpg" >

来源：http://galleria.io/docs/references/data/

修改

将SEO优化的alt属性添加到广场中的图片：

html：<img alt="My SEO optimized alt tag" src="image.jpg" >

将它们添加到广场的图像中：

$(document).ready(function() { Galleria.loadTheme('/js/jquery.galleria.template.js'); Galleria.run('.galleria'); Galleria.ready(function() { this.bind('image', function(e) { // add alt to big image e.imageTarget.alt = e.galleriaData.original.alt; }); this.bind('thumbnail', function(e) { // add alt to thumbnails image e.thumbTarget.alt = e.galleriaData.original.alt; }); }); });

我希望这能帮到你。

来源：http://support.galleria.io/discussions/problems/645-alt-tags-missing-from-folio-thumbnails

工作示例：http://embed.plnkr.co/nnTFw5SkUYeYZP6I9hqb/preview

回答更新，感谢@gsinha报告我的示例代码中的错误并提供解决方案。

Answer 2

向对象添加文字：

$("#galleria").append("your text here");

并将HTML-Object设置为Image：

$("#id").html('<img="path/to/your/file.png"/>);

如何在.galleria中添加替代文本？

2 个答案: