Galleria slideshow api - find the current image's alt text

Question

I'm implementing the Galleria slideshow on a site and I've got it working fine for the most part. I'm working with the api to customize the appearance of my slideshow and I want to get the alt text from the image and display in a div (I'm just logging to the firebug console for now)

Here's the script I wrote:

<script type="text/javascript">
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
    $("#gallery").galleria({
        width: 420,
        height: 370,
        autoplay: 5000, // will move forward every 5 seconds
        extend: function(options) {
            var gallery = this; // "this" is the gallery instance

            this.bind("loadstart", function(e) {
                var currImg = gallery.getActiveImage();
                var altText = $(currImg).attr('alt');
                console.log(altText);
            });
        }
    });
</script>

Seems that this would work, but I'm getting "undefined" in the console. Does anyone know how to get the alt text from a "Galleria" image? The API documentation says that the .getActiveImage() method returns an returns IMG Element, so I'm not sure if I'm working with the IMG element in the proper way or if it even has the alt text available for me to grab.

I also tried using my image ID, which is

('slideshow_image_' + e.index)

but that also gave me an undefined result in the log.

I know there is an element in the HTML that is called slideshow_image_0, etc, and I would think that it would be easy to find the alt text by element ID and display it. If I look at firebug's HTML tab, the whole div is completely different and the images are dynamically populated into the sections by galleria. Not sure what to do... please help!

Answer 1

You need to bind a method that's called when image change.

Also getActiveImage() is not quite useful, as getData is. The following piece of code, prints in console the ALT you wanted, and the title, just in case you want.

Try this:

$("#gallery").galleria({
        width: 420,
        height: 370,
        autoplay: 5000, // will move forward every 5 seconds
        extend: function(options) {
            var gallery = this; // "this" is the gallery instance

            this.bind(Galleria.IMAGE, function(e) {
                var current = gallery.getData(gallery.getIndex());
                var currImg = current.original;
                var altText = $(currImg).attr('alt');
                console.log(altText, current.title);
            });
        }
    });