Блог

У меня есть это слайд-шоу с изображениями, поступающими из канала JSON. Изображения имеют атрибут 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.searchamp;api_key=d512a7bb4b7c0a6eb65d5095464ebf3famp;format=jsonamp;privacy_filter=1amp;media=photosamp;tag=londonamp;has_geo=1amp;accuracy=11amp;content_type=1amp;extras=geo,owner_name,url_mamp;page=1amp;per_page=20amp;radius_units=kmamp;radius=5amp;lat=" lat "amp;lon=" lon "amp;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"); а затем отобразите переменную display_alt в промежутке, но опять та же проблема.

$("#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 для этого конкретного слайда. Без дополнительной информации это настолько точно, насколько я могу получить.

Это должно сработать. Он проходит через каждое из них <img> и копирует его alt атрибут в <span class="etc"> :

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