sarah: Bildergalerie grundsätzlich

Beitrag lesen

Hallo liebe Leut

Also ich bin glaub schon zum 3ten Mal dabei und hab echte Probleme bei meiner Bildergalerie.
Ich hab nen Code, das funktioniert auch alles super nur ist das Vorladen echt mühsam.
Die Gallerie umfasst im Schnitt immer so zwischen 15-25 Bilder.

Ich wurde schon auf image-Objekte verwiesen, aber ohne Vorwissen in Javascript, wird das einfach nix.

Jetzt mein letzter Aufruf, kann mir jemand helfen? Das Script zu optimieren und das Preloaden der Bilder zu verbessern?

Zusätzlich wäre ich daran interessiert, neben meiner Bildernavi "< & >" eine Info, bei welchem Bild man gerade steht, also sozusagen eine Info 1/1 1/2 etc.

Wäre das machbar?

Bin euch echt dankbar...

Also hier mal mein momentaner Code:

<script type="text/javascript">
  var myImages = new Array();
 myImages[1] = { 'src' : 'pics/Erfahrungen/innenarchitektur.jpg',
                'dsc' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' };

myImages[2] = { 'src' : 'pics/Erfahrungen/3_3_1.jpg',
                'dsc' : 'Aus dem Unterricht «Moto-Logik» Einstieg ins Projekt, Typologie der Motorräder' };

myImages[3] = { 'src' : 'pics/Erfahrungen/3_3_2.jpg',
                'dsc' : 'Projekt «Motorraddesign mit BMW» Momentaufnahme im Schulraum (Reto Ulrich und Patrick Stieger)' };

myImages[4] = { 'src' : 'pics/Erfahrungen/3_3_3.jpg',
                'dsc' : 'Versuche in der Modellwerkstatt (Daniel Scherer)' };

myImages[5] = { 'src' : 'pics/Erfahrungen/3_3_4.jpg',
                'dsc' : 'Besprechung bei BMW Motorrad München Das Projekt wurde begleitet von David Rob, Herr Abe und Herr Heinrich' };

myImages[6] = { 'src' : 'pics/Erfahrungen/3_3_5.jpg',
                'dsc' : 'Ausschnitt aus dem Präsentationsplakat Vermitteln der Stimmung rund um den Motorradentwurf (Jonas Gmür)' };

myImages[7] = { 'src' : 'pics/Erfahrungen/3_3_6.jpg',
                'dsc' : 'Ausschnitt aus dem Präsentationsplakat Aufzeigen von Details mittels unterschiedlicher Ansichten (Patrick Stieger)' };

myImages[8] = { 'src' : 'pics/Erfahrungen/3_3_7.jpg',
                'dsc' : 'Projekt Motorraddesign Intensives Skizzieren während der Entwurfsphase (Michael Debenath)' };

myImages[9] = { 'src' : 'pics/Erfahrungen/3_3_8.jpg',
                'dsc' : 'Abgleichen und überprüfen der skizzierten Entwürfe am Modell (Michael Debenath)' };

myImages[10] = { 'src' : 'pics/Erfahrungen/3_3_9.jpg',
                'dsc' : 'Umsetzung am CAD und Erstellen fotorealistischer Bilder seines Entwurfes (Michael Debenath)' };

myImages[11] = { 'src' : 'pics/Erfahrungen/3_3_10.jpg',
                'dsc' : 'Redesignprojekt Schreibgeräte  Erfassen der Proportionen und Abmessungen eines Schreibgerätes (Christian Dippel)' };

myImages[12] = { 'src' : 'pics/Erfahrungen/3_3_11.jpg',
                'dsc' : 'Bodenschatz, Messestand Swissbau 07' };

myImages[13] = { 'src' : 'pics/Erfahrungen/3_3_12.jpg',
                'dsc' : 'Bodenschatz, Messestand Swissbau 07, Armaturenprogramm' };

myImages[14] = { 'src' : 'pics/Erfahrungen/3_3_13.jpgg',
                'dsc' : 'Bodenschatz, Messestand Swissbau 07, Innenbereich mit  Gesamtprogramm' };

myImages[15] = { 'src' : 'pics/Erfahrungen/3_3_14.jpg',
                'dsc' : 'Bodenschatz, Messestand Swissbau 07, Durchblick von der Bar' };

myImages[16] = { 'src' : 'pics/Erfahrungen/3_3_15.jpg',
                'dsc' : 'SH-Holz Biel, Gastromöblierung' };

myImages[17] = { 'src' : 'pics/Erfahrungen/3_3_16.jpg',
              'dsc' : 'SH-Holz Biel, Gastromöblierung' };

myImages[18] = { 'src' : 'pics/Erfahrungen/3_3_17.jpg',
                'dsc' : 'SH-Holz Biel, Gastromöblierung' };

myImages[18] = { 'src' : 'pics/Erfahrungen/3_3_18.jpg',
                'dsc' : 'SH-Holz Biel, Gastromöblierung' };

var maxValue = myImages.length - 1;
  var intValue = 1;
  function gallerie(charValue) {
  if(charValue == 'c') {
    document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'><p>" + myImages[intValue].dsc + "</p>";
   }
   else if(charValue == '+') {
    if(intValue == maxValue) {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[1].src + "'><p>" + myImages[1].dsc + "</p>";
     intValue = 1;
    }
    else {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue + 1].src + "'><p>" + myImages[intValue + 1].dsc + "</p>";
     intValue = intValue + 1;
    }
   }
   else if(charValue == '-') {
    if(intValue == 1) {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[maxValue].src + "'><p>" + myImages[maxValue].dsc + "</p>";
     intValue = maxValue;
    }
    else {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue - 1].src + "'><p>" + myImages[intValue - 1].dsc + "</p>";
     intValue = intValue - 1;
    }
   }
  }

function vorladen1(i) {
 if (! myImages[i].img ) {
  myImages[i].img = new Image();
  myImages[i].img.src = myImages[i].src;
  }
 }

function vorladen(i) {
 var next= i<(maxValue-1) ? (i+1) : 1;
 var prev= i>1 ? (i-1) : 1;
 vorladen1(next);
 vorladen1(prev);
 }

</script>

<div id="logo"></div>

<body onLoad="gallerie('c')">

<div id="imgGallerie"></div>
<div id="links"><a href="#" onClick="gallerie('-')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032"><</font></a></div>
<div id="rechts"><a href="#" onClick="gallerie('+')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032">></font></a></div>

</body>

Und ja, die Font tags werde ich vernichten und CSS draus machen..

VIELEN DANK!

sarah