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.

    Einmal editiert, zuletzt von hnaspteer (26. Februar 2014 um 18:29)

  • So auf die schnelle, Anfänger unfreundlich (weil halt flexibel), fällt mir (ohne selbst was zu häckseln) das hier ein:
    https://jqueryui.com/dialog/ (ist ein jquery addon, weit verbreitet, findet man jede Menge infos im Web)

    //P.S. eigtl. dachte ich an ein anderes Plugin, das finde ich aber gerade nicht, das da ist sogar etwas simpler

    Einmal editiert, zuletzt von Grevas (27. Februar 2014 um 00:16)

  • 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

    3 Mal editiert, zuletzt von hnaspteer (28. Februar 2014 um 21:43)

  • 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.

    Einmal editiert, zuletzt von hnaspteer (1. März 2014 um 00:29)

  • 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
    <meta charset="UTF-8">

    - - - Aktualisiert - - -


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

    Falsch

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


    Richtig

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

    Falsch

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


    Richtig

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

    Falsch

    HTML
    <dl>
        <p>Click to view</p>    
    </dl>


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

    Falsch

    HTML
    </body>
        <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.

    Einmal editiert, zuletzt von hnaspteer (1. März 2014 um 01:02)

  • 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

    Einmal editiert, zuletzt von hnaspteer (2. März 2014 um 14:11)

  • 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

    Einmal editiert, zuletzt von hnaspteer (2. März 2014 um 23:17)

  • 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
    <body>
    
    
    <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.

    2 Mal editiert, zuletzt von explanator (3. März 2014 um 12:08) aus folgendem Grund: leichte Korrekturen