Bild vergrößert darstellen
Stanload
- php
Hallöchen,
da bin ich mal wieder :-).
Ich habe folgendes Problem:
auf meiner derzeitigen HP zeige ich diverse Bilder, die man sich auch vergrößert ansehen kann. Hierzu gebe ich dem Link ein Anhängsel mit. Auf der aufgerufenen Seite habe ich dann ein JavaScript, der das ensprechende Anhängsel verarbeitet.
Da ich nun auf CSS umstelle und dort auch eine Menü vorhanden ist, bringt der Browser mir das anzuzeigende Bild im ersten Menü, wo auch ein Bildchen vorhanden ist. Ich denke mal, dass er das erste scr nimmt und es überschreibt. Das sieht natürlich was unglücklich aus.
Da ich irgendwie aber eh weg möchte von JavaScript und mir dann natürlich PHP lieber wäre, ist nun die Frage, wie man soetwas mit PHP lösen könnte?
So schaut's zur Info bisher aus:
...
<a href="/bilder/index.htm?bild">
<img src="/bilder/bild.jpg" alt="" width="150">
</a>
Und in der index.htm:
<head>
...
<!--
function ChangeBild()
{
if(window.location.search != "")
var jpg = ".jpg";
var Datei = window.location.search;
var Bild = Datei.substr(1,Datei.length);
Bild = Bild + jpg;
document.images[0].src = Bild;
}
//-->
</script>
</head>
<body onLoad="ChangeBild()">
Bis denn
Stanload
Hallo,
auf meiner derzeitigen HP zeige ich diverse Bilder, die man sich auch vergrößert ansehen kann. Hierzu gebe ich dem Link ein Anhängsel mit. Auf der aufgerufenen Seite habe ich dann ein JavaScript, der das ensprechende Anhängsel verarbeitet.
Du solltest Dir nochmals bewusst machen, was PHP tut und was nicht.
PHP liefert HTML-Quellcode aus, der vom Browser interpretiert wird.
Also sorge dafuer, dass PHP je nach Parameter verschiedene
<img>-Tags ausliefert.
z.B.
album.php => kleines Bild
album.php?version=gross => grosses Bild
if ((isset($_GET['version'])) AND ($_GET['version']=="gross"))
{ $img="<img src='klein.jpg' width='100' height='75' alt='...'>"; }
else
{ $img="<img src='gross.jpg' width='400' height='300' alt='...'>"; }
echo $img;
Gruesse,
Thomas
Hallo,
Sorry, falsche Reihenfolge. Richtig waere folgendes:
album.php => kleines Bild
album.php?version=gross => grosses Bild
if ((isset($_GET['version'])) AND ($_GET['version']=="gross"))
{ $img="<img src='gross.jpg' width='400' height='300' alt='...'>"; }
else
{ $img="<img src='klein.jpg' width='100' height='75' alt='...'>"; }
Gruesse,
Thomas
Hallöchen,
Du solltest Dir nochmals bewusst machen, was PHP tut und was nicht.
PHP liefert HTML-Quellcode aus, der vom Browser interpretiert wird.
Hm? Derzeit benutze ich auf meiner HP kein PHP, sondern HTML und JavaScript. Auf den Seiten, die ich nun erstelle, verwende ich PHP.
Also sorge dafuer, dass PHP je nach Parameter verschiedene
<img>-Tags ausliefert.z.B.
album.php => kleines Bild
album.php?version=gross => grosses Bildif ((isset($_GET['version'])) AND ($_GET['version']=="gross"))
{ $img="<img src='klein.jpg' width='100' height='75' alt='...'>"; }
else
{ $img="<img src='gross.jpg' width='400' height='300' alt='...'>"; }echo $img;
Wofür gibt's Du 'version' mit und nicht nur 'gross'?
Die ganze Sache klappt natürlich nun aber auch nur für jeweils ein Bild. Wenn ich nun aber 25-30 Bilder habe, muss ich entsprechende viele If-Abfragen machen, wobei ich nicht verstehe, warum Du hier eine If-Abfrage machst?
Ich klicke auf ein Bild, welches klein dargestellt ist und möchte, dass es dadurch auf eine neue Seite vergrößert dargestellt wird.
Bis denn
Stanload
Hallo,
Hm? Derzeit benutze ich auf meiner HP kein PHP, sondern HTML und JavaScript. Auf den Seiten, die ich nun erstelle, verwende ich PHP.
OK, Du faengst also mit PHP erst gerade an.
Gut zu wissen;-)
Kauf Dir ein gutes Buch, oder lies Dich auf dem Web in die Grundlagen ein.
Alles koennen wir Dir hier nicht erklaeren.
Wofür gibt's Du 'version' mit und nicht nur 'gross'?
Das ist so ueblich.
blabla.html?gugus
ist so ein Gebastel fuer JavaScript.
Bei PHP uebergibt man normalerweise eben Parameter,
die einen Namen und einen Wert haben:
skript.php?name=wert
Diese sind dann in $_GET['name'] und $_REQUEST['name'] verfuegbar,
bei alten Versionen von PHP (oder wenn register_globals=on ist) auch
als globale Variable $name. Letzteres sollte man aber vermeiden.
Die ganze Sache klappt natürlich nun aber auch nur für jeweils ein Bild. Wenn ich nun aber 25-30 Bilder habe, muss ich entsprechende viele If-Abfragen machen, wobei ich nicht verstehe, warum Du hier eine If-Abfrage machst?
Weil ich nur eine Ja/Nein-Unterscheidung habe.
Entweder ist das grosse Bild verlangt, oder nicht.
Ich klicke auf ein Bild, welches klein dargestellt ist und möchte, dass es dadurch auf eine neue Seite vergrößert dargestellt wird.
Ich nehme mal an, dass Du eine Thumbnail-Uebersicht hast und
dort die kleinen Bilder anzeigen willst.
Bei Klick auf ein Thumbnail soll dann eine HTML-Seite angezeigt
werden, in die das Bild eingebettet ist.
Richtig?
Wenn untenstehendes immer noch an Deinen Zielen vorbeischiesst,
beschreibe bitte genauer, was Du erreichen willst.
Du machst am besten im PHP-Skript einen Array fuer die Dateinamen der Bilder.
Du kannst auch gleich noch eine Beschreibung fuer jedes Bild mitdefinieren.
$klein[1]="klein1.jpg";
$gross[1]="gross1.jpg";
$beschreibung[1]="Ich auf dem Mount Everest";
$klein[]="kleinbild2.jpg"; // PHP zaehlt automatisch weiter. $klein[] ist also $klein[2]
$gross[]="grossbild2.jpg";
$beschreibung[]="Ich in der Badehose";
$klein[]="kleinesbild3.jpg";
$gross[]="grossesbild3.jpg";
$beschreibung[]="Meine Katze";
u.s.w.
(Ich verwende statt einem Array fuer diesen Zweck eine Klasse.
Hier habe ich Array genommen, weil es einfacher zu erklaeren/begreifen ist.)
Ziel:
Wenn kein Parameter (oder ein falscher) an die URL angehaengt wird,
soll das Skript die Auflistung der Thumbnails anzeigen.
(Die erzeugst Du am besten auch dynamisch mit PHP.)
Wenn ein gueltiger Parameter angehaengt wird, soll das Skript das
einzelne Bild in der grossen Version zeigen.
Ein einzelnes Thumbnail ist dann ein Link mit Parametern:
<a href="skript.php?grossid=1"><img src="klein1.jpg"></a>
Das Skript wird dann also so aufgerufen.
skript.php?grossid=1
In der Variable $_GET['grossid'] steht die Nummer des verlangten Bildes.
Kopiere diesen Wert in eine neue Variable $bildnr, die zuvor auf Null
gesetzt wird, und mach gleichzeitig einen Integer daraus:
$bildnr=0;
if (isset($_GET['grossid']))
{ $bildnr=intval($_GET['grossid']); }
Schau nun, ob es ein Bild mit dieser Nummer gibt:
if (isset($gross[$bildnr])) // Es gibt ein grosses Bild fuer diese Nummer:
{
echo "<h2>Bild Nr. $bildnr</h2>\n";
echo "<p><img src='".$gross[$bildnr]."' alt='Foto Nr. $bildnr'></p>";
echo "<p>".$beschreibung[$bildnr]."</p>";
}
else // Kein Bild mit dieser Nummer definiert, oder gar kein Parameter grossid uebergeben:
{
/* Quellcode zum Anzeigen der Thumbnails, z.B. mit foreach() Schleife oder so... */
}
---
Alles ungetestet und aus dem hohlen Bauch, frisch drauflosgetippt.
Sollte aber funktionieren.
Etwas sehr aehnliches verwende ich hier:
http://www.tiptom.ch/album/keramik/vernissage.html => Thumbnails
http://www.tiptom.ch/album/keramik/vernissage.html?bild=002 => Einzelbild (Web-Version, 75kB)
http://www.tiptom.ch/album/keramik/vernissage.html?hoch=002 => Einzelbild (Original, 850kB)
Gruesse,
Thomas
Hallöchen,
OK, Du faengst also mit PHP erst gerade an.
Gut zu wissen;-)Kauf Dir ein gutes Buch, oder lies Dich auf dem Web in die Grundlagen ein.
Alles koennen wir Dir hier nicht erklaeren.
Ein bissle Erfahrung habe ich schon mit PHP, aber bestimmt nicht soviel, wie viele andere hier.
Ich nehme mal an, dass Du eine Thumbnail-Uebersicht hast und
dort die kleinen Bilder anzeigen willst.
Bei Klick auf ein Thumbnail soll dann eine HTML-Seite angezeigt
werden, in die das Bild eingebettet ist.
Richtig?
So kann man es sehen, wobei die Seiten halt nicht nur aus Bildern, sondern auch aus Text bestestehen, hier ein Beispiel:
http://www.stanload.de/ontour/2003061623.html
$klein[1]="klein1.jpg";
$gross[1]="gross1.jpg";
$beschreibung[1]="Ich auf dem Mount Everest";$klein[]="kleinbild2.jpg"; // PHP zaehlt automatisch weiter. $klein[] ist also $klein[2]
$gross[]="grossbild2.jpg";
$beschreibung[]="Ich in der Badehose";$klein[]="kleinesbild3.jpg";
$gross[]="grossesbild3.jpg";
$beschreibung[]="Meine Katze";u.s.w.
(Ich verwende statt einem Array fuer diesen Zweck eine Klasse.
Hier habe ich Array genommen, weil es einfacher zu erklaeren/begreifen ist.)Ziel:
Wenn kein Parameter (oder ein falscher) an die URL angehaengt wird,
soll das Skript die Auflistung der Thumbnails anzeigen.
(Die erzeugst Du am besten auch dynamisch mit PHP.)Wenn ein gueltiger Parameter angehaengt wird, soll das Skript das
einzelne Bild in der grossen Version zeigen.Ein einzelnes Thumbnail ist dann ein Link mit Parametern:
<a href="skript.php?grossid=1"><img src="klein1.jpg"></a>Das Skript wird dann also so aufgerufen.
skript.php?grossid=1In der Variable $_GET['grossid'] steht die Nummer des verlangten Bildes.
Kopiere diesen Wert in eine neue Variable $bildnr, die zuvor auf Null
gesetzt wird, und mach gleichzeitig einen Integer daraus:
$bildnr=0;
if (isset($_GET['grossid']))
{ $bildnr=intval($_GET['grossid']); }Schau nun, ob es ein Bild mit dieser Nummer gibt:
if (isset($gross[$bildnr])) // Es gibt ein grosses Bild fuer diese Nummer:
{
echo "<h2>Bild Nr. $bildnr</h2>\n";
echo "<p><img src='".$gross[$bildnr]."' alt='Foto Nr. $bildnr'></p>";
echo "<p>".$beschreibung[$bildnr]."</p>";
}
else // Kein Bild mit dieser Nummer definiert, oder gar kein Parameter grossid uebergeben:
{
/* Quellcode zum Anzeigen der Thumbnails, z.B. mit foreach() Schleife oder so... */
}
Ich muss also die möglichen Bilder, die es in gross geben wird, erst alle deklarieren?
Wenn ich aber weiss, dass es ein grosses Bild gibt (deshalb biete ich ja den Link an), könnte man doch dadrauf verzichten, oder?
Irgendwie verstehe ich das wohl nicht so wirklich :-(.
Bis denn
Stanload
Hallo,
So kann man es sehen, wobei die Seiten halt nicht nur aus Bildern, sondern auch aus Text bestestehen, hier ein Beispiel:
http://www.stanload.de/ontour/2003061623.html
Achso. Du machst die Seiten also "von Hand", und ab und zu
hat es kleine Bilder, von denen einige "vergroessert"
werden sollen.
$klein[1]="klein1.jpg";
$gross[1]="gross1.jpg";
$beschreibung[1]="Ich auf dem Mount Everest";
[SNIP mein Vorschlag]
Das Skript wird dann also so aufgerufen.
skript.php?grossid=1
Ich muss also die möglichen Bilder, die es in gross geben wird, erst alle deklarieren?
Das ist das sicherste und sauberste.
Zudem kannst Du so auch fuer jedes Bild eine Legende
schreiben, was ich als Besucher Deiner Seiten sicher
ganz nett faende.
(Und auch das ALT-Attribut koenntest Du sinnvoll fuellen...)
Wenn ich aber weiss, dass es ein grosses Bild gibt (deshalb biete ich ja den Link an), könnte man doch dadrauf verzichten, oder?
Eine Alternative waere, dem Skript, das das grosse Bild
anzeigen soll, effektiv den Dateinamen des Bildes weiterzugeben.
skript.php?bild=mounteverest.jpg
Solange Du nur das IMG-Tag zum Einbetten des Bildes in den
HTML-Quellcode schreibst, ist das eigentlich auch kein
Sicherheitsrisiko. Selbst wenn ein boeser Junge reinschreibt:
skript.php?bild=.htaccess
wird daraus ja nur
<img src=".htaccess" alt="...">
Kritisch sind da eigentlich nur die Sonderzeichen <, > und ",
die Du aber leicht rausfiltern kannst mit htmlspecialchars().
Eigentlich ist selbst das ueberfluessig - wenn ein boeser
Junge an der URL rumspielt, soll er sich nicht wundern,
wenn er eine kaputte Seite angezeigt bekommt...
Anders sieht es aus, sobald Du mit dem PHP-Skript effektiv
auf die Datei zugreifst, z.B. um die Dimensionen des Bildes
automatisch auszulesen mit getimagesize().
Dann solltest Du dafuer sorgen, dass vom Skript wirklich nur
Dateinamen und Pfade verwendet werden, die erlaubt sind.
Etwas sicherer kannst Du das machen, indem Du die Endigung ".jpg"
automatisch anfuegst und saemtliche Slashes und Backslashes ("/","")
aus dem Parameter entfernst.
http://www.dclp-faq.de/q/q-security-variablen.html (Punkt 4)
Wenn Du keine Punkte in den Dateinamen hast (ausser denjenigen
vor dem "jpg" natuerlich), kannst Du auch noch alle Punkte
entfernen.
Ein Link auf das Skript haette dann z.B. folgende URL:
skript.php?bild=mounteverest
Das Skript soll zuerst den Dateinamen "sauber" machen
und dann den Pfad zum Bild zusammensetzen:
$dateinamesicher=htmlspecialchars(strip_tags($_GET['bild']));
$dateinamesicher=str_replace("/","",$dateinamesicher);
$dateinamesicher=str_replace("\","",$dateinamesicher);
$dateinamesicher=str_replace(".","",$dateinamesicher);
$bildpfad='pfad/zum/bildverzeichnis/'.$dateinamesicher.'jpg';
// sollte nun 'pfad/zum/bildverzeichnis/mounteverest.jpg' heissen.
Nun kannst du das IMG-Tag ausgeben:
echo "<img src="$bildpfad" alt="Foto im Grossformat">";
Alles klar?
Gruesse,
Thomas
Hallöchen,
Achso. Du machst die Seiten also "von Hand", und ab und zu
hat es kleine Bilder, von denen einige "vergroessert"
werden sollen.
Bingo *g*!
$dateinamesicher=htmlspecialchars(strip_tags($_GET['bild']));
$dateinamesicher=str_replace("/","",$dateinamesicher);
$dateinamesicher=str_replace("\","",$dateinamesicher);
$dateinamesicher=str_replace(".","",$dateinamesicher);
$bildpfad='pfad/zum/bildverzeichnis/'.$dateinamesicher.'jpg';
// sollte nun 'pfad/zum/bildverzeichnis/mounteverest.jpg' heissen.Nun kannst du das IMG-Tag ausgeben:
echo "<img src="$bildpfad" alt="Foto im Grossformat">";
Alles klar?
Ich glaube, Du verstehst dein Handwerk, danke.
Werd's wohl jetzt ein wenig anders machen, aber die Informationen waren sehr gut und können mir noch sehr viel weiterhelfen.
Bis denn
Stanload