jQuery – 3 – Bildergalerie mit XML und Thickbox

So ich bin aus dem Urlaub zurück und habe mich gleich dran gemacht meine Bilder ins Web zu stellen. Hierzu habe ich mich natürlich jQuery bedient.

Bildergalerie mit jQuery

Hier findet ihr das XML indem sämtliche Informationen gespeichert sind die nachher auf der Seite ausgegeben werden.

Der Code – als erstes holen wir uns mal das XML File:

$.ajax({
type: "GET",
url: "mali2008.xml",
dataType: "xml",
success: function(xml) {

Ich denke hierzu muss ich nichts weiter sagen.

Parsen von Namen und die Erklärung auf dem ersten Knoten

$(xml).find('galry').each(function(){
var name = $(this).find('name').text();
var expl = $(this).find('expl').text();
$('<div class="galryhead"></div>').html('<h1>'+name+'</h1>
<br /><p>'+expl+'</p><br />').appendTo('#content');

NAME und EXPL des XMLs werden ausgelesen .. am Ende mit HTML formatiert und in den Content DIV des body Bereichs gehängt.

Suchen nach den verschiedenen Fotosets im XML

$(xml).find('set').each(function(){
var id = $(this).attr('id');
var title = $(this).find('title').text();
var sub = $(this).find('sub').text();
$('<div class="galryset" id="set_'+id+'"></div>').html('<br />
<h2>'+title+'</h2><hr /><p>'+sub+'</p><br />')
.appendTo('#content');

Wichtig in diesem Teil ist das jedes Set im XML seine FESTE ID hat. Den DIV den wir am Ende mit Inhalt füllen bekommt exakt diese ID zugewiesen. Das ist wichtig da ja jedes SET n-Fotos haben kann und das Programm wissen muss bei welchen Set diese angezeigt werden sollen. Am Ende hängen wir auch das in den Content DIV.

Suchen nach den verschiedenen Fotosets im XML

$(this).find('photo').each(function(){							
var pic = $(this).find('pic').text();
var desc = $(this).find('desc').text();							
$('<div class="galrypic"><a href="pic/'+pic+'" title="'+desc+'" class="thickbox" rel="gallery">
<img src="thumb/'+pic+'" alt="'+desc+'" /></a><br /><span>'+ desc +'</span></div>')
.appendTo('#set_'+id);

Hier wird nun jedes Foto einzeln geparst und mit HTML formatiert. Wichtig ist der Schluss durch .appendTo(’#set_’+id); wird jedes Foto dem RICHTIGEN Set zugeordnet. Das Resultat wird dem SET+ID aus der vorangegangen Funktion zugewiesen.

Thickbox abschließen initialisieren

tb_init('#content a.thickbox, #content area.thickbox, #content input.thickbox');

Wenn wir das nicht abschließend notieren funktioniert die Thickbox im Script nicht. Dadurch das die Thickbox als erstes (im Head) geladen wird kann sie nicht wissen was alles im Body bereich steht .. da das Galeriescript ja danach läuft. Hier wird nun die Thickbox gestartet NACHDEM das Galeriescript gelaufen ist.

So nun schaut euch hier den Quelltext an und probiert aus.

Leave a Reply

Your email address will not be published. Required fields are marked *