✔ Bildergalerie / Bilderauswahl wie bei ebay

Status
Nicht offen für weitere Antworten.
G

GuenniFD

Mitglied
Hallo zusammen!
Ich würde das gerne so ähnlich wie bei ebay machen, aber würde gern ma wissen, ob jemand weiss wie das genau abläuft und wie es mit der Kompatiblität aussieht.
Im Prinzip gibt es ja für sowas mehrere Möglichkeiten wie iframes, javascript.
Ich hab es in meiner Version im mim noch mit php umgesetzt, aber es ist nicht erwünscht, dass sich die Seite extra neu laden muss (was ja bei php vorrausgesetzt ist)
Die Bildauswahl soll im Prinzip genauso wie bei ebay sein (also klickt auf ein Thumbnail und dann ändert es sich woanders).
Wollte mal wissen was ihr für eine Lösung vorschlagt, die möglichst kompatibel ist. (sind iframes da zu empfehlen oder eher js oder noch was anderes)
Würde mich über Rückmeldungen freuen.
Vielen Dank
MFG
Günni
 
Moin Guenni

also ich könnte mir so eine Lösung vorstellen:

Code: 
<html>
  <head>
    <title>Change Images</title>
    <script type="text/javascript">
    <!--
      function ChangeImage( szSourceName )
      {
        document.getElementById( "bild_complete" ).src = 
          document.getElementById( szSourceName ).src; 
      }
    //-->
    </script>
  </head>
  <body>
    <table align="center" width="80%" border="1">
      <tr>
        <td><img id="bild_1" src="bild1.jpg" 
             width="90" height="90" onClick="ChangeImage( 'bild_1' )"></td;
        <td><img id="bild_2" src="bild2.jpg"  
             width="90" height="90" onClick="ChangeImage( 'bild_2' )"></td;
      </tr>
      <tr>
        <td colspan="2" align="center">
          <img id="bild_complete" src="bild_dummy.jpg">
        </td>
      </tr>
    </table>
  </body>
</html>

Gruß
Das Orakel
 
vielen Dank für deine Antwort.
Wie sieht es denn mit Kompatibilität aus?
Kann man das ohne bedenken einsetzen, wenn die Seite sehr kompatibel sein soll?
bei iframes gibt es da ja auch manchmal probleme...
welche lösung wäre deiner Meinung nach besser?
 
Das script von Orakel funktioniert in neueren Browsern, die das DOM unterstützen. Das sind u.a. Mozilla ab 1.0, der IE ab 5.0, der NS ab 6.0, Obera ab 7.0, Konqueror ab 3.3 und Safari ab 1.2.

Wenn's auch in so Knochen wie dem NS 3.0, dem IE 4.0 oder dem Opera 5.12 funktionieren soll würde ich es so machen:
HTML: 
<html><head><title>Bilderwechsel</title>
 
 <script type="text/javascript"><!--
 	function ChangeImage( strSrc ) {
 		document.images['bildgro'].src = strSrc;
 	}
 //--></script>
 
 </head><body>
 
 <table border="0">
 	<tr>
 		<td><a href="#" onclick="ChangeImage('bild1.gif');return false"><img src="bild.gif" width="90" height="90" /></a></td>
 		<td><a href="#" onclick="ChangeImage('bild2.gif');return false"><img src="bild.gif" width="90" height="90" /></a></td>
 	</tr>
 	<tr><td colspan="2" align="center">
 		<img name="bildgro" src="bild1.gif" />
 	</td></tr>
 </table>
 
 </body></html>
Das ist dann aber je nach DTD nicht mehr valide.
 
Zuletzt bearbeitet:
vielen Dank für die Antwort...
jetzt hab ich noch eine Frage, wenn ich eine von den beiden Methoden einsetze, wie kann ich auch eine weiterverlinkung realisieren. Also wenn man auf das kleine Bild klickt, kommt an einer bestimmten Stelle das mittelgroße Bild und wenn man auf dieses wieder klickt (in einem popup) das große Bild.
Da ich im moment alles noch auf php und diesen teil mit einer switch case realisiert habe, wollte ich mal wissen, wie man sowas am schnellsten / geschicktesten umsetzt....
Vielen Dank im Vorraus
MFG
Günni
 
Du hast hier eigentlich alles, was du brauchst - ein bisschen selber denken schadet nicht.

Es läuft darauf hinaus, dass du in der Funktion ChangeImage() nicht nur den src des mittelgroßen Bildes veränderst, sondern auch eine Variable setzt die die URL zum großen Bild beinhaltet (diese URL übergibst du am besten als 2.Parameter an ChangeImage() und setzt die Variable in dieser Funktion). Im onclick des Links, der um das mittelgroße Bild notiert ist, wird dann das PopUp des Großen Bildes mittels window.open(Variablenname,'Fenstername','Parameter');return false geöffnet.Vergiss nicht die Variable vor allen Funktionen mit der URL zum ersten Bild zu initialisieren, sonst gibt es eventuell Fehler. Man könnte es auch anders machen, aber so funktioniert es auch in den alten NSs und IEs.

Mehr zu window.open().

Da du ja php kannst solltest du das eigentlich hinbekommen. Wenn nicht sag einfach Bescheid, dann helfe ich nochmal.
 
Zuletzt bearbeitet:
vielen dank!
ich bin schon am rumprobieren...
ein popup hab ich auch schon gebastelt, aber wie ist die anweisung, dass ich einen link ansteuere und ihn dann änder?
also wenn da <a name="bildpopup" href="javascript: popup(\'unternehmen&seite=netzwerk&bild=1&format=gif\', \'350\', \'380\')" dass ich dann z.b. bild=2 schreiben kann und die größen hinten verändern kann....
document.getElementById("bildpopup").href geht ja anscheinend nicht ;)
sorry bin da net so fit, würde mich freuen wenn mir jemand das zauberwort nennen könnte...
thx
MFG
Günni
 
GuenniFD hat gesagt.:
also wenn da <a name="bildpopup" href="javascript: popup(\'unternehmen&seite=netzwerk&bild=1&format=gif\', \'350\', \'380\')" dass ich dann z.b. bild=2 schreiben kann und die größen hinten verändern kann....
document.getElementById("bildpopup").href geht ja anscheinend nicht ;)
Zum Vergrößern anklicken....
Doch geht, dein Link hat nur keine Id sondern nur einen Namen, weswegen sich das Id in docuement.getElemetById schwer tut... ;)

Dir ist außerdem klar, dass das so in den älteren Browsern, die das DOM nicht unterstützen nicht funktionieren kann, weil du warst ja so auf Kompatibilität aus...
 
Zuletzt bearbeitet:
danke für die rasche und durchaus logische antwort ;-)
jo wie könnte ich es denn in der kompatiblen version lösen? (war halt erstma grundsätzlich am testen)
 
So:
con-f-use hat gesagt.:
Es läuft darauf hinaus, dass du in der Funktion ChangeImage() nicht nur den src des mittelgroßen Bildes veränderst, sondern auch eine Variable setzt die die URL zum großen Bild beinhaltet (diese URL übergibst du am besten als 2.Parameter an ChangeImage() und setzt die Variable in dieser Funktion). Im onclick des Links, der um das mittelgroße Bild notiert ist, wird dann das PopUp des Großen Bildes mittels window.open(Variablenname,'Fenstername','Parameter');return false geöffnet.Vergiss nicht die Variable vor allen Funktionen mit der URL zum ersten Bild zu initialisieren, sonst gibt es eventuell Fehler. Man könnte es auch anders machen, aber so funktioniert es auch in den alten NSs und IEs.

Mehr zu window.open().
Zum Vergrößern anklicken....
Wie gesagt über die Variable. Das sähe dann beispielsweise so aus:
HTML: 
<html><head><title>Bilderwechsel</title>
    
    <script type="text/javascript"><!--
    	var imgGro = 'bild1m.gif';
    
    	function ChangeImage( strSrc, strURL ) {
    		document.images['middle'].src = strSrc;
    		imgGro = strUrl;
    		return false;
    	}
    
    //--></script>
    
    </head><body>
    
    <table border="0">
    	<tr>
  		<td><a href="#" onclick="return ChangeImage('bild1m.gif','bild1l.gif')"><img src="bild1s.gif" /></a></td>
  		<td><a href="#" onclick="return ChangeImage('bild2m.gif','bild2l.gif')"><img src="bild2s.gif" /></a></td>
    	</tr>
    	<tr><td colspan="2" align="center">
  		<a href="#" onclick="window.open(imgGro,'Fenstername','width=150,height=150');return false"><img name="middle" src="bild1m.gif" /></a>
    	</td></tr>
    </table>
    
  </body></html>
Wobei bild1s.gif das erste kleine Bild (s für small), bild1m.gif das erste mittelgroße Bild (m für medium) und bild1l.gif das erste große Bild (l für large) wäre.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück