Lightbox mit Text, Links und Bildern.

  • Moin,
    ich habe auf meine website verschiedene grafiken, bilder und icons, die ich gerne auf eine lightbox verlinken würde.
    Dazu habe ich diverse tutorials gefunden, die aber immer nur auf ein bild/img verlinken lassen.


    Ich würde in der lightbox gerne texte, links, bilder etc. unterbringen.


    Im prinzip möchte ich es genauso wie bei http://feedly.com machen, wenn man da ein artikel anklickt, wird man nicht auf die seite verlinkt sondern es öffnet sich eine lightbox, wo der artikel vertieft wird, bilder gezeigt, links, texte und so weiter und so fort.


    vllt könnte ihr mich an ein tutorial weiterleiten oder ein beispiel für den html/css/js geben.


    Danke


    Grüße


    Peter


    edit: also ich weis nicht ob sich das ganze lightbox nennt, ich meine im prinzip eine art overlay box, hoffe das wird durch "feedly" verständlich.

  • Moin,
    danke für die Hilfe. Das ganz ist wohl eine sogenannte overlay box.


    http://jquerytools.org/demos/overlay/


    Hab da auch was gefunden was mir gefällt, allerdings krieg ichs nicht zum laufen, html und css laufen anscheind ohne problem, also wenn ich da veränderung dran vornehme ändert es sich auch, aber leider geht beim klicken das overlay nicht auf.


    Hab das auf der seite gelistet script einfach in meine js.js gepackt und meiner html datei mitgeteilt darauf zuzugreifen.


    Danke für die Hilfe.


    Grüße


    Peter

  • Okay, die overlay box funktioniert mittlerweile, aber leider kann man nicht scrollen, also sobald ich mehr elemente/text drin hab, als mein bildschirm sieht kann ich ihn nicht lesen, weil die box nicht scrollbar ist, mit der normalen scrollleiste des browsers, so wie bei feedly.

  • Ja, dann krieg ich eine Scrollleiste in der Box. Das funktioniert ohne Probleme.
    Aber ich wollte das man quasi mit der normalen Scrollleiste scrollt, ich weiss nicht ob man das versteht, aber wie gesagt, bei feedly gibts zum Glück das Beispiel wie ich es möchte.


    Danke für die Antwort, werd mal nach anderen overflow befehlen googlen, vllt ist der richtige dabei.

  • moin,
    thephilliesbluntaffair.com/ .


    Ich benutze jetzt fancybox, das hab ich soweit einigermassen hingekriegt.


    Allerdings hab ich jetzt noch die Scrollleiste in der box, anstatt ne lange box die mit der normalen browserleiste scrollt.


    Ich weiss nicht ob ich in diesem Thread noch weitere Fragen stellen kann oder lieber ein weiteren aufmachen soll, aber ich frag erstmal hier und wenn nicht erlaubt erstell ich nochmal ein neuen.


    Also, weitere Frage: Ich hab ja links n kleines Menu mit 3 Symbolen, in Firefox scrollt das immer mit wenn ich runterscrolle: "position: fixed; left: 0; top: 65px; z-index:2; display: block"


    Wenn ich allerdings in Chrome meine Website aufrufe, bleibt es oben hängen, muss ich für Chrome und andere Browser noch was einstellen damit es auch funktioniert?


    Wie immer, danke für die Hilfe.


    Grüße


    Peter

  • Zitat

    Es gibt keine Element float --> http://dev.w3.org/html5/markup/elements.html


    Hab ich behoben, indem ich da ein <div id="float> daraus gemacht hab, denk mal das ist gültig.


    Zitat

    Falsche Schreibweise zum Metatag charset.


    Was ist damit gemeint?


    Zitat

    Ansonsten siehe auch die folgenden Fehler, die vom Validator angezeigt werden und erst mal behoben werden sollten:
    http://validator.w3.org/unicorn/chec...sk=conformance


    Werd ich durchgucken und versuchen soweit wie möglich zu beheben.


    Danke Swoweit


    Grüße


    Peter


    edit: Hab das behoben was ich verstanden hab, den Rest versteh ich leider nicht.

  • Hab ich behoben, indem ich da ein <div id="float> daraus gemacht hab, denk mal das ist gültig.


    ja sicher.


    Zitat


    Was ist damit gemeint?


    HTML
    1. <meta charset="UTF-8">


    - - - Aktualisiert - - -



    edit: Hab das behoben was ich verstanden hab, den Rest versteh ich leider nicht.


    Falsch

    HTML
    1. <img src="images/totop.png" onmouseover="src='images/totop_hover.png'" onmouseout="src='images/totop.png'" width="56px" height="56px" alt="">


    Richtig

    HTML
    1. <img src="images/totop.png" onmouseover="src='images/totop_hover.png'" onmouseout="src='images/totop.png'" width="56" height="56" alt="">


    Falsch

    HTML
    1. <img src="images/10.png"/>


    Richtig

    HTML
    1. <img src="images/10.png" alt="">


    Falsch

    HTML
    1. <dl>
    2. <p>Click to view</p>
    3. </dl>


    Siehe http://www.mediaevent.de/xhtml/dl.html zu definitionslisten.


    Falsch

    HTML
    1. </body>
    2. <script type="text/javascript">


    nach dem schliessenden Body-tag darf kein HTML-Element mehr folgen. Das Script gehört also innerhalb der Body-Tags.
    Die Kurzschreibweise <script> reicht aus.

  • Ja, danke, hab ich auch gerade gefunden.
    Hab die meisten Fehler behoben, der Element p not allowed as child of element dl in this context. (Suppressing further errors from this subtree.) ist noch drin. Da weiss ich allerdings nicht wie ich das anders machen soll.


    Und im css sind noch fehler, allerdings im fancybox.css, wo ich nichts dran geändert habe.


    Leider wird die Website nach wie vor nicht korrekt in Chrome wiedergegeben.


    Danke für die Hilfe, echt toll dieses Forum, gerade für Anfänger.


    edit: Ach erst gerade ihre Liste gesehen, da werd ich mich nochmal wegen dem dl schlau lesen. danke.

  • Hallo, hab nun alle Fehler soweit beseitigt:

    Zitat


    Nun zu meinen eigentlichen Fragen:
    1. Scrollleiste, wie schon beschrieben, das sie nicht im fancybox Fenster auftaucht, sondern man mit der Browserscrollleiste scrollt.
    und
    2. Falsche Darstellung in anderen Browsern, wie Chrome und Safari.
    Wäre super wenn ihr mir auch da weiterhelfen könntet.
    Danke.


    Grüße


    Peter

  • http://fancybox.net/api


    schau dir dort mal an, wie du mit der box umzugehen hast :)


    mMn beissen sich deine settings mit deinen wünschen


    ich würde des autosize mal auf vorhandensein prüfen... bei der fancybox sehe ich da nur autoDimensions ;)
    sollte für dich auf true sein und deine inhalte brauchen dann auch abmessungen.


    dann ist das overlay mit nem position:fixed, das sollte auf position: absolute stehen.

  • autoSize:true


    Das wars, super, vielen dank, genauso wollte ich es haben.


    Zu dem Chrome und andere Browser Problem haben sie nicht zufällig auch so eine Lösung, wo ich nur ein Eintrag ändern muss? :-D


    Grüße


    Peter

  • Das Problem der nicht fixierten Navigation links kommt wohl durch die Javascripte zustande.


    Erst einmal alles sichern damit wir eventuelle Fehler rückgängig machen können.


    Dann dieser Abschnitt hier:



    muss an anderer Stelle stehen und braucht auch nicht die beiden umgebenden Divs.
    Den Abschnitt also erst mal verschieben zum Beispiel zwischen

    HTML
    1. <body>
    2. <div class="container">


    Das sollte dann so aussehen:


    Da die ID sidebar-nav im CSS durch das übergeordnete Div #float angesprochen wurde, welches ja jetzt nicht mehr vorhanden ist, müssen auch im CSS folgende Änderungen durchgeführt werden:


    CSS


    Der Code vom Inlinestyle wandert auch ins CSS.
    Alles ungetestet, aber jetzt sollte die Seitennavigation auch in den anderen Browsern fixiert sein.
    Eventuell den z-index anpassen, durch einen höhren Wert, austesten!


    Zu dem Scrollbalken habe ich zur Zeit keine Lösung anzubieten.