与图像同时更改文字

我有一张来自JSON供稿的图像幻灯片。这些图像具有从feed中获取的alt属性，但我想要在图像上显示alt的值。这不起作用，因为它只显示第一张图片中的第一个alt。与图像同时更改文字

我应该怎么做？

这行我将不得不修改：

htmlString += '<img src="' + item.url_m + '" alt="' + item.title + '"><span class="etc">"'+item.title+'"</span>';

这里是完整的代码：

$(document).ready(function() { 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var lat = position.coords.latitude; 
     var lon = position.coords.longitude; 

     var JSONURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d512a7bb4b7c0a6eb65d5095464ebf3f&format=json&privacy_filter=1&media=photos&tag=london&has_geo=1&accuracy=11&content_type=1&extras=geo,owner_name,url_m&page=1&per_page=20&radius_units=km&radius=5&lat="+lat+"&lon="+lon+"&jsoncallback=?"; 
    jQuery.getJSON(JSONURL, getJSONimages); 
    function getJSONimages(data) { 
    var htmlString = ""; 
    $.each(data.photos.photo, function(i,item){ 
     htmlString += '<img src="' + item.url_m + '" alt="' + item.title + '"><span class="etc">"'+item.title+'"</span>'; 
    });  
    $('#slideshow').html(htmlString); 
    $('#slideshow').slideshow({ 
       timeout: 3000, 
       type: 'random', 
       fadetime: 2000 
      });  
    }   
    }); 
} 
else {  

}   
    })

我已经试过这样的，但不工作？

var display_alt = $("#slideshow img").attr("alt");然后在span中显示display_alt var，但是同样的问题。

来源

2011-11-09 Chris

$("#slideshow img")选择所有#slideshow元素的后代图像。如果你想获得alt属性你需要使用类似来缩小搜索特定的图像：

$("#slideshow img").eq(1).attr('alt');//this will select the second image in the set

文档：http://api.jquery.com/eq

$("#slideshow img").eq($("#slideshow img").index(current_slide_element)).attr('alt');//this will select the image in the set that matches the element stored in the `current_slide_element` variable

文档：http://api.jquery.com/index

多次幻灯片插件将向当前幻灯片中添加一个类或将当前幻灯片索引存储在可访问的变量中。您可以使用这些方法查找当前幻灯片的索引以获取该特定幻灯片的alt标记。没有更多的信息可以获得尽可能精确的信息。

来源

2011-11-09 21:56:55 Jasper

幻灯片演示非常简单，它使用与使用的z-index的内联CSS。我理解你的观点，但我仍然不明白如何实施它，我会做更多的研究，并尝试找到一种方法来选择照片并相应地应用标题。 – Chris

这应该工作。它通过上述各<img>并复制其alt属性为<span class="etc">：

$("#slideshow img").each(function(){ 
    var alt = $(this).attr("alt"); 
    $(this).next("span.etc").html(alt); 
});

来源

2011-11-09 21:59:45

谢谢！我曾尝试将它放在循环中，之前，之后，之间，我不明白什么是错误的，即使我理解你的代码（我是一个完整的初学者，并且能够编写我迄今为止所做的在论坛和紧张研究的帮助下），我无法准确理解在何处实现它：/。 – Chris

我会被允许发表小提琴吗？ – Chris

与图像同时更改文字

回答

相关问题