7 ms·

Futurebox, lightbox without the JavaScript

45 points by ahrjay 17y ago

ryanwaggoner 17y ago
Interesting, but the back button in Safari 4 goes back through all the futureboxes that were popped up and closed previously, as if each were its own page. Really annoyed me...
- beza1e1 17y ago
  Hm, looks like a feature to me. The problem i see is that all the images are loaded at once. Lightbox loads the big images on demand.
  - ROFISH 17y ago
    It IS a feature. This is abused by most pure Javascript apps such as GMail. It's just carried over to this CSS implementation.
    - ryanwaggoner 17y ago
      How is it abused by Gmail? The back button in Gmail works exactly like I would expect it to in a non-ajax app.
  - ryanwaggoner 17y ago
    Seems like a lame feature to me. If I hit a gallery page and view 6 or 7 images, I don't want to have to hit the back button 15 times to get to the previous page. To me, viewing a larger version of an image on the page isn't the same as viewing a new page, and the back button behavior should reflect that.
- mikeryan 17y ago
  Same in firefox.
Raphael 17y ago
Now combine it with CSS transitions.
- diN0bot 17y ago
  whoa cool http://webkit.org/blog/138/css-animation/ http://webkit.org/blog/138/css-animation/ again, though, concerns about browser compatibility...
  - Raphael 17y ago
    I know Firefox just added SVG-style CSS transformations. Does Webkit support those?
- ahrjay 17y ago
  Yeah I thought about adding in some css transitions for safari 4 but went against it due to it causing problems with every other browser that doesn't support the -webkit-transition property.
treyp 17y ago
Cool, but just in theory because of IE compatibility issues. Hmm, I wonder if you could have done this without :target, using a:active. Drop an element inside of a link that is the lightbox container (#lightbox_container), set to display: none. Then, a#lightbox_link:active #lightbox_container would be display:block;. I'm on my way out, but maybe I'll try it out when I get back. Using position: fixed on the lightbox container, it'd be IE7+ compatible. Position:absolute would be IE6+.
- ahrjay 17y ago
  Good theory I would be very interested to see your results.
ashleyw 17y ago
Doesn't it loose one of the advantages of a JS version — the ability to lazy load, rather than loading all the full sized images on every page load?
- ramidarigaz 17y ago
  Tangent: is loose a non-American spelling of lose, or is it just commonly misspelled?
  - burke 17y ago
    It's an unfortunately common misspelling.
    - ashleyw 17y ago
      Haha, yes — I just spent 2 minutes scratching my head wondering if it was another British word which America 'simplified', as I found it in the dictionary and thought you meant 'loose' was a common misspelling of 'lose'; Only to realize, yes, lose and loose are two words. Opps! I think it's time for some sleep...as should probably always be the case when you loose the ability to differentiate words... :D
      - ashleyw 17y ago
        "…case when you loose the ability…" How could I do it again?!

45 points by ahrjay 17y ago

Interesting, but the back button in Safari 4 goes back through all the futureboxes that were popped up and closed previously, as if each were its own page. Really annoyed me...

beza1e1 17y ago
Hm, looks like a feature to me. The problem i see is that all the images are loaded at once. Lightbox loads the big images on demand.
- ROFISH 17y ago
  It IS a feature. This is abused by most pure Javascript apps such as GMail. It's just carried over to this CSS implementation.
  - ryanwaggoner 17y ago
    How is it abused by Gmail? The back button in Gmail works exactly like I would expect it to in a non-ajax app.
- ryanwaggoner 17y ago
  Seems like a lame feature to me. If I hit a gallery page and view 6 or 7 images, I don't want to have to hit the back button 15 times to get to the previous page. To me, viewing a larger version of an image on the page isn't the same as viewing a new page, and the back button behavior should reflect that.
mikeryan 17y ago
Same in firefox.

Raphael 17y ago

Now combine it with CSS transitions.

diN0bot 17y ago
whoa cool http://webkit.org/blog/138/css-animation/ http://webkit.org/blog/138/css-animation/ again, though, concerns about browser compatibility...
- Raphael 17y ago
  I know Firefox just added SVG-style CSS transformations. Does Webkit support those?
ahrjay 17y ago
Yeah I thought about adding in some css transitions for safari 4 but went against it due to it causing problems with every other browser that doesn't support the -webkit-transition property.

treyp 17y ago

Cool, but just in theory because of IE compatibility issues. Hmm, I wonder if you could have done this without :target, using a:active. Drop an element inside of a link that is the lightbox container (#lightbox_container), set to display: none. Then, a#lightbox_link:active #lightbox_container would be display:block;. I'm on my way out, but maybe I'll try it out when I get back. Using position: fixed on the lightbox container, it'd be IE7+ compatible. Position:absolute would be IE6+.

ahrjay 17y ago
Good theory I would be very interested to see your results.

ashleyw 17y ago

Doesn't it loose one of the advantages of a JS version — the ability to lazy load, rather than loading all the full sized images on every page load?

ramidarigaz 17y ago
Tangent: is loose a non-American spelling of lose, or is it just commonly misspelled?
- burke 17y ago
  It's an unfortunately common misspelling.
  - ashleyw 17y ago
    Haha, yes — I just spent 2 minutes scratching my head wondering if it was another British word which America 'simplified', as I found it in the dictionary and thought you meant 'loose' was a common misspelling of 'lose'; Only to realize, yes, lose and loose are two words. Opps! I think it's time for some sleep...as should probably always be the case when you loose the ability to differentiate words... :D
    - ashleyw 17y ago
      "…case when you loose the ability…" How could I do it again?!