lightbox richtig in homepage einbinden

    Hi,

    ich habe mir vor einiger Zeit den lightbox JS v2.0 download gedownloadet.
    Nun weiss ich nicht wie ich die lightbox richtig in meine homepage einbauen kann.
    Ich habe mir die Anleitung genau durchgelesen, habe es aber nicht hinbekommen.
    Kann mir einer sagen, wie ich das genau machen muss?? Und muss ich die Bilder auch voher auf meinen Webspace laden???


    Ludgerf321

    also generell gilt, daß das komplette filesystem verfügbar sein muss, bevor du es testen kannst.. aber hab selber noch net mit lightbox gearbeitet...
    haste nen link zur doku oder sowas??

    eigentlich musst du nur alle files uploaden und dann den code einbinden der dort auf der downloadseite steht dann natürlich noch die Pfade für die bilder anpassen ....

    mfg

    Zitat von Josi

    eigentlich musst du nur alle files uploaden und dann den code einbinden der dort auf der downloadseite steht dann natürlich noch die Pfade für die bilder anpassen ....

    mfg

    Da oben steht alles du musst nur den pfad vom bild einfügen...

    mfg

    wassn daran so schwer?

    ludgerf321,

    vielleicht hilft Dir das weiter:

    So sieht die Einbindung im Link aus.....

    Code
    [url='img/stone20.jpg'][img]img/image020.gif[/img][/url]


              Alabasterkugel
von Appenrode/Harz


    und im <head> werden die script-links eingebettet:

    Code
    <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

    Ansehen kannst Du Dir es hier: http://www.harz-achat.de/achate.html .

    P.S.: Oh, :oops: ich habe synaptic übersehen. Naja kommt ja mal vor,sorry.

    Also du hast auf deiner Site die Pfade nicht richtig angegeben :

    wenn man die Pfade die du für die Bilder benutz so eingibt ist die datei nicht vorhanden...

    Also da musst du nur die Pfade mal checken und natürlich auch so wie hier schon viele sagten alles hochladen...

    "Grösse allein ist nicht entscheidend." sagte Albert Einstein, denn:
    "Eine Biene sammelt an einem Tag mehr Honig
    als ein Elefant in seinem ganzen Leben."

    so ich habe alles komplett neu gemacht. Es sollte nun auch alles richtig und nachvollziehbar sein.

    Falls trotzdem noch jemand was findet, was nicht in Ordnung ist, haut es mir um die Ohren :wink:

    Link zur Seite: http://www.lutz-nelde.de/lightbox-tutorial/tutorial.htm

    alternativ auch hier: http://blog.lutz-nelde.de/2008/01/12/tut…epage/#more-192


    Beispielseite: http://www.lutz-nelde.de/lightbox-tutorial/beispiel.htm[/url]

    Hi, ich bastel gerade an meiner HP und habe ein Problem bei der lightbox. Die Seite ist noch nicht online. Hoffe ihr könnt mir helfen.

    Mein Problem. Der Schatten der Lightbox geht nicht bis zum rechten Rand.

    Der CSS Code... ich habe gelesen das man bei dem CSS Code was ändern muss:

    ..............................
    #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }

    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0; }
    #imageContainer{ padding: 0; }

    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

    #imageData{ padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
    #imageData #caption{ font-weight: bold; }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
    #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

    ...................................

    Danke für eure Mühe....

    Heißt das dann das ich den Quell Code von der Seite ändern muss auf der die Bilder zur Auswahl stehen. Ich habe gelesen das der CSS Code bearbeitet werden müsste um dieses Problem zu beheben???

    Standardmäßig zieht sich der overlay automatisch auf die maximale höhe & breite, außer du meinst IE6 oder 7, damit hatte ich auch probleme und hab es in dem fall einfach ausgeschaltet. Im Firefox funktionierts bei mir nämlich - ich tippe einfach darauf, dass du irgendwo ein Fehler hast.

    Ich habe mal rumprobiert und die lösung gefunden.

    aber schau lieber nochmal rein.... bitte nehme Rücksicht auf mein Quellcode. Ich bin Autodidakt und die Seite habe ich mit DW selbst erstellt. Die Metas habe ich bewusst weggelassen.... muss nicht jeder wissen wer hier seine Seite so deletantisch bastelt.

    Der Code:
    ........................


    ..................................

    Einmal editiert, zuletzt von synaptic (13. Oktober 2009 um 14:12) aus folgendem Grund: codetags ergänzt für bessere lesbarkeit des sourcecodes -synaptic-