如何使用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>
您可以通过向img
标记添加data
属性来实现这一点。
例如,data-layer
将在您的图像上写一个标题。
示例用法:
<img data-layer="my caption" src="image.jpg" >
来源:https://galleriajs.github.io/docs/references/data.html
为galleria:中的图像添加用于SEO优化的alt
属性
html:<img alt="My SEO optimized alt tag" src="image.jpg" >
将它们添加到galleria中的图像中:
$(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在我的示例代码中报告了一个错误并提供了一个解决方案
向对象添加文本:
$("#galleria").append("your text here");
并将HTML对象设置为图像:
$("#id").html('<img="path/to/your/file.png"/>);