2011-11-09 9 views
1

このスライドショーは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.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をスパンに表示しますが、同じ問題です。

答えて

0

$("#slideshow img")は、#slideshow要素の子孫であるすべてのイメージを選択します。

$("#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属性を取得したい場合は、何かなどを使用して検索結果を絞り込む必要があります現在のスライドにクラスを追加したり、現在のスライドインデックスをアクセス可能な変数に格納したりします。これらのメソッドを使用して、現在のスライドのインデックスを検索して、その特定のスライドのaltタグを取得することができます。もっと正確な情報がなければ、私は得ることができるほど正確です。

+0

私のスライドショーは非常に簡単であり、それはZインデックスを使用してインラインCSSを使用しています:それは<span class="etc">に各<img>コピーそのalt属性を通過します。私はあなたの意見を理解していますが、まだ実装方法を理解していないので、さらに調査を行い、写真を選択し、それに応じてタイトルを適用しようとします。 – Chris

0

これは動作するはずです。

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

ありがとう!私は自分のループを、前、後、間に置いてみましたが、何が間違っているのか分かりませんし、あなたのコードを理解しても(私は完全な初心者です。フォーラムや激しい研究の助けを借りて)、私はそれをどこで実装するのかを正確に理解することはできません。 – Chris

+0

私はフィドルを投稿できますか? – Chris

関連する問題