Fotos mal horzontal mal vertikal

koppinka · 15. April 2009

Hallo liebe Experten,

habe eine Website zu betreuen, bin aber nicht wirklich sattelfest in HTML.

Meine Frage ist folgende: Habe eine Reihe Fotos eingestellt, von denen welche horizontal und welche vertikal angezeigt werden sollen. Bei den Vorschaubildern ist mir das mit viel Schreibaufwand gelungen.

Nun ist in der Function für die Bildvergrößerung alles auf horizontal festgelegt.
Kann ich im JavaScript auch Klassen einführen, nach denen ich die Bilder dann einfach aufteile?

Mein head sieht momentan so aus:

HTML

<script language="JavaScript">
<!--
function Fenster_oeffnen(theURL,winName,features) { //v1.2
  window.open(theURL,winName,features);
}




function bildgross(s)
         {
         var s = s.src;
         var s = escape(s.replace(/vorschau/,"original"));
         var inhalt = "<html><title>Skatweihnachten08</title><body bgcolor=#FFFFFF><img src="+s+" Border=1 width=100%></body></html>"
         var w = window.open('','lupe','loolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no, width=560,height=430'),;
         var w = window.open("javascript:document.write('"+inhalt+"');document.close();",'lupe');
         w.focus()
         }
//-->
</script>

Alles anzeigen

Bei den Bildern hängt dann immer der gleiche Rattenschwanz an Befehlen, außer der Ausrichtung (112 x 84 oder 84 x 112) und der Fotonummer. Auch das müsste doch per Klasse zu vereinfachen gehen.

Code

<table border="0" style=cursor:hand align="left">
        <tr>
          <td align="center"><img src="vorschau/Foto01.jpg" NOSAVE border=1 onClick="bildgross(this)" height=84 width=112 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td>
          <td align="center"><img src="vorschau/Foto02.jpg" NOSAVE border=1 onClick="bildgross(this)" height=84 width=112 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td>
          <td align="center"><img src="vorschau/Foto03.jpg" NOSAVE border=1 onClick="bildgross(this)" height=112 width=84 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td>
          <td align="center"><img src="vorschau/Foto04.jpg" NOSAVE border=1 onClick="bildgross(this)" height=112 width=84 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td>

Mir wäre da sehr geholfen, noch schöner wäre ja eine Art Diashow, aber man möchte ja nicht gleich vermessen sein.

Danke im Voraus, Koppinka

deathfighter · 15. April 2009

Damit du nicht immer manuell den Code eingeben musst(was bei einer großen Galerie sehr lange dauern kann ) könntest du das mit einer foreach-Schleife in php lösen. Dazu machst du dann 2 Arrays einmal für Bilder in der Auflösung 112 x 84 und einmal für 84 x 112. Dann lässt du die Schleife durchlaufen und die Bilder ausgeben:

PHP

<table border="0" style=cursor:hand align="left">
        <tr> 
<?php
 $bild_ver[0] = "Foto01.jpg";
 $bild_ver[1] = "Foto02.jpg";




 $bild_hor[0] = "Foto03.jpg";
 $bild_hor[1] = "Foto04.jpg";




 foreach ($bild_ver as $bild) {
    echo '<td align="center"><img src="vorschau/"' . $bild . '" NOSAVE border=1 onClick="bildgross(this)" height=84 width=112 alt="Zum 




Vergr&ouml;&szlig;ern anklicken!"></td> "';}







 foreach ($bild_hor as $bild) {
    echo '<td align="center"><img src="vorschau/"' . $bild . '" NOSAVE border=1 onClick="bildgross(this)" height=112 width=84 alt="Zum 




Vergr&ouml;&szlig;ern anklicken!"></td> "';}
 ?>
</tr>
</table>
 























?>

Alles anzeigen

mfg

koppinka · 16. April 2009

Hi Deathfighter,

(wieso eigentlich immer so negative Nicks?) vielen Dank für den Tip, er hilft mir zumindest schon im unteren Teil Schreibkram zu minimieren. Jetzt fehlt mir nur noch die Idee, wie ich dem Großbild mal 560 x 430 und mal 430 x 560 zuordne.

MfG Koppinka

deathfighter · 16. April 2009

Das ist auch Recht einfach getan. Dieses Script das ich dir gepostet habe ist schon der halbe Weg. Bei dem unterteilt man ja die Bilder die vertikal sind und die die horizontal sind. Jetzt machst du einfach 2 javascripte. Einen für die vertikalen und eine für die horizontalen.

Javascript:

HTML

<script language="JavaScript">
<!--
function Fenster_oeffnen(theURL,winName,features) { //v1.2
  window.open(theURL,winName,features);
}




function bildgross_hor(s)
         {
         var s = s.src;
         var s = escape(s.replace(/vorschau/,"original"));
         var inhalt = "<html><title>Skatweihnachten08</title><body bgcolor=#FFFFFF><img src="+s+" Border=1 width=100%></body></html>"
         var w = window.open('','lupe','loolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no, width=560,height=430'),;
         var w = window.open("javascript:document.write('"+inhalt+"');document.close();",'lupe');
         w.focus()
         }




function bildgross_ver(s)
         {
         var s = s.src;
         var s = escape(s.replace(/vorschau/,"original"));
         var inhalt = "<html><title>Skatweihnachten08</title><body bgcolor=#FFFFFF><img src="+s+" Border=1 width=100%></body></html>"
         var w = window.open('','lupe','loolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no, width=430,height=560'),;
         var w = window.open("javascript:document.write('"+inhalt+"');document.close();",'lupe');
         w.focus()
         }
//-->
</script>

Alles anzeigen

Und dann noch das PHP:

PHP

<table border="0" style=cursor:hand align="left">
        <tr>
<?php
 $bild_ver[0] = "Foto01.jpg";
 $bild_ver[1] = "Foto02.jpg";




 $bild_hor[0] = "Foto03.jpg";
 $bild_hor[1] = "Foto04.jpg";




 foreach ($bild_ver as $bild) {
    echo '<td align="center"><img src="vorschau/"' . $bild . '" NOSAVE border=1 onClick="bildgross_ver(this)" height=84 width=112 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td> "';}







 foreach ($bild_hor as $bild) {
    echo '<td align="center"><img src="vorschau/"' . $bild . '" NOSAVE border=1 onClick="bildgross_hor(this)" height=112 width=84 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td> "';}
 ?>
</tr>
</table>
 ?>

Alles anzeigen

Kann sein das es nicht zu 100% funktioniert (Hab es nicht getestet). Vom Ansatz müsste es aber richtig sein.

mfg

koppinka · 17. April 2009

Vielen Dank nochmals, auf die Idee hätte man vielleicht selbst kommen müssen - manchmal sieht man das naheliegendste nicht :cry: . Sollte etwas nicht funktionieren melde ich mich noch einmal, denke aber auch, dass es gehen müsste.

MfG Koppinka

koppinka · 17. April 2009

Hallo Deathfighter,

habe eben Deinen Code getestet. Die php- Variante ging nicht, es zeigt kein Vorschaubild an.

Nachdem ich den "gedoppelten" JavaScript- Code von 2 überflüssigen Kommas, die immer wieder Fehlermeldungen ausgaben statt bilder anzuzeigen, befreit hatte ging die Variante 3:
oben gedoppelt unten veränderter alter Code wie folgt:

Code

<table border="0" style=cursor:hand align="left">
            <tr>
              <td align="center"><img src="vorschau/Foto01.jpg" NOSAVE border=1 onClick="bildgross_hor(this)" height=84 width=112 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td>
              <td align="center"><img src="vorschau/Foto02.jpg" NOSAVE border=1 onClick="bildgross_hor(this)" height=84 width=112 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td>
              <td align="center"><img src="vorschau/Foto03.jpg" NOSAVE border=1 onClick="bildgross_ver(this)" height=112 width=84 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td>
              <td align="center"><img src="vorschau/Foto04.jpg" NOSAVE border=1 onClick="bildgross_ver(this)" height=112 width=84 alt="Zum Vergr&ouml;&szlig;ern anklicken!"></td>

Gibt es einen Befehl wie: window.new oder new.window.open ?
Wenn ich nämlich von horizontalem auf vertikales (oder umgekehrt) Bild weiterklicke, ohne das Fenster vorher zu schließen, bleibt das alte Fenster und das Bild wird wieder falsch angezeigt.

MfG und schönes WE, Koppinka

kanufrosch · 17. April 2009

kann mal wer das vollständig richtig funktionierende sagen bei mir funtzt das net

koppinka · 17. April 2009

Hallo kanufrosch,

wie oben erwähnt funktioniert nur die Kombination aus 2- geteiltem Javascript im head und dem veränderten Ursprungscode ab <table> mit der Einschränkung, dass man immer das vorherige Fenster schließen muss, wenn man von horizontal auf vertikal oder umgekehrt wechseln möchte.

MfG Koppinka

koppinka · 17. April 2009

... und nicht vergessen: die Kommas wie beschrieben zu entfernen, sonst Fehlermeldung

Fotos mal horzontal mal vertikal

Jetzt mitmachen!

Teilen