kracky: Bild in popup darstellen

SELF-Forum

Bild in popup darstellen

kracky
– Informationen zu den Bewertungsregeln

Hallo,
entschuldigt diese Frage, aber von Javascript habe ich so gut wie keine Ahnung..:-((
ich habe eine Bilergalerie, lauter Thumbnails.
Ich will durch klicken auf ein Thumbnail erreichen das sich ein neues Fenster öffnet, worin das Bild größer dargestellt ist.
Gefunden habe ich bei DR. Web folgendes:

<body onload="self.focus()">
<script language="javascript">
var bild = location.search;
bild = bild.substr(1);
document.write('<A HREF="#" onClick="window.close();return false"><IMG');
document.write('SRC="uploaded_pics/' + bild + '" BORDER=0></A>');
document.write('<a href="#" onClick="JavaScript:self.close()">Fenster schliessen</a>');
</script>

Das ganze wird aufgerufen, indem man das obige unter speichert und mit oeffnen.htm?bild=bild.gif aufruft.

ich habe aber beinen festen Pfad, es gibt mehrere Pfade in denen Bilder sind. Kann man einfach auch noch nen Pfad anhängen oder ist es besser per PHP dem angehängten Bildnamen das Verzeichnis voranzustellen??
Das läuft sowieso alles unter PHP. (die Thumbs erzeugen usw..)
Habe das Script etwas modifiziert, das unter dem Bild steht "schleißen" und man auch da zum schließen klicken kann.

Ist das richtig?

KAnn man auch die Größe des Bildes und des Popups beeinflussen, z.B. das die Bilder immer in einer Breite von 700px dargestellt werden, egal wie groß das original ist??

Gibt es ne einfachere Möglichkeit?

thanks, kracky

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bild in popup darstellen

    molily Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo, kracky,

    ich habe eine Bilergalerie, lauter Thumbnails.
    Ich will durch klicken auf ein Thumbnail erreichen das sich ein neues Fenster öffnet, worin das Bild größer dargestellt ist.
    Gefunden habe ich bei DR. Web folgendes:

    Traue nie Dr. Web. ;) Nein, ehrlich, den Code würde ich dir so nicht empfehlen.

    <body onload="self.focus()">
    <script language="javascript">
    var bild = location.search;

    Eine JavaScript-Lösung ist unzuverlässig, da sie ohne aktiviertem JavaScript nunmal nicht funktioniert. Du solltest mit einer serverseitigen Sprache arbeiten und den Bilddateinamen per GET-Parameter übergeben (oder einfach über den Query String).

    bild = bild.substr(1);

    Damit soll anscheinend das erste Zeichen abgeschnitten werden... AFAIK braucht substr in der Regel zwei Parameter, der zweite kann anscheinend weggelassen werden, wenn bis zum Stringende gemeint ist.

    document.write('<A HREF="#" onClick="window.close();return false"><IMG');
    document.write('SRC="uploaded_pics/' + bild + '" BORDER=0></A>');

    Der Pfad uploaded_pics wird hier natürlich fest angegeben, du könntest ihn aber ohne weiteres im Query String übergeben.

    Das return false ist übrigens hier unnötig.

    document.write('<a href="#" onClick="JavaScript:self.close()">Fenster schliessen</a>');

    onclick="javascript:self.close()"
             ^^^^^^^^^^^ Das ist unnötig.

    </script>

    Das ganze wird aufgerufen, indem man das obige unter speichert und mit oeffnen.htm?bild=bild.gif aufruft.

    Nein, location.search liefert den ganzen Query String, siehe http://selfhtml.teamone.de/javascript/objekte/location.htm#search. bild= ist also überflüssig, weil die URL des geschrieben Bildes dann bild=bild.gif lauten würde, sie soll aber bild.gif lauten.

    ich habe aber beinen festen Pfad, es gibt mehrere Pfade in denen Bilder sind.

    Übergebe dem Script (wenn es dann ein serverseitiges ist) einfach andere Pfadparameter vor dem Bilddateinamen.

    Kann man einfach auch noch nen Pfad anhängen oder ist es besser per PHP dem angehängten Bildnamen das Verzeichnis voranzustellen??

    Letzteres. Ein weiterer GET-Parameter wäre IMHO nicht nötig, wenn es keine anderen GET-Parameter gibt.

    Das läuft sowieso alles unter PHP. (die Thumbs erzeugen usw..)

    Das trifft sich gut, dann kannst du auch ohne weiteres die Seite, welche im Popup-Fenster geöffnet wird und das bild einbindet, mit PHP realisieren.

    Habe das Script etwas modifiziert, das unter dem Bild steht "schleißen" und man auch da zum schließen klicken kann.
    Ist das richtig?

    Ja, das dürfte funktionieren. Wenn du allerdings eine Lösung ohne JavaScript baust, solltest du den href-Parameter anständig füllen, damit die Galerie auch ohne JavaScript voll navigierbar ist (auch für Suchmaschinen oder bspw. wenn jemand sich mit bspw. Wget alle Bilder herunterladen will):

    <a href="#" onclick="self.close()">Fenster schliessen</a>
    -->
    <a href="galerie.php?seite=X#bildx" onclick="self.close()">Fenster schliessen</a>

    Die Informationen, von welcher Seite das Bildanzeigescript aufgerufen wurde, musst du natürlich gegebenenfalls über GET-Parameter übergeben... aber da du sowieso die Thumbs und damit die Links und Aufrufe von window.open() automatisch erzeugst, dürfte das kein Problem sein.

    Man kann sich darüber streiten, ob return false hinter dem self.close() nötig ist - für gewöhnlich sollte die Seite/das Script, das das Bild anzeigt, bei aktiviertem JavaScript in einem Popup-Fenster geöffnet werden, aber wenn du beispielsweise zulässt, dass die Unterseiten direkt verlinkt werden - nein, nicht zulässt, das ist so oder so möglich, du musst also damit rechnen - dann darf der Link zurück zur Galerie nicht das Fenster schließen. *fg* Deshalb solltest du irgendwie Abfragen, ob es ein opener-Fensterobjekt gibt, bevor du die self.close()-Anweisung ausführst... beispielsweise:

    <a href="galerie.php?seite=X#bildx" onclick="if (opener) self.close()">Fenster schliessen</a>

    ...falls ich mich nicht irre. :) Mit opener kann man für gewöhnlich auf das window-Objekt des Fensters zugreifen, welches das Popup-Fenster geöffnet hat. Das ist beispielsweise unter http://aktuell.de.selfhtml.org/tippstricks/javascript/fensterzugriff/index.htm erklärt (man kann Sven nicht genug danken für diesen Artikel, ich verlinke ihn immer wieder ;)).

    KAnn man auch die Größe des Bildes [...] beeinflussen

    Normalerweise wird es so groß dargestellt, wie es nunmal ist, natürlich kannst du mit width und height das Bild skalieren... falls du das willst (ich sehe nicht viel Sinn darin).

    und des Popups beeinflussen, z.B. das die Bilder immer in einer Breite von 700px dargestellt werden, egal wie groß das original ist??

    Ja, klar, für Breite und Höhe des Popup-Fensters gibt es die entsprechenden Einstellungswerte für den dritten Parameter der window.open()-Funktion, das wird unter http://selfhtml.teamone.de/javascript/objekte/window.htm#open beschrieben.
    Damit die Grafik immer dieselbe Größe hast, kannst du wie gesagt die width- und height-Attribute für das img-Element vergeben... wobei ich dir empfehlen würde, die Grafiken eher serverseitig beispielsweise über die GD-Bibliothek von PHP http://de.php.net/manual/de/ref.image.php zu skalieren, damit der Benutzer nicht mehr herunterladen muss ans nötig. Auf hotscripts oder anderen Quellen für PHP-Scripts findest du sicher fertige Scripte, die das Skalieren ermöglichen (für die Thumbs nutzt du sicher schon diese Funktionen).

    Zum Schluss noch ein unfertiger Artikel über eine PHP-Lösung für das Bildeinbindungsscript und eine mögliche JavaScript-Lösung, dort geht es jedoch primär um an die Bildgröße angepasste Popup-Fenster... http://home.t-online.de/home/dj5nu/fanhost/js-popup-galerie.html.
    Da ich eingesehen habe, dass man besser alles mit einer Datenbank machen sollte, habe ich den Artikel nicht zuende geführt, aber das dynamische Schreiben der Links (der Thumbnails) dürfte dasselbe sein.

    Generell mit Popups  befasst sich auch http://home.t-online.de/home/dj5nu/js-popup.html.

    Grüße,
    Mathias

    --
    Remember: KING KONG Died For Your Sins!
    "Wie ein gefoppter Nachtmahr der auf Tücke sinnt..." (Hugo Ball, "Die Katze")
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln