[JavaScript] Fenster ohne Adress/Linkleiste, das sich einem Bild anpasst ???

(_H.A.W.K_) · 17. August 2002

Fenster ohne Adress/Linkleiste, das sich einem Bild anpasst ???

Hi
Wenn man auf DIESER Seite auf ein Bild klickt, wird es in einem Fenster geöffnet, das sich genau dem Bild anpasst. Wie kann ich so ein Fenster erstellen, damit es auch ohne Adress/Linkleiste ist und in der Mitte vom Monitor erscheint ???

Steffen · 17. August 2002

Bist du denn schonmal auf die Idee gekommen, dir den Quellcode der betreffenden Seite anzuschauen?

Beim Klick auf ein Bild wird die JavaScript-Funktion Popup aufgerufen, welche ebenfalls in dem Quelltext der Seite enthalten ist. Dieser Funktion wird der Name einer Bild-Datei übergeben, welche dann in einem mit JavaScript geöffneten neuen Fenster angezeigt wird.

Die Größe und Position des Fensters passen sich jedoch nicht an die Größe des Bildes an, sondern es wird davon ausgegangen, dass alle Bilder 800x600 Pixel groß sind.

Man könnte das dann noch dahingehend erweitern, dass man dem name-Attribut im IMG-Tag einen Wert zuweist, sodass man auch die Breite und Höhe des Bildes mittels {name-Wert}.Width bzw. {name-Wert}.Height herausfinden und die Fenstergröße entsprechend anpassen könnte...

Etwas Eigeninitiative bitte, dann helfe ich gerne noch mehr...

(_H.A.W.K_) · 17. August 2002

Hi Steffen
Also ... zum einen verstehe ich nicht viel von solchen Quellcodes. Zum 2ten hab ich schon im Quellcode der Seite nachgesehen (so schlau bin ich auch). Jedoch weis ich nicht wo da die richtige Stelle ist.
Wäre gut, wenn du mir die richtige Stelle herraussuchen könntest.
cya

Steffen · 17. August 2002

Damit du die Popup-Funktion im Quellcode findest, musst du diesen nach "function Popup" durchsuchen. Der erste Treffer ist dann die gewünschte Stelle!

Es gibt grundsätzlich zwei Möglichkeiten, das Fenster auf die entsprechende Größe zu bringen und zu positionieren.

Man kann entweder schon beim Klicken auf den Link ein Fenster öffnen und die Bild-Datei darin darstellen. Dabei würde die Funktion zum Öffnen des Fenster auch schon die Positionierung etc. vornhemen. Der Nachteil ist, dass diese JavaScript-Funktion zum Öffnen des Fensters ja schon irgendwoher wissen muss, wie groß das Fenster sein soll, ohne dass sie irgendwas (außer den Dateinamen) über das anzuzeigende Bild weiß. Also muss man die Breite und Höhe der Bilder festlegen, d.h. alle Bilder müssen die gleiche Größe haben!
Die etwas "fortgeschrittenere" Methode wäre, im Popup-Fenster eine HTML-Datei (und nicht die Bild-Datei direkt) zu öffnen. Diese HTML-Datei müsste dann jedoch server-seitig dynamisch (z.B. mit PHP) erzeugt werden, da im Quellcode ja irgendwo der IMG-Tag mit dem immer anderen Namen der Bild-Datei erscheinen muss. Die Vorteile dieser Methdode wären, dass man mit HTML die Ränder zum Bild im Browser entfernen kann und dass die Größe des Bildes nicht festgelegt sein müsste, da man diese hier im Gegensatz zur ersten Methode abfragen könnte, weil das entsprechende Bild ja in der aktuellen Datei angezeigt wird.

Der folgende Code, den ich gerade als Beispiel geschrieben habe, wäre ein Beispiel zur einfacheren Variante:

Code:

<html>
<head>
    <script language="Javascript" type="text/javascript">
    <!--
    function popup( filename ) {
        
        // Config
        var base_url = 'http://127.0.0.1/pictures/';
        var img_width = 800;
        var img_height = 600;
        
        // Da die Browser noch Rand um das Bild lassen,
        // muss zusätzlich Platz geschaffen werden
        img_width += 40;
        img_height += 30;
        
        // Popup öffnen
        window.open( base_url + filename, '', 'width='+img_width+', height='+img_height+', left='+((screen.availWidth-img_width)/2)+', top='+((screen.availHeight-img_height)/2)+', toolbar=no, menubar=no, scrollbars=yes, status=yes, location=no' );

    }
    //-->
    </script>
</head>
<body>
    <a href="javascript: popup( 'bild.jpg' )">Klick</a>
</body>
</html>

Wenn du die Bilddateien z.B. auf deiner Festplatte C im Verzeichnis "pictures" ablegst, müsstest du der Variablen base_url im Config-Abschnitt den Wert 'C:\pictures\\' zuweisen.

Wenn du dann auf den Link klickst, den ich als Beispiel eingefügt habe, würde die Datei C:\pictures\bild.jpg in dem Popup angezeigt werden. Bei weiteren Links müsstest du dann nur den Dateinamen anpassen, z.B. bild2.jpg usw.

Hinweis: Im Code musst du das Leerzeichen zwischen "java" und "script" entfernen, das wird vom Forum einegfügt...

(_H.A.W.K_) · 17. August 2002

Hi Steffen
Erst mal Danke für die ausführliche Erklärung

Jedoch hätte ich noch eine Frage ...
Wie kann ich NUR das Bild anzeigen lassen, also ohne dem blauen Balken darüber ??? Hab das schon mal gesehen. Was muss ich da noch mit in den Quelltext schreiben ???
Ach ja, der Rand um dem Bild ist noch immer. Ich bekomme das Bild irgendwie nicht bis anden Rand. Es ist immer ein kleines Stück nach rechts-unten verrutscht.
cya

Steffen · 17. August 2002

Wie kann ich NUR das Bild anzeigen lassen, also ohne dem blauen Balken darüber ??? Hab das schon mal gesehen. Was muss ich da noch mit in den Quelltext schreiben ???

Ich bin mir jetzt nicht im Klaren, was für einen blauen Rand zu meinst. Etwa die "Kopfzeile" eines jeden Windows-Fensters?

Ach ja, der Rand um dem Bild ist noch immer. Ich bekomme das Bild irgendwie nicht bis anden Rand. Es ist immer ein kleines Stück nach rechts-unten verrutscht.

Dass diese Ränder beid er anderen Methode nicht mehr erscheinen, ist ja gerade deren Vorteil. Ich wüsste nicht, wie man die Ränder bei der im Beispiel verwendeten Methode entfernen sollte, wenn es nicht der Anwender manuell in seinen Browser-Einstellungen ändert. D.h. ich kann da gerade noch was ausprobieren, falls es funktionieren sollte, melde ich mich nochmal...

Update: Hmm ne, vergiss es. Ich wüsste nicht, wie man die Ränder, wenn im Popup nur das Bild aber kein HTML angezeigt wird, da wegbekommen sollte. Meine Idee war, dem neuen Fenster eine Bezeichung zu geben (mit dem Code: fenster = window.open( ... );) und dann auf die CSS-Eigenschaft margin zuzugreifen, was jedoch nicht funktioniert hat. Wenn hier jemand anderes eine Idee hat, dann her damit.

(_H.A.W.K_) · 17. August 2002

Danke dass du mir helfen willst

Hab HIER mal eine Seite gefunden, da ist auch kein Rand zu sehen. Schau sie dir ein mal an. Jedoch hab ich noch nicht herrausgefunden, wie die das gemacht haben

Vielleicht findest du das ja herraus.
cya

Steffen · 17. August 2002

Ich habe auf der Seite jetzt auf Anhieb nur ein Popup gefunden: Im Shop das Tour-Poster. Wenn du das meinst: Da wird auf eine HTML-Datei gelinkt und nicht direkt auf das Bild...

X23^Piracy · 18. August 2002

Ich habe die Lösung

Ich glaube du willst garnicht das sich ein java fesnter automatisch anpasst ich glaube du möchtest nur das allgemein kein rand in der html datei in der das bild geladen wird angezeigt wird ???

wenn das so seien sollte dann mach mal das hier in deinen body:

<body topmargin="0" leftmargin="0">

Bin ich jetzt der King oder hab ich da was falsch verstanden?

MfG Jens

Steffen · 18. August 2002

Re: Ich habe die Lösung

Original erstellt von X23^Piracy
Bin ich jetzt der King oder hab ich da was falsch verstanden?

Leider nein.

Das würde gehen, wenn man in dem Popup eine HTML-Seite anzeigen würde, aber wir stellen ja hier direkt das Bild dar (ohne es in HTML einzubetten)!

X23^Piracy · 19. August 2002

Ok schade hätte ja seien können aber nochwas ähnliches ergänzend zum eigentlichen problem (ich suche weiter nach einer lösung) ;-) hmm also ich brauche sowas ähnliches, ich möchte to eine art fotoalbum machen wie es hier oft bei reviews von towern etc. zu finden ist mit einer übersicht zum durchklicken oben oder unten und bei klick mit einer ansicht des bildes darüber, am quelltext von cb wollte ich mich dann doch nciht bedienen sowas macht einen unbeliebt. ähnliches habe ich im web leider nicht gefunden allerdings bietet frontpage soetwas allerdings muß ich dort ein web erstellen und mühsam codes zurechtrücken und überflüssiges löschen, kennt jemand einen schönen weg eine art fotoalbum alá computerbase zu machen ? sollte meine frage hier unangemessen oder falsch sein dann bitte einfach ignorieren ;-)

MfG Jens

Steffen · 19. August 2002

Ich habe für Breaker (FB-Mitglied) mal ein äußerlich ähnliches Popup-Script geschrieben, wie wir es auf ComputerBase verwenden, also dass das aktuelle Bild und darunter 4 Thumbnails anzeigt.

Es ist nur äußerlich das selbe, weil wir das auf ComputerBase Datenbank-gestützt regeln. Die kleinere Version des Scriptes hat folgende Einschränkungen:

Man muss die Übersichtsseite der Thumbnails manuell erstellen
Alle Bilder müssen im gleichen Format vorliegen, d.h. wenn ein Bild JPEG ist, müssen auch alle anderen Bilder in dieser "Serie" JPEG sein
Die Thumbnails müssen manuell erstellt werden

Das Script regelt also wie gesagt nur die Ausgabe eines großen Bildes und 4 kleinen Thumbnails in einem Popup. Das erste Bild heißt immer 1.jpg, das Thumbnail des ersten Bildes heißt 1_k.jpg, das zweite Bild 2.jpg und dessen Thumbnails 2_k.jpg usw.

Wenn du mit diesen Einschränkungen leben kannst, dann kann ich das Script ja als Anhang hochladen...

X23^Piracy · 19. August 2002

Ja geil her damit ;-) und das auch noch kostenlos oder hättest du gerne eine gegenleistung ? das nennst du einschränkungen ? das ist doch garnix =) kleine änderungen kann auch selber machen aber so ein grundgerüst wäre echt klasse. kannst du mir das eventuell auch per email schicken ? piracy@gmx.de

Wäre echt klasse von dir.

MfG Jens

Steffen · 19. August 2002

Ne, also wenn dann wird es für alle veröffentlicht, nix E-Mail.

Suche

[JavaScript] Fenster ohne Adress/Linkleiste, das sich einem Bild anpasst ???

(_H.A.W.K_)

Lt. Commander

Steffen

Technische Leitung Pro

(_H.A.W.K_)

Lt. Commander

Steffen

Technische Leitung Pro

(_H.A.W.K_)

Lt. Commander

Steffen

Technische Leitung Pro

(_H.A.W.K_)

Lt. Commander

Steffen

Technische Leitung Pro

X23^Piracy

Lt. Commander

Steffen

Technische Leitung Pro

X23^Piracy

Lt. Commander

Steffen

Technische Leitung Pro

X23^Piracy

Lt. Commander

Steffen

Technische Leitung Pro

Anhänge

Ähnliche Themen