Galleria幻灯片api - 找到当前图片的替代文字

时间:2011-03-03 01:35:51

标签: jquery css dom slideshow galleria

我正在网站上实施Galleria幻灯片,我在大多数情况下都能正常工作。我正在使用api来自定义幻灯片的外观,我想从图像中获取alt文本并显示在div中(我现在只是登录到firebug控制台)

这是我写的剧本:

<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>

似乎这会起作用,但我在控制台中“未定义”。有谁知道如何从“Galleria”图像中获取alt文本? API文档说.getActiveImage()方法返回一个返回IMG元素,所以我不确定我是否以正确的方式使用IMG元素,或者它是否有我可以抓取的替代文本。

我也尝试使用我的图像ID,即

('slideshow_image_' + e.index)

但是这也在日志中给了我一个未定义的结果。

我知道HTML中有一个名为slideshow_image_0等的元素,我认为按元素ID查找alt文本并显示它很容易。如果我查看firebug的HTML选项卡,整个div是完全不同的,并且图像被galleria动态填充到这些部分中。不知道该怎么做......请帮忙!

1 个答案:

答案 0 :(得分:5)

您需要绑定在图像更改时调用的方法。

getActiveImage()也不是很有用,因为getData是。下面的一段代码,在控制台中打印出你想要的ALT,以及标题,以防你想要。

试试这个:

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