momentan programmiere ich fleißig an meiner Galerie, wo auch die Exif-Daten der Bilder angezeigt werden sollen.
Hierbei werden die einzelnen Daten (Dateiname, Exif-Daten) in XML abgespeichert und mit JavaScript ausgelesen.
Damit nicht bei jedem Öffnen eines Bildes ein Ajax-Request an den Server gesendet werden muss, lese ich die XML-Datei beim erstmaligen Laden der Webseite und speichere diese in zwei assoziativen Arrays, für den späteren Gebrauch. Array 1 (image) ist hierbei für den Bildnamen und zeigt auf Array 2 (exif), welches die Exif-Daten des Bildes enthält.
Die Struktur der Arrays ist wie folgt:
exif["camera"] = "Kameraname";
exif["lens"] = "Objektivname";
... usw ...
image["bildname"] = exif;
Ich möchte die Daten später so ansprechen können:
image["0_1"]["camera"]
Soviel zur Theorie. In der Praxis funktioniert es nicht ganz so, wie ich es möchte.
Die XML-Datei sieht zum Beispiel so aus:
- Code: Alles auswählen
<?xml version="1.0" ?>
<gallery>
<image file="0_1">
<exif>
<camera>Nikon D700</camera>
<lens>Nikkor 50mm f1.4G AF-S</lens>
<mm>50</mm>
<f>1.4</f>
<s>1/2000</s>
<iso>200</iso>
</exif>
</image>
<image file="0_2">
<exif>
<camera>Nikon D90</camera>
<lens>Nikkor 18-105mm f3.5-5.6 VR</lens>
<mm>18</mm>
<f>3.5</f>
<s>1/125</s>
<iso>1000</iso>
</exif>
</image>
<image file="0_3">
<exif>
<camera>Nikon D80</camera>
<lens>Sigma 17-35mm f2.8-4 HSM</lens>
<mm>17</mm>
<f>11</f>
<s>1/60</s>
<iso>200</iso>
</exif>
</image>
<image file="0_4">
<exif>
<camera>Nikon D70</camera>
<lens>Nikkor 50mm f1.4G AF-S</lens>
<mm>50</mm>
<f>2.8</f>
<s>1/1000</s>
<iso>200</iso>
</exif>
</image>
</gallery>
und so lese ich das aus:
- Code: Alles auswählen
// Build arrays for exif-data
function getExifs(xmlFile){
var image = new Array();
var exifData = new Array();
$.ajax({ url : "templates/gallery/"+xmlFile+".xml",
async : false,
success : function(xml){
$("image", xml).each(function(){
exifData["camera"] = $(this).find("camera").text();
exifData["lens"] = $(this).find("lens").text();
exifData["mm"] = $(this).find("mm").text();
exifData["f"] = $(this).find("f").text();
exifData["s"] = $(this).find("s").text();
exifData["iso"] = $(this).find("iso").text();
image[$(this).attr("file")] = exifData;
console.log("CurrentState: image["+$(this).attr("file")+"] = "+image["0_1"]["camera"]);
});
console.log("image.length: "+image.length);
}
});
return image;
}
// get EXIF data
var exifs = getExifs("city");
Somit müsste ich über exifs[imageId]["camera"] die Daten für jedes Bild dynamisch abrufen können.
Die Ausgabe sieht dann so aus:
- Code: Alles auswählen
// show EXIFs, var i is the current image number
$('div#exifsWrapper').html('<div class="exifs"><b>Exif-Data:</b> '+exifs[i]['camera']+' + '+exifs[i]['lens']+' | '+exifs[i]['mm']+' mm | f/'+exifs[i]['f']+' | '+exifs[i]['s']+' s | ISO '+exifs[i]['iso']+'</div>');
Nur leider wird immer nur der letzte Eintrag in der XML-Datei ausgegeben.
Wenn ich testweise anstatt
exifs[imageId]["camera"]
jetzt
exifs["0_1"]["camera"]
manuell eintippe, bekomme ich eine Fehlermeldung, dass dieser Index nicht existiert.
Die console.log-Ausgaben im obigen Quellcode sehen in Firebug wie folgt aus:
CurrentState: image[0_1] = Nikon D700
CurrentState: image[0_2] = Nikon D90
CurrentState: image[0_3] = Nikon D80
CurrentState: image[0_4] = Nikon D70
image.length: 0
Das zeigt mir, dass image garnicht erst gefüllt worden ist und die Daten immer wieder bei image["0_1"]["camera"] eingespeichert werden, denn sonst würde ja immer nur die D700 ausgegeben werden.
Seht ihr in meinem Code einen Fehler? Ich weiß da momentan echt nicht mehr weiter...
Grüße,
Sven
