< Bildwechel > mittels Buttons und vordefiniertem Ordner

**rumsi** · 04.10.2011, 17:24

Moin,

so recht wusste ich jetzt nicht wie ich den Titel wählen soll, verzeiht mir das.

Ich habe folgendes vor, ich möchte ein vordefiniertes Bild mittels vor- und zurueck-Button per Javascript wechseln lassen.

Das Bild soll als Hintergrund einer div-Box verwendet werden. Das erste Bild, dass der Besucher beim betreten der Seite sieht soll fest definiert sein.
Beim Click auf "vor" oder "zurueck" soll ein neues Bild aus einem Vordefinierten Ordner/Pool geladen werden. Dieser soll beliebig erweiterbar sein, sprich, kopiere ich ein neues Bild in den Ordner, soll dieses ohne anpassen des Quelltextes einfach auch "irgendwann" angezeigt werden (beim click auf vor/zurueck). SOweit ich weiß bedeutet dass, es soll kein fest definiertes Array geben?
Es soll vermieden werden, dass beim klick auf "vor" das gleiche Bild angezeigt wird, wie beim Klick auf "zuruck".

Beispiel:
Nicht gewollt ist:
Bild x < Bild 1 > Bild x
sondern
Bild x < Bild 1 > Bild y

Vor und Zurueck soll mittels grafischen Buttons umgesetzt werden.

Das Bild soll nicht einfach ersetzt werden, sondern durch das neue Bild aus der seite geschoben werden, in einer soften Bewegung.

Wegen mir darf es übrigens auch was anderes als JavaScript, nur kein Flash sein.

Vielen Dank für eure Hilfe.

Gruß,
Micha

**torben1** · 05.10.2011, 08:08

Lies den Ordner per PHP in ein Array, dann hast Du immer alle Bilder drin.

Code:

$script_dir = dirname($_SERVER["SCRIPT_FILENAME"])."";
			$strSetFolder = "$script_dir/XYZ/";
			chdir ($strSetFolder);
			$cdir = dir ($strSetFolder);
			$i = 0;
			while ($entry = $cdir -> read())
				{
				if (is_dir ($entry) AND $entry != '.' AND $entry != '..')
					{
					$galTpm[$i] = $entry;
					$i++;
					}
				}

Dann kannst Du mit JS beim Vorbutton das Array von "Oben" durchlaufen lassen und beim Zurückbutton von "Unten". Die Funktionalität mit dem Sliden der Bilder bekommst Du an Einfachsten mittels jQuery hin.

Torben

**rumsi** · 11.10.2011, 23:36

Zitat von torben1

Lies den Ordner per PHP in ein Array, dann hast Du immer alle Bilder drin.

Code:

$script_dir = dirname($_SERVER["SCRIPT_FILENAME"])."";
            $strSetFolder = "$script_dir/XYZ/";
            chdir ($strSetFolder);
            $cdir = dir ($strSetFolder);
            $i = 0;
            while ($entry = $cdir -> read())
                {
                if (is_dir ($entry) AND $entry != '.' AND $entry != '..')
                    {
                    $galTpm[$i] = $entry;
                    $i++;
                    }
                }

Dann kannst Du mit JS beim Vorbutton das Array von "Oben" durchlaufen lassen und beim Zurückbutton von "Unten". Die Funktionalität mit dem Sliden der Bilder bekommst Du an Einfachsten mittels jQuery hin.

Torben

ach herje *guck wie bahnhof* ich hab davon leider ueberhaupt keine ahnung... hast du das ganze evtl in einem kompletten kurzen beispiel fuer mich? :-S

das hier hab ich aus div bruchteilen zusammengebastelt, es funktioniert soweit :-S

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>Bildershow</title>
<script type="text/javascript">


var images = new Array(
  'http://fotowill.de/images/content/portfolio/FB_003.JPG',
 'http://fotowill.de/images/content/portfolio/FB_004.JPG', 'http://fotowill.de/images/content/portfolio/FB_005.JPG'
);


var current_index = 0;


function switch_image(direction) {
  var count = images.length;
  current_index += (direction ? 1 : -1);
  if (current_index == count) {
    current_index = 0;
  } else if (current_index < 0) {
    current_index = count - 1;
  }
  document.getElementById('image_switch').src = images[current_index];
}
</script>
</head>
<body>


<div style="text-align:center">


 <img src=" 'http://fotowill.de/images/content/portfolio/FB_003.JPG'" id="image_switch" alt="" />


  <br />



  <img src="" style="cursor:pointer" onclick="switch_image(0)" alt="" width="60" height="60" />



  <img src="" style="cursor:pointer" onclick="switch_image(1)" alt="" width="60" height="60" />


</div>

</body>

das es nur mehr funktioniert ist aber ein absoluter glueckstreffer

**torben1** · 12.10.2011, 07:40

Hallo rumsi,

such Dir am Besten erst einmal ein jQueryPlugIn für Deinen Slider (http://www.google.de/search?gcx=c&so...+plugin+slider). Wenn Du den dann hast kannst Du mit dem Code-Fetzen von mir Deine gewünschte Funktionalität bauen

Mit

Code:

<?php
$script_dir = dirname($_SERVER["SCRIPT_FILENAME"])."";
			$strSetFolder = "$script_dir/XYZ/";
			chdir ($strSetFolder);
			$cdir = dir ($strSetFolder);
			$i = 0;
			while ($entry = $cdir -> read())
				{
				if (is_dir ($entry) AND $entry != '.' AND $entry != '..')
					{
					$galTpm[$i] = $entry;
					$i++;
					}
				}
?>

erhältst Du ein Array was Alle Dateien in Verzeichnis XYZ beinhaltet. Die kannst Du dann wieder ausgeben lassen an der Stelle wo Du es auch brauchst:

z.B. mit

Code:

<?php
foreach ($tpmGal AS $bild)
  {
  echo '<img src="XYZ/'.$bild.'" alt="Bild:'.$bild.'"/>';
  }
?>

**rumsi** · 12.10.2011, 16:04

könntest du mir bitte mal den gefallen tun, und die stellen in deinem script markieren, die ich anpassen muss, ich weiss grade nicht was variable ist und was ich fuellen muss

**torben1** · 12.10.2011, 18:30

Also, mal angenommen Deine .php-Datei liegt auf dem Server im Rootverzeichnis und Deine Bilder unter bilder/ dann brauchst Du nur XYZ durch bilder zu ersetzen. In Deinem Fall wohl images/content/portfolio/

**timroh** · 14.10.2011, 13:52

du könntest entweder eine neue PHP Datei machen, in der dann mittels diesem Script die Pfade zu allen Bildern stehen und diese Datei dann mittels Ajax http://wiki.ajax-community.de/tutori...erste-schritte auslesen. Oder du machst einfach sowas:

Code:

bilder = new Array( <?PHP foreach($dateipfade AS $a){echo "'".$a."', ";} ?> );

Dieser Code erzeugt dann sowas in der Art:

Code:

bilder = new Array('pfad1', 'pfad2', 'pfad3', );

ich bin mir jetzt grad nicht sicher, ob das letzte Komma ein Problem verursacht, ansonsten müsste man da noch schauen
Den ersten Teil des Codes kannst du irgendwo am Anfang der Seite einfügen.

Thema: < Bildwechel > mittels Buttons und vordefiniertem Ordner

Themen-Optionen

Thema durchsuchen

< Bildwechel > mittels Buttons und vordefiniertem Ordner

Berechtigungen