如何使用 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>

最佳答案

您可以通过向 data 标签添加 img 属性来实现。

例如 data-layer 会在你的图片上写一个标题。

用法示例:

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

资料来源:http://galleria.io/docs/references/data/

编辑

将用于 SEO 优化的 alt 属性添加到 Galleria 中的图像:

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 报告了我的示例代码中的错误并提供了解决方案,从而更新了
  • 答案。
  • 关于jquery - 如何在 .galleria 中添加替代文本?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25666589/

    10-12 12:53
    查看更多