!!! Listings aus dem Artikel "Manche Strecke"
!!! von Henning Behme, iX 7/09, S. 54

!!! Listing 1: XML-Quelle

  <photo id="hafen1">
    <datum>15. November 2002</datum>    
    <ort>Vueltas</ort>

      <beschreibung>Erstmal Schluss mit Fotos von der Hafenmauer, die rechts
      neben dem Foto bald größere Löcher aufweisen wird.</beschreibung>
  </photo>


!!! Listing 2: HTML-Auszug


    <div id="bilder">
        <div id="liste"><span class="bildervorsatz">Bilder</span>
	   <ul id="fuerbildernum">
	     <li><a title="Bild 1 von 9 [Hafen]" href="images/Hafen1.jpg"><img src="images/Hafen1.min.jpg" alt="" /></a></li>
	    <!-- weitere Bilder -->
	     <li><a title="Bild 9 von 9 [Hafen]" href="images/Hafen9.jpg"><img src="images/Hafen9.min.jpg" alt="" /></a></li>
           </ul>
        </div>
        <div id="einbild">
        </div>
        <div id="bildtext">
        </div>
    </div>

!!! Listing 3: JavaScript -- mit Minibildchen

$(document).ready(function() {

  $('#bilder a').click(function(evt) { // Anfang von  $('#bilder a').click
			     evt.preventDefault();
			     var bildnr = $(this).attr('title').substr(5,1);
			     var laenge = $(this).attr('title').substr(11,1);
			     var querydaten = 'bild='+bildnr;

		     $.getJSON('php/bilderserie-img.php', querydaten, zeigeBild);

  function zeigeBild (bdaten) { // Anfang der Funktion zeigeBild
      $('#einbild').html('<img src=\"images/'+bdaten.bild[0]+'.jpg\" />');
      $('#bildtext').html(bdaten.text[0]);
  } // Ende der Funktion zeigeBild
  
		       }); // Ende von $('#bilder a').click
}); // Ende von $(document).ready

!!! Listing 4: PHP-Skript

<?php

$bild = isset($_REQUEST['bild']) ? $_REQUEST['bild'] : '1';
$serienquelle = "../src/Hafen.xml";
$arrfeld =  $bild - 1;
$arrzaehler = 0;

if (file_exists($serienquelle)) { //Datei?
    $xml = simplexml_load_file($serienquelle);

    // welches Foto?
    foreach ( $xml->photo as $photo ) {
      if ( $arrfeld == $arrzaehler) {
        $zurueck = array(bild => $photo->attributes()->id, ort => $photo->ort, datum => $photo->datum, text =>  $photo->beschreibung);
      }
      $arrzaehler += 1;
    }
    echo json_encode($zurueck);
} else { exit('XML-Datei irgendwie nicht zu öffnen...'); }


?>

!!! Listing 5: JavaScript -- mit Ziffern 

$(document).ready(function() {

    $('#bilder a').click(function (evt) {
	bildrueckgabe($(this), evt);
    }); //  $('#bilder a').click

}); // Ende von $(document).ready

function bildrueckgabe(objekt, evt) {
  evt.preventDefault();
  var bildnr = objekt.attr('title').substr(5,1);

  $.getJSON('php/bilderserie-num.php', 'bild='+bildnr, zeigeBild);
}

  function zeigeBild (bdaten) { // Anfang der Funktion zeigeBild
      var listentext = "\n\t<span class=\"bildervorsatz\">Bilder</span>\n\t<ul id=\"fuerbildernum\">";

      for (i = 1; i <= bdaten.serienlaenge; i++) {
        if (i != bdaten.bildnr) {
          listentext += '\n\t<li><a title="Bild ' + i + ' von ' + bdaten.serienlaenge + ' [Hafen]" href="images/Hafen' + i  + '.jpg">' + i + '</a></li>';
        } else {
          listentext += '\n\t<li>' + i + '</li>';
        }
      }
      listentext += "\n</ul>";
  
    $('#liste').html(listentext);
    $('#einbild').html('<img src=\"images/'+bdaten.bild[0]+'.jpg\" />');
    $('#bildtext').html(bdaten.text[0]);

    $('#bilder a').click(function (evt) {
	bildrueckgabe($(this), evt);
    }); //  $('#bilder a').click
  } // Ende der Funktion zeigeBild

!!! Listing 6: mouseover/-out

    // mouseover/out registrieren
    bilder = $('#fuerbildernum li:has(a)');
    bilder.mouseover(function () {
          diesesbild = $(this).find('a').attr('title').substr(5,1);
          linkerrand =110 + (diesesbild * 20);
	  $(this).find('div.mini').css('left', linkerrand+'px').show(); 
    });
    bilder.mouseout(function () { 
	$(this).find('div').hide();
    });