Изменить текст одновременно с изображением - PullRequest
Новая
       9

Изменить текст одновременно с изображением

1 голос
/ 10 ноября 2011

У меня есть это слайд-шоу с изображениями из ленты JSON. Изображения имеют атрибут 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"); и затем отобразите display_alt var в промежутке, но опять та же проблема.

Ответы [ 2 ]

0 голосов
/ 10 ноября 2011

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

$("#slideshow img").each(function(){
  var alt = $(this).attr("alt");
  $(this).next("span.etc").html(alt);
});
0 голосов
/ 10 ноября 2011

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

...