Bild zentriert in neuem Tab öffnen ohne eigene Datei anzulegen

Dieses Thema im Forum "Webdesign" wurde erstellt von The Frozen, 17. Juli 2010 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 17. Juli 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Hey Jungs,
    wahrscheinlich bin ich komplett auf dem falschen Dampfer also frag ich jetzt mal nach.

    Kurz:
    Wie kann ich ein Bild, ohne ne eigene Datei anzulegen, in nem eigenen Tab, zentriert und mit 40px abstand nach oben öffnen?

    Lang mit Lösungsansatz:
    Ich will ne kleine schlichte Page machen und auf ihr ein paar Bilder online stellen. Auf der normalen Page sind die bilder in klein und wenn man sie anklickt sollen sie eben in groß in nem eigenen Tab geöffnet werden. Das Problem ist dass ich den Hintergrund gerne Schwarz hätte und die Bilder zentriert für diejenigen die einen größerden Bildschirm haben.

    Da dies mit html scheinbar nicht möglich ist hab ich mir ein javascript aus dem Netz geholt (wovon ich absolut keine Ahnung hab). Es sieht so aus:
    Code:
    <script type="text/javascript" language="javascript">
    function popup(Bildurl){
     NeuesFenster = window.open("neuesFenster.html", "Bild");
     var html = '<html><body bgcolor="#000000" topmargin="50px" align="center"><img src='+Bildurl+'></body></html>';
    }
    </script>
    <a href="javascript:popup('./rimini/IMGP7805x.jpg')"><img src="rimini/IMGP7805s.jpg"></a>
    
    (in der neuenFenster.html steht nichts)

    Wenn ich das ganze dann bei mir auf dem Desktop ausprobiere gehen die Fenster schon auf aber es hängt öffter mal ein bisschen. Wenn ich alles auf nen hoster lade passiert rein garnichts wenn ich die Bilder anklicke und ich bekomm komische "Smileys" angezeicht.

    Wenn wir schon dabei sind, was passiert wenn jemand JavaScript nicht aktiviert hat? Wenn beim anklicken der Bilder dann nichts passiert ist das OK.

    Schonmal danke fürs Lesen
    Frozen
     
  2. 17. Juli 2010
    AW: Bild zentriert in neuem Tab öffnen ohne eigene Datei anzulegen

    Also für das was du machen willst würde ich einfach lightbox benutzen. Da musst du nix mehr großartig rumprogrammieren.

    Link: Lightbox

    Es gibt da noch vieles mehr, aber ich persönlich würde das empfehlen. Is am wenigsten Arbeit

    EDIT. Du willst das Bild nur in nem neuen Tab öffnen?
    Dann mach doch einfach nen link in der form:
    HTML:
    <a href="bildanzeigen.php?bild=123.jpg" target="_blank"><img src="123.jpg"></a>
    und die bildanzeigen.php baust du folgendermaßen auf:

    PHP:
    <img src="<?php  echo  $_GET [ 'bild' ];  ?>" style="margin-top:40px;"> 
    Wenn du dass jetzt noch in eine Box á 100%x100% baust, ist alles schön zentriert.
     
  3. 17. Juli 2010
    AW: Bild zentriert in neuem Tab öffnen ohne eigene Datei anzulegen

    bei "bekomme ich komische Smilies angezeigt" muss ich echt grad ein wenig schmunzeln ^^
    ohmann

    hier hast du nen funktionierenden code:
    Code:
    function popup(src) {
     var win = window.open("neuesFenster.html", "Bild");
     win.document.open();
     win.document.write('<html><body><p align="center" style="Margin:40px;"><img src="' + src + '" alt="" /></p></body></html>');
     win.document.close();
    }
    
    und eingebunden wird das so:
    HTML:
    <script type="text/javascript">
    // <![CDATA[
     function popup(src) {
     var win = window.open("neuesFenster.html", "Bild");
     win.document.open();
     win.document.write('<html><body><p align="center" style="Margin:40px;"><img src="' + src + '" alt="" /></p></body></html>');
     win.document.close();
     }
    // ]]>
    </script>
     
  4. 17. Juli 2010
    AW: Bild zentriert in neuem Tab öffnen ohne eigene Datei anzulegen

    Ah ok danke ihr zwei. Ich schau mir das mit der Lightbox mal an das sieht eigentlich auch ganz gut aus aber ich glaub ich bleib beim uhrsprünglichen Plan. Das mit dem Smilies kommt eigentlich deswegen weil ich gestern versucht hab den Fehler zu finden und immer wenn die Dinger kamen das Gefühl hatte sie lachen mich aus
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.