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