Lightbox mit Text, Links und Bildern.

hnaspteer

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.

Grevas

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

explanator

Vielleicht ist es ja das hier, was du suchst --> https://code.google.com/p/jquery-modalbox-plugin/
und
http://opensource.steffenhollstein.de/templates/modalbox/

hnaspteer

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

hnaspteer

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.

explanator

Dann brauchst du wahrscheinlich ein overflow-y:scroll oder auto im CSS for dieses Element.

hnaspteer

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.

explanator

Hast du mal ein Link zu deiner Testseite, das man sich das mal ansehen kann, weil so wird das schwierig.

hnaspteer

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

explanator

Es gibt keine Element float --> http://dev.w3.org/html5/markup/elements.html
Falsche Schreibweise zum Metatag charset.

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

hnaspteer

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.

explanator

Zitat von hnaspteer

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

Zitat von hnaspteer

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.

hnaspteer

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.

hnaspteer

Hallo, hab nun alle Fehler soweit beseitigt:

Zitat

http://validator.w3.org/unicorn/check?ucn_uri=thephilliesbluntaffair.com%2F&doctype=HTML5&charset=utf-8&ucn_task=conformance#

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

synaptic

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.

hnaspteer

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?

Grüße

Peter

explanator

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:

HTML

<div id="float">

    <div style="position: fixed; left: 0; top: 65px; z-index:2; display: block">
     <ul id="sidebar-nav" class="nav nav-list">
        <li><a href="#"><img src="images/totop.png" onmouseover="src='images/totop_hover.png'" onmouseout="src='images/totop.png'" width="56" height="56" alt=""></a>
        </li>
        <li><a class="aboutme" href="#uebermich"><img src="images/about.png" onmouseover="src='images/about_hover.png'" onmouseout="src='images/about.png'" width="56" height="56" alt=""></a>

         </li>
        <li><a class="aboutme" href="#contact"><img src="images/contact.png" onmouseover="src='images/contact_hover.png'" onmouseout="src='images/contact.png'" width="56" height="56" alt=""></a>
        </li>

      </ul>
    </div>

</div>

Alles anzeigen

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:

HTML

<body>
<ul id="sidebar-nav">
        <li><a href="#"><img src="images/totop.png" onmouseover="src='images/totop_hover.png'" onmouseout="src='images/totop.png'" width="56" height="56" alt=""></a>
        </li>
        <li><a class="aboutme" href="#uebermich"><img src="images/about.png" onmouseover="src='images/about_hover.png'" onmouseout="src='images/about.png'" width="56" height="56" alt=""></a>

         </li>
        <li><a class="aboutme" href="#contact"><img src="images/contact.png" onmouseover="src='images/contact_hover.png'" onmouseout="src='images/contact.png'" width="56" height="56" alt=""></a>
        </li>

      </ul>
<div class="container">

Alles anzeigen

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

Code

/* --------------------------
    Float Side Bar
----------------------------- */


ul#sidebar-nav {
    list-style: none;
    position: fixed; 
    left: 0; 
    top: 65px; 
    z-index:2;
}


ul#sidebar-nav li {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;

}


ul#sidebar-nav li:hover {
    color: #f3f3f2;
}

Alles anzeigen

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.

hnaspteer

Somit funktioniert es nun auch in Chrome, wunderbar.

Vielen Dank für die großartige Hilfe.

Grüße

Peter

Tags

Benutzer online in diesem Thema