✔ Arrays automatisch erzeugen

H

Html

Erfahrenes Mitglied
Hallo liebe User, da ich überhaupt keine Ahnung von Javascript habe wende ich mich mal an dieses Forum. Vorab noch etwas und zwar soll das ganze nur mit javascript realisiert werden und nicht mit php.
Und zwar ist es immer sehr aufwendig eine neue bildergallerie zu erstellen. Bisher hatte ich ja immer zwei arrays in denen einmal die Thumbnails deklariert sind und einmal meine original Bilder und das sah so aus:

1.das array für die original bilder:

Code: 
var i = 1 //Zaehlvariable fuer Foto images = new Array 
images[1] = "bilder/original/einsatz_2005_02_.jpg " 
images[2] = "bilder/original/einsatz_2005_02_%20(1).jpg " 
images[3] = "bilder/original/einsatz_2005_02_%20(2).jpg " 
images[4] = "bilder/original/einsatz_2005_02_%20(3).jpg " 
images[5] = "bilder/original/einsatz_2005_02_%20(4).jpg "
images[6] = "bilder/original/einsatz_2005_02_%20(5).jpg "
 images[7] = "bilder/original/einsatz_2005_02_%20(6).jpg " 
images[8] = "bilder/original/einsatz_2005_02_%20(7).jpg " 
images[9] = "bilder/original/einsatz_2005_02_%20(8).jpg " 
images[10] = "bilder/original/einsatz_2005_02_%20(9).jpg "

2. das array für die thumbnails:

Code: 
bilder = new Array() bilder[0]= "<img src=bilder/klein/einsatz_2005_02_.jpg onclick=OpenGallery('1') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[1]= "<img src=bilder/klein/einsatz_2005_02_%20(1).jpg onclick=OpenGallery('2') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[2]= "<img src=bilder/klein/einsatz_2005_02_%20(2).jpg onclick=OpenGallery('3') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[3]= "<img src=bilder/klein/einsatz_2005_02_%20(3).jpg onclick=OpenGallery('4') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[4]= "<img src=bilder/klein/einsatz_2005_02_%20(4).jpg onclick=OpenGallery('5') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[5]= "<img src=bilder/klein/einsatz_2005_02_%20(5).jpg onclick=OpenGallery('6') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[6]= "<img src=bilder/klein/einsatz_2005_02_%20(6).jpg onclick=OpenGallery('7') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[7]= "<img src=bilder/klein/einsatz_2005_02_%20(7).jpg onclick=OpenGallery('8') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[8]= "<img src=bilder/klein/einsatz_2005_02_%20(8).jpg onclick=OpenGallery('9') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[9]= "<img src=bilder/klein/einsatz_2005_02_%20(9).jpg onclick=OpenGallery('10') title='Klicken zum Vergrößern' class='thumbnail'>"

Jetzt ist meine Frage ob es möglich ist diese beiden arrays automatisch zu erzeugen? Und zwar habe ich mir das folgendermaßen vorgestellt:

1. ich gebe einmal den Pfad der bilder an z.b in einer var
( nur unterscheidet sich ja der pfad einmal durch "klein" oder "original"). Das heißt diese pfadangabe soll in meinem pfad fehlen und für jedes array feste angegeben sein. Somit ist der pfad den ich angebe für beide arrays gleich.

bsp: ich gebe folgenden pfad an: "bilder/+platzhalter+/einsatz_2005_02_"

jetzt soll bei dem array mit den original Bildern der platzhalter durch original ersetzt werden und bei den thumbnails durch klein.

2. die bilder müssen dann automatisch durchnummeriert werden. Und zwar beginnent mit keiner Zahl und dann %20(1),%20(2) usw.

3. damit die bilder nicht endlos durchnummeriert werden und das array nur so groß wird wie bilder ich habe soll es iregendwo eine variable geben in der ich die anzahl der Bilder angebe. Und somit ist die größe meiner arrays bestimmt.

Ich hoffe man kann verstehen wie ich das meine. Wäre schön wenn es so oder so ähnlich funtionieren würde.



Danke,olli
 
Das sind Arrays für eine Bildergallery, die er komplett auf JS aufgebaut hat. (ich weis es, weil ich ihm beim Erstellen geholfen habe. Er hatte mich so lieb gefragt :))
 
Ahso...na wenn die Galerie schon fertig ist, dann ist zu spät... ansonsten hätte man sicher irgendwie auf die Arrays verzichten können...

Code: 
<script type="text/javascript">
<!--
var intImgs=10,
    bilder=new Array(),
    images=new Array();

for(i=0;i<intImgs;++i)
  {
    strCnt      = (i==0)  ? '' : '%20('+i+')';
    bilder[i]   = '<img src="bilder/klein/einsatz_2005_02_'+
                  strCnt + 
                  '.jpg" onclick="OpenGallery('+(i+1)+
                  ')" title="Klicken zum Vergrößern" class="thumbnail">';

    images[i+1] = 'bilder/original/einsatz_2005_02_'+
                  strCnt + '.jpg';
    
  }
//-->
</script>

Übrigens:Ist es Absicht, das beide Arrays an einer anderen Position starten?
 
Hey das klappt ja super hier. Vielen Dank für die schnelle Hilfe. Bis auf eine winzige Kleinigkeit bin ich echt zufrieden.

Und zwar das mit dem pfad. Im Moment muss ich den Pfad noch zweimal angeben, dh. einmal im ersten array mit der ordnerangabe "klein" und im zweiten mit der angabe "original". Ist es nicht irgendwie machbar das ich den Pfad global ein einziges mal jedoch ohne den zwischenordner klein bzw original angebe. Also so : bilder//einsatz_2005_02_

und die Angabe original bzw klein dann automatisch im passenden array dazwischen geschrieben wird.

Ach und noch eine Frage: Wie ist das ganze den ohne arrays und php machbar?

Vielen Dank schonmal,ist echt ein super forum.
 
zum 1....ca.so:
Code: 
<script type="text/javascript">
<!--
var intImgs=10,
    bilder=new Array(),
    images=new Array(),
    prefiv='bilder/',
    suffix='/einsatz_2005_02_';

for(i=0;i<intImgs;++i)
  {
    strCnt      = (i==0)  ? '' : '%20('+i+')';
    bilder[i]   = '<img src="' + prefix + 'klein' + suffix +
                  strCnt + 
                  '.jpg" onclick="OpenGallery('+(i+1)+
                  ')" title="Klicken zum Vergrößern" class="thumbnail">';

    images[i+1] = prefix + 'original' + suffix +
                  strCnt + '.jpg';
    
  }
//-->
</script>
zum 2.
Dazu müsste man wissen, wie deine Bildergalerie funktioniert und wozu du die Arrays dort überhaupt brauchst.
 
Danke für die Hilfe, jetzt klappt es so wie ich es mir vorgestellt habe.

Eine Frage noch, ist es möglich mit javascript die anzahl der in einem ordner gespeicherten dateien auszulesen?


zu 2. so wird meine gallerie gemacht.


Also ich habe eine seite mit thumbnails welche alle in einem array gespeichert sind

das array für die thumbnails:

Code: 
bilder = new Array() bilder[0]= "<img src=bilder/klein/einsatz_2005_02_.jpg onclick=OpenGallery('1') title='Klicken zum Vergrößern' class='thumbnail'>"
bilder[1]= "<img src=bilder/klein/einsatz_2005_02_%20(1).jpg onclick=OpenGallery('2') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[2]= "<img src=bilder/klein/einsatz_2005_02_%20(2).jpg onclick=OpenGallery('3') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[3]= "<img src=bilder/klein/einsatz_2005_02_%20(3).jpg onclick=OpenGallery('4') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[4]= "<img src=bilder/klein/einsatz_2005_02_%20(4).jpg onclick=OpenGallery('5') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[5]= "<img src=bilder/klein/einsatz_2005_02_%20(5).jpg onclick=OpenGallery('6') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[6]= "<img src=bilder/klein/einsatz_2005_02_%20(6).jpg onclick=OpenGallery('7') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[7]= "<img src=bilder/klein/einsatz_2005_02_%20(7).jpg onclick=OpenGallery('8') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[8]= "<img src=bilder/klein/einsatz_2005_02_%20(8).jpg onclick=OpenGallery('9') title='Klicken zum Vergrößern' class='thumbnail'>" 
bilder[9]= "<img src=bilder/klein/einsatz_2005_02_%20(9).jpg onclick=OpenGallery('10') title='Klicken zum Vergrößern' class='thumbnail'>"

Über folgendenden code erzeuge ich automatisch eine Tabelle aus dem array mit meinen thumbnails:

Code: 
<!--
var Bilder = bilder
      
var proZeile = 4;
  function zeichne()
{
table = "";
zeilen = Math.ceil(Bilder.length/proZeile);

for(var i=0;i<zeilen;i++)
{
table += "<tr >\n";
for(var j=0;j<proZeile;j++)
{
table += "<td align=\"left\" >"+(typeof Bilder[(i*proZeile)+j]=="undefined"?'&nbsp;':Bilder[(i*proZeile)+j])+"</td>\n";
 }
table += "</tr>\n";
}
table = "<table border=\"0\" class=\"thumbnails\" cellspacing=\"2\" cellpadding=\"0\"  >\n"+table+"</table>";
           document.getElementById("inhalt").innerHTML = table;}
//-->

So weiterhin ist auf der seite ein zweites array mit den original bildern definiert:

Code: 
var i = 1 //Zaehlvariable fuer Foto

images = new Array
images[1]  = "bilder/original/einsatz_2005_02_.jpg "
images[2]  = "bilder/original/einsatz_2005_02_%20(1).jpg "
images[3]  = "bilder/original/einsatz_2005_02_%20(2).jpg "
images[4]  = "bilder/original/einsatz_2005_02_%20(3).jpg "
images[5]  = "bilder/original/einsatz_2005_02_%20(4).jpg "
images[6]  = "bilder/original/einsatz_2005_02_%20(5).jpg "
images[7]  = "bilder/original/einsatz_2005_02_%20(6).jpg "
images[8]  = "bilder/original/einsatz_2005_02_%20(7).jpg "
images[9]  = "bilder/original/einsatz_2005_02_%20(8).jpg "
images[10]  = "bilder/original/einsatz_2005_02_%20(9).jpg "

Beim klicken auf ein thumbnail öffnet sich dann ein popup und läd das zugehörige original bild aus dem oberen array. Dieses funktioniert mit folgendem code:

Code: 
<!--



function OpenGallery(foto)
{  
  

  i = foto
   
 
       
  var Ausgabe = open("", "Bildergalerie", "width=700, height=600, scrollbars=no, resizable=no left=0,top=20");
  var gallery = Ausgabe.document;

  var Inhalt =
    "<html> "
   +"<head> "
   +"<script type=\"text/javascript\" src=\"../../../../javascript/bildershow/bildershow.js\"></script> "
  +"<link href=\"../../../../css/text.css\" rel=\"stylesheet\" type=\"text/css\">"
   +"</head> "
   +"<body bgcolor=\"#FFFFFF\" topmargin=\"5\" leftmargin=\"0\" "
   +"marginwidth=\"5\" marginheight=\"5\" > "
   +"<table width=\"100%\" height=\"80%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" >"

   +"<tr height=\"480\" align=\"center\" valign=\"middle\"> "
   +"<td width=\"100%\" colspan=\"5\" align=\"center\" > "
   +"<img src="+images[i]+" name=\"img\" align=\"center\" > "
   +"</td> "
   +"</tr> "
   +"<tr height=\"40\" valign=\"middle\" align=\"center\"> "
   +"<td width=\"100%\" align=\"center\" colspan=\"5\"> "
   +"<div id=\"pagediv\" class=\"seitenindex\" >"
   +"</div>"
   
   
   +"</td>"
   +"</tr>"
   
   
   +"<tr height=\"30\" valign=\"bottom\" align=\"center\"> "
   +"<td width=\"50\" align=\"center\"> "
   +"</td> "

   +"<td width=\"200\" align=\"center\"> "
   +"<input id=\"previous\" onclick=\"previmg();\" type=\"button\" value=\"< Vorheriges\"> "
   +"</td> "
   +"<td width=\"200\" align=\"center\"> "
   +"<input id=\"close\" onclick=\"window.close();\" type=\"button\" value=\"Fenster schließen\"> "
   +"</td> "
   +"</td> "
   +"<td width=\"200\" align=\"center\"> "
   +"<input id=\"next\" onclick=\"nextimg();\" type=\"button\" value=\"Nächstes >\"> "
 
 
   
   +"</td> "
   +"<td width=\"50\" align=\"center\"> "


+   "</td> "



   +"</tr> "
   +"</table> "
   +"</body> "
   +"</html>";

  gallery.open();
  gallery.write(Inhalt);
  gallery.close();

     
}

//-->

Und nun kann ich im Popup mit "Vor" und "Zurück" durch mein array blättern. Diese Funtion sieht folgendermaßen aus:

Code: 
<!--

var i = opener.i;
images = opener.images
i2=images.length-1;

var ball = images.length-1;

function showPages()
{
	document.getElementById('pagediv').innerHTML = i+"/"+ball;
}


function previmg(val){
if (i > 1) {
if(!val){
i --;
document.img.src = images[i];
}
document.getElementById('previous').disabled=false;
}
if (i == 1)document.getElementById('previous').disabled=true;
if (i < i2)document.getElementById('next').disabled=false;

showPages();

}
function nextimg(val){
if (i < i2) {
if(!val){
i ++;
document.img.src = images[i];
}
document.getElementById('next').disabled=false;
}
if (i > 1)document.getElementById('previous').disabled=false;
if (i == i2)document.getElementById('next').disabled=true;

showPages();

}



window.onload=function(){previmg(1);nextimg(1);

}
//-->



So hoffe man kann es verstehen. Ist das den eine sehr komplizierte lösung? Aber ohne arrays geht es doch hier nicht, oder?

Wie wäre eine lösung ganz ohne arrays?

Gruß Olli
 
Html hat gesagt.:
Eine Frage noch, ist es möglich mit javascript die anzahl der in einem ordner gespeicherten dateien auszulesen?
Zum Vergrößern anklicken....

Wenn es ohne PHP-Hilfe gehen soll, dann sähe ich nur eine Möglichkeit, wenn das Directory-Listing auf dem Server aktiviert ist. Dann könntest du per XMLHttpRequest eine Anfrage auf das Verzeichnis richten...der Server würde dann mit der Dateiliste antworten, aus welcher man sodann die Dateinamen "extrahieren" kann.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück