How do I add alternative text in .galleria?

Question

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>

Retch

Nice Stack Overflow icon. – Provencher

Answer 1

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: https://galleriajs.github.io/docs/references/data.html

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

• answer updated thanks to @gsinha for reporting a bug in my sample code and providing a solution.

Bilingual

Thanks for this, but which data attribute is used for set alternate aatribute for an image. I don't want to set title/caption I want to add alternate text for an image for SEO. – Retch

@KaushaMehta , according to your comment i have edited my answer. – Bilingual

I added the code you given but not getting alternate text. – Retch

I refer the link you given and it working.... Thank you so much for help. And if you found that this is a good question then please vote up my question too... Once again Thanks. :) – Retch

Answer 2

Add Text to an object:

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

and set a HTML-Object to a Image:

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

Kohima