How to add alternative text to .galleria?

Question

How to add alternative text to thumbnail and large image using 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.imtqy.com/images/icon-stackoverflow.svg"> <img src="http://veithen.imtqy.com/images/icon-stackoverflow.svg" /> </a> </div> 

Answer 1

You can do this by adding the data attribute to the img tag.

For example, a data-layer will write an inscription on your image.

Usage example:

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

Source: http://galleria.io/docs/references/data/

EDIT

Add alt attribute to optimize SEO for images in the gallery:

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

To add them to your images in the gallery:

 $(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; }); }); }); 

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

• the answer is updated thanks to @gsinha for reporting an error in my sample code and providing a solution.

Answer 2

Add text to object:

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

and set the image for the HTML object:

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