Mini Lightbox (standalone)

  • Sieht praktisch aus, hat eigentlich alle Features, die man braucht.
    Nur finde ich den dunklen Hintergrund, mit welchem die Seite zugedeckt wird, nicht sehr schick, aber das ist Geschmackssache.
    Aber auf jeden Fall sind die Symbole zu unaussagekräftig. Entweder mit Schrift ergänzen oder anders kenntlich machen, was sie bewirken. Auch finde ich die "großen" transparenten Flächen zu abdeckend und irgendwie störend.

  • Wenn ich für den schwarzen Hintergrund was vorschlägen dürfte: eine vergrauung, ähnlich wie's auch in Facebook ist, find ich pers. jetzt recht "nett".

    Zu den Schaltflächen würde ich sagen: kleine und die Innerhalb des Bildes. Meiner Meinung nach nicht breiter als 60 px und dann evtl. auch nur, wenn man mit der Maus an die nähe des Randes kommt. Just my 2 Cents ;)

    Was mir dann noch auffiel: wie ich das erste mal auf den rechten pfeil geklickt hab, kam nur ein kleiner grauer Kasten und kein Bild.

    Ansonsten find's ich eig. richtig gut :)

  • Danke für das Feedback Fipsi.

    Habe einiges angepasst. Habe die Weiter-/Zurück-Buttons verkleinert und Enlarge/Close-Buttons komplett geändert. Sollte nun klarer sein. Der Hintergrund hat nun auch eine andere Farbe. Hab zusätzlich noch das navigieren mit Hilfe der Pfeiltasten hinzugefügt.

    Feedback?
    =O

  • Sehr nice. Schaut wirklich toll aus. Zur Schnelligkeit: manche Bilder laden eine gefühlte Ewigkeit, wobei das auch an meinem Internet liegen kann.
    Ein hätte ich am Design noch auszusetzen ;) ^^ : Ich finde das rote Kreuz zum schließen passt nicht zum restlichen Design. Ein Vorschlag meinerseits wäre ebenfalls ein grauer Kasten, vllt. 25x25 px mit nem schwarzen Kreuz?

    Find ich jedenfalls Klasse, wenn ich mal Zeit hab, mich mal wieder um mein projekt zu kümmern, weiß ich schon, was ich einbetten werde ;) Danke :)

    P.S.: Und dann vllt. noch, wenn man mit der Maus über den Pfeilen oder irgendeinen Button ist, dass dann eingezeigt wird, was gemacht wird? (Für die unwissendere Userschaft ;) ).

    Und dann noch eine Frage: Kann man eine Maximalgröße für die Bilder angeben, bzw,. ist schon eine angegeben?

  • Danke erneut für das Feedback.

    Das mit dem Button anstelle des roten Kreises werde ich mal machen. Und eine Beschriftung werde ich auch hinzufügen.

    @Fipsi: Also wenn das Javascript geladen ist (und das ist es, sobald du ein Bild anklicken kannst und der Layer/das Fenster erscheint), werden nur noch die Bilder übertragen. D.h., wenn diese lange laden, liegt es vermutlich wirklich an deiner Verbindung oder dem Server. Und was meinst du mit der Größe? Das Script versucht immer die Bilder in voller Größe anzuzeigen. Sollte ein Bild größer als 80% der zur Verfügung stehenden Fläche sein, werden die Abmessungen angepasst. Du kannst mal das Browserfenster verkleinern, dann siehst du was ich meine. Oder meinst du eine Möglichkeit, die Bilder immer Fix auf eine bestimmte Größe zu setzen?
    =O

  • Sieht super aus. Eine Anmerkung in persönlicher Sache, überleg die Buttons (zumindest die Vor- und Zurückbutton) komplett aus dem Bild rauszunehmen und an den Bildschirmrand zu kleben. Vor allem wenn ich eine Galerie schnell durchblättern will, muss ich immer erst den Bildrand "suchen". Ist ein relativ persönliches Problem, aber vielleicht eine Überlegung wert. Ansonsten weiter so

  • bastey schrieb:

    Danke erneut für das Feedback.

    Das mit dem Button anstelle des roten Kreises werde ich mal machen. Und eine Beschriftung werde ich auch hinzufügen.


    So find ichs super ;)

    bastey schrieb:

    @Fipsi: Also wenn das Javascript geladen ist (und das ist es, sobald du ein Bild anklicken kannst und der Layer/das Fenster erscheint), werden nur noch die Bilder übertragen. D.h., wenn diese lange laden, liegt es vermutlich wirklich an deiner Verbindung oder dem Server.


    Dann wars mein Internet.

    bastey schrieb:

    Und was meinst du mit der Größe? Das Script versucht immer die Bilder in voller Größe anzuzeigen. Sollte ein Bild größer als 80% der zur Verfügung stehenden Fläche sein, werden die Abmessungen angepasst. Du kannst mal das Browserfenster verkleinern, dann siehst du was ich meine. Oder meinst du eine Möglichkeit, die Bilder immer Fix auf eine bestimmte Größe zu setzen?


    Ich meinte beides. Also ersteres wäre ja somit geklärt. Gibts dann aauch eine Möglichkeit für letzteres? Dass man halt sagt, höchstes x hoch, höchstens y breit, wenn einer der Maximalwerte überschritten wird, dass dann auf diesen Wert angepasst wird, evtl. neben der 80%-Regelung. Also nicht umbedingt ein muss, die Frage ist jetzt eher interessehalber.

  • freeek schrieb:

    Sieht super aus. Eine Anmerkung in persönlicher Sache, überleg die Buttons (zumindest die Vor- und Zurückbutton) komplett aus dem Bild rauszunehmen und an den Bildschirmrand zu kleben. Vor allem wenn ich eine Galerie schnell durchblättern will, muss ich immer erst den Bildrand "suchen". Ist ein relativ persönliches Problem, aber vielleicht eine Überlegung wert. Ansonsten weiter so

    Okay, werde das mal umsetzen. Finde es, in der Theorie, auch besser. Dann mache ich aber die Flächen größer. Hab nämlich festgestellt, dass durch die kleineren Flächen das Ding via Smartphone nicht mehr so richtig zu bedienen ist (also die weiter/zurück Funktion - der Rest geht).

    Fipsi schrieb:

    Ich meinte beides. Also ersteres wäre ja somit geklärt. Gibts dann aauch eine Möglichkeit für letzteres? Dass man halt sagt, höchstes x hoch, höchstens y breit, wenn einer der Maximalwerte überschritten wird, dass dann auf diesen Wert angepasst wird, evtl. neben der 80%-Regelung. Also nicht umbedingt ein muss, die Frage ist jetzt eher interessehalber.

    Und willst du das für jedes Bild festlegen oder generell für alle Bilder? Oder für Gruppen?

    Was würdet ihr von einem Wordpress-Plugin halten?
    =O

  • bastey schrieb:

    Fipsi schrieb:

    Ich meinte beides. Also ersteres wäre ja somit geklärt. Gibts dann aauch eine Möglichkeit für letzteres? Dass man halt sagt, höchstes x hoch, höchstens y breit, wenn einer der Maximalwerte überschritten wird, dass dann auf diesen Wert angepasst wird, evtl. neben der 80%-Regelung. Also nicht umbedingt ein muss, die Frage ist jetzt eher interessehalber.

    Und willst du das für jedes Bild festlegen oder generell für alle Bilder? Oder für Gruppen?


    Verlockend klingen alle drei Dinge. Also ich mein, musst du meinetwegen nicht einbauen, aber wär sicher nicht schlecht, wenns das halt auch noch geben würde.

    bastey schrieb:

    Was würdet ihr von einem Wordpress-Plugin halten?


    (Als nicht-Wordpress-User) : Wäre sicher nicht schlecht, schaut super aus, als extra Puglin bestimmt gut.

  • Hab die Lightbox noch ein weiteres mal überarbeitet. Sie ist nun etwas größer geworden, dafür gibt es aber eben diese maximale Breite die man einstellen kann. Auf der anderen Seite ist nun weniger HTML und CSS-Code notwendig. Ohne Grafiken kommt das Script auf knapp 5Kb.


    Hier die API: github.com/basteyy/sg#api

    Weiteres neues Feature: Wenn die Bilder so klein sind, dass die Buttons stören würden, wandern diese automatisch nach außen.
    =O

  • Das minimalistische finde ich aber irgendwie geil. Aber man kann es ganz fix anpassen. Folgender Code ersetzt die Pfeile mit eigenen:

    Quellcode

    1. #sgNav .prev {
    2. background: #fff url(http://abload.de/img/dloadysj1a.png) center center no-repeat;
    3. }
    5. #sgNav .next {
    6. background: #fff url(http://abload.de/img/dloadc2fl1.png) center center no-repeat;
    7. }


    Und das einfach irgendwo nach dem einbinden der sg.min.css und schon hat man eigene Pfeile.

    Beispiel: jsfiddle.net/VFNLu/

    Quellcode

    1. <html>
    2. <head><title>Test</title>
    3. <link rel="stylesheet" href="http://cdn.34n.de/sg/sg.min.css" type="text/css" media="screen">
    4. <style>
    5. #sgNav .prev {
    6. background: #fff url(http://abload.de/img/dloadysj1a.png) center center no-repeat;
    7. }
    9. #sgNav .next {
    10. background: #fff url(http://abload.de/img/dloadc2fl1.png) center center no-repeat;
    11. }
    12. </style>
    13. </head>
    14. <body>
    15. <ul class="example">
    16. <li><a data-sg="group1" href="http://cdn.34n.de/sg/images/storm-troopers-112224_1920.jpg"><img src="http://cdn.34n.de/sg/images/storm-troopers-112224_150.jpg"></a></li>
    17. <li><a data-sg="group1" href="http://cdn.34n.de/sg/images/girl-111693_1920.jpg"><img src="http://cdn.34n.de/sg/images/girl-111693_150.jpg"></a></li>
    18. <li><a data-sg="group1" href="http://cdn.34n.de/sg/images/rollerderby-112223_1920.jpg"><img src="http://cdn.34n.de/sg/images/rollerderby-112223_150.jpg"></a></li>
    19. <li><a data-sg="group1" href="http://cdn.34n.de/sg/images/girl-91692_640.jpg"><img src="http://cdn.34n.de/sg/images/girl-91692_150.jpg"></a></li>
    20. <li><a data-sg="group1" href="http://cdn.34n.de/sg/images/lake-65446_1280.jpg"><img src="http://cdn.34n.de/sg/images/lake-65446_150.jpg"></a></li>
    21. </ul>
    22. <div id="sgBg"></div><div id="sgLayer"><div id="sgNav"><a href="#" onclick="sg.go(-1); return false;" title="Zum vorherigen Bild" class="prev"></a><a href="#" onclick="sg.go(1); return false;" title="Zum n夨sten Bild" class="next"></a></div><div id="sgImg"><div id="sgAct"><a href="#" onclick="sg.close(); return false;" title="Bild schlieࠥn" class="close"></a><a href="#" title="Bild ��en" target="_blank" class="zoom"></a></div></div></div><!-- Das Script -->
    23. <script src="http://cdn.34n.de/sg/sg.min.js" charset="utf-8"></script>
    24. </body>
    25. </html>
    Alles anzeigen
    =O

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von bastey ()