How can I add alternative text in thumbnail and big image with 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>
To add alt text to a picture, shape, chart, or SmartArt graphic, right-click on the object and choose Format Picture. In the Format Picture panel, choose the Layout and Properties icon. Then choose Alt Text. Add a title for your object, then a description.
The <img> alt attribute is used to specify the alternate text for an image. It is useful when the image not displayed. It is used to give alternative information for an image.
Right-click an image. Select Format Picture > Layout & Properties icon. Select Alt Text. Type a description (Title is optional).
ALT attribute (HTML) – In HTML, the ALT text is inserted into the ALT attribute within the IMG tag. ALT “Tag” – Shorthand reference to the ALT attribute.
You can do that by adding a data
attribute to your img
tag.
For example data-layer
will write a caption on your image.
Example usage:
<img data-layer="my caption" src="image.jpg" >
Source: http://galleria.io/docs/references/data/
EDIT
To add alt
attribute for SEO optimisation to images in galleria:
html: <img alt="My SEO optimized alt tag" src="image.jpg" >
To add them to your images in 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;
});
});
});
I hope this helps you on your way.
source: http://support.galleria.io/discussions/problems/645-alt-tags-missing-from-folio-thumbnails
working example: http://embed.plnkr.co/nnTFw5SkUYeYZP6I9hqb/preview
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With