CSS "Lightbox"

    Habe mich heute mal rangesetzt und eine "Lightbox" NUR mit CSS 2.1 gecodet.

    Zurzeit funzt sie zu 100% im FF3 und im Opera sowie Safari zu 90%.

    Naja ich will nicht lange reden hier ist sie die BETA Version meiner CSS Lightbox:

    http://f-h.kaninchenrettung.de/macrosdesign_t…_play/lightbox/

    Wenn jemand Bugs findet bitte hier posten (Im IE tut sich noch nix aber das bekomm ich auch noch hin).

    Viel Spaß beim ausprobieren!

    PS: Hier sind noch andere kleine Spielerreien:
    http://f-h.kaninchenrettung.de/macrosdesign_t…y/translate.php
    http://f-h.kaninchenrettung.de/macrosdesign_t…_page/test.html

    Einmal editiert, zuletzt von Macrosdesign (3. März 2010 um 21:15)

    Hehe, du hast es ernst gemeint als du sagtest du spielst mit CSS rum, was? =)

    Im Safari 90% find ich allerdings etwas übertrieben, das Bild wird bei mir nur gezeigt, solange man die Maustaste gedrückt hält. Hoffentlich kriegste es noch Bugfrei und IE tauglich, dann werd ich se gerne verwenden ;)

    -Lukas

    *UPDATE*
    03.03.2010 Update 1--------------------------------------
    - neues Design
    - IE8 Unterstützung
    - Bild Positionierung verbessert

    03.03.2010 Update 2--------------------------------------
    - Titelleiste verbessert
    - IMG Aufruf verbessert
    - Kleinere Bugs behoben

    04.03.2010 08:38 Uhr Update 3--------------------------------------
    - IMG Thumbs hinzugefügt

    04.03.2010 14:44 Uhr Update 4--------------------------------------
    - CSS Code strukturiert
    - IMG Erkennung weiter verbessert
    - HTML Code optimiert


    Link zur Lightbox:
    Klick mich!


    *TODO*
    - :focus - Bug im Opera
    - :focus im Safari zum laufen bekommen
    - IE7 Support
    - Ladeanimation hinzufügen

    6 Mal editiert, zuletzt von Macrosdesign (4. März 2010 um 14:45)

    Deine Lightbox ist aber nicht mehr aktzeptabel bei vielen Bildern, da du sowohl die Vorschau als auch die Große Version auf einmal lädst

    Ja das Problem ist mir bekannt aber für kleinere Galerien ist es durchaus eine hübsche kleine Spielerei. :)

    Ach verdammt tut mir Leid...

    Ich bräuchte noch einen Funktionsbericht von folgenden Browsern:

    - Firefox 2.x
    - Konqueror
    - Opera 9.x

    UPDATE

    CSS Lightbox Version 1.24 [10.06.2010]

    # Opera Unterstützung eingebaut
    # Durchwahl der Bilder über einen "next"-Button
    # Code optimiert
    # config.css verbessert
    # Multilanguage


    Einbau in HTML:

    Verlinkung des externen Stylesheets im Headbereich:

    Code
    <link href="lightbox_css/lightbox_v124.css" rel="stylesheet" type="text/css" />

    Spezielle Angabe für den IE im Headbereich:

    Code
    <!--[if IE]>
 <style type="text/css">
   a[rel*='lightbox']:after {visibility:hidden;}
 </style>
<![endif]-->

    Lightbox wird wie folgt "aktiviert":

    Code
    <a rel="[B][COLOR='Blue']lightbox[/COLOR][/B] [COLOR='Red']de[/COLOR]" title="[B][COLOR='Black']Cursed Treasure 2[/COLOR][/B]" href="#">
  [COLOR='Navy']<img src="./thumbs/game_small.jpg" alt="game_thumb" />[/COLOR]
  [COLOR='Olive']<img src="./images/game.png" alt="game" />[/COLOR]
</a>

    lightbox aktiviert die Lightbox für das Bild.
    de gibt die sprache an (bei English einfach weglassen)

    <img src="./thumbs/game_small.jpg" alt="game_thumb" /> Das Vorschaubild.

    <img src="./images/game.png" alt="game" /> Das große Bild.

    Folgendes am Ende des jeweiligen Absatzes einfügen (Muss auf der Selben Ebende sein wie die Bilder auf die die Lightbox angewendet wird.

    HTML
    <!-- Lightbox closer -->
  <span class="lightbox_closer">&nbsp;</span>
  <span class="lightbox_closer_over">&nbsp;</span>
<!-- ### -->

    Demo

    Download (v1.24)

    ein next button gibt es doch ;)

    das mit dem "prev" button ist schon etwas komplizierter da muss ich nochmal schauen :P

    naja mach mal auf der Demo Seite das 1. oder 2. Bild auf.. und rechts am Rand sollte eigendlich ein Button sein zum weitergehen. (Ausser im IE da funzt der noch net ganz)

    edit:

    Die Tage kommt eh noch ein Update, wenn ich herrausgefunden habe wie ich mit CSS am besten eine prev-Funktion mir baue


    edit2:

    magste vllt so lieb sein und den Post mit Demo und Downloadlink an unsere kleine Unterhaltung ran zusetzen :P ^^

    also ich ruf diesen hier auf:
    http://f-h.kaninchenrettung.de/macrosdesign_t…_play/lightbox/

    und dort seh ich keinen nextbutton... sry.
    (ff 3.0.10 / WinXP Pro)

    Okay... das liegt daran das FF 3.0.10 kein :after und kein :before kennt

    Ich mach nochmal ne Übersicht der Unterstützten Browser und Versionen :)

    [Es ist ja eigendlich auch nur eine Spielerrei die zeigen soll das CSS auch einiges drauf hat)

    EDIT:

    ne moment ^^ ich glaube das liegt an was anderem

    Einmal editiert, zuletzt von Macrosdesign (10. Juni 2010 um 16:48)

    Hab mir das grad mal angeschaut. Sieht ja wirklich schon super aus. Finds cool das sich jemand die Mühe macht, das ohne JS zu lösen. Ist zwar nicht ganz so edel oder ist trotzdem ne gute alternative :) *thumbup*

    Don't follow me, I run into walls.

    Das ist sicherlich keine alternative

    Pass auf das du nicht aus deinem Schema rauskommst, den wenn manche CSS Sachen nur von manchen Browsern unterstützt wird, bringt dir die Gallery schon mal gar nix mehr

    Ich finde es ist eine Alternative, ich mein es ist schon klar, dass die CSS Lightbox mehr einschränkungen hat und auch nicht komplett mit der JS Version mithalten kann aber ich finde man kann sie an manchen stellen bestimmt gut benutzen. Ist mit Sicherheit auch leichter verständlich für Anfänger.

    Don't follow me, I run into walls.

    @Pion:

    Ich muss dir in einem Punkt recht geben leider ist es zurzeit noch so das einige Browser (insbesondere der IE) neuere CSS Angaben noch nicht verstehen... aber ich denke mit der Zeit wird sich das Problem auch auflösen ;)

    Wie schongesacht es soll hauptsächlich zeigen das CSS doch so einiges drauf hat.

    Tolles Teil (da ich sowieso auf js komplett verzichten möchte).
    Bisher habe ich noch teilweise die Slimbox im Einsatz, hatte mir die Variante von Stu angeschaut - aber hier hatte mich gestört, das ich nicht irgendwo zuklicken kann, was ja hier geht.
    Leider muss man ja Rücksicht auf die IE-Nutzer nehmen.
    Könntest du evtl. eine Liste mit reinnehmen, auf welchen Brosern es noch nicht läuft bzw. wo es hapert?
    Hab zwar gestern erst meine Seiten ausgemüllt (mal die DIV-Suppe zerkocht), aber wenn das Ding hir läuft, mach ich mich noch mal ran, da habe ich komplett js-freie Seiten.
    Tanja