Lovely CSS image/caption zoom

Lovely CSS image/caption zoom (Full Version)

All Forums >> [Community] >> OutFront Discoveries

Message

womble -> Lovely CSS image/caption zoom (4/28/2006 18:03:31)
/drools This looks nice! I wanna play! http://randsco.com/_miscPgs/cssZoomPZ3.html quote: # Valid XHTML code (XHTML 1.0 Transitiona/Strict or XHTML 1.1) # A pure-CSS solution (no javascript). # Uses the same image for both the thumbnail & the larger view. # A nice-looking (and customizable) caption. # No distruptive "layout shifting" when the image is Zoomed # Larger images can be used, because the image will 'float' over menus, borders, other DIVS, etc. # Image border can be turned on/off. # Image can link to an external site or not, with cursor "active" or not. # Caption can be turned on/off.

jaybee -> RE: Lovely CSS image/caption zoom (4/28/2006 18:38:35)
Good find although it frightened the heck out of me as my cursor just happened to be in the wrong place when the page loaded.

d a v e -> RE: Lovely CSS image/caption zoom (4/29/2006 7:57:11)
the right pic zooms off the page :(

womble -> RE: Lovely CSS image/caption zoom (4/29/2006 10:27:26)
...and two more... ...both use a combination of javascript and css - very nice! [:)] Lightbox JS v2.0 captions, simple navigation, and transition effects...wow! Suckerfish Hover Lightbox combines a drop-down image gallery and image zoom....double wow! ...or Thickbox: one box to rule them all - display html pages as well as images [img]http://ganjataz.com/Forum/images/smiles/shake.gif[/img] <edit 2>Edited due to incompetent pasting of urls [:D]</edit 2>

Tailslide -> RE: Lovely CSS image/caption zoom (4/29/2006 10:36:17)
The problem with the lightbox ones is that they're not enormously accessible - by that I mean that you can't use the keyboard to easily close them. You can fiddle with the script to make it do that but it doesn't do it "out of the box"

womble -> RE: Lovely CSS image/caption zoom (4/29/2006 10:48:05)
The Lightbox JS v2.0's got it built in - 'p' for previous, 'n' for next, 'x' to close.

Tailslide -> RE: Lovely CSS image/caption zoom (4/29/2006 11:30:39)
Oh yes - so it does (must remember to read instructions!)

womble -> RE: Lovely CSS image/caption zoom (4/30/2006 20:03:23)
/does happydance around the forum [img]http://ganjataz.com/Forum/images/smiles/happydance.gif[/img] Just installed Lightbox (took under 5 mins) - works perfectly, all valid, passes WCAG 'A'... /is a very happy womble and can go to bed happy now [:)]

womble -> RE: Lovely CSS image/caption zoom (5/1/2006 5:25:42)
quote: ORIGINAL: Tailslide Oh yes - so it does (must remember to read instructions!) Just been reading the blog about it and it looks like the keyboard navigation's a recent addition.

jaybee -> RE: Lovely CSS image/caption zoom (5/1/2006 8:42:21)
quote: ORIGINAL: womble ...and two more... ...both use a combination of javascript and css - very nice! [:)] Lightbox JS v2.0 captions, simple navigation, and transition effects...wow! Suckerfish Hover Lightbox combines a drop-down image gallery and image zoom....double wow! ...or Thickbox: one box to rule them all - display html pages as well as images [img]http://ganjataz.com/Forum/images/smiles/shake.gif[/img] Am I being thick? Both of the first 2 links go to the same place.

womble -> RE: Lovely CSS image/caption zoom (5/1/2006 8:46:05)
Well spotted Jaybee! You win first prize in the "spot the deliberate mistake" competition! [:D] [img]http://ecanus.net/forumsmiles/duh.gif[/img] This is where the SuckerFish Hover Lightbox is really.

jaybee -> RE: Lovely CSS image/caption zoom (5/1/2006 9:04:57)
[sm=yupi3ti.gif] Wha' do I win? Wha' do I win?

womble -> RE: Lovely CSS image/caption zoom (5/1/2006 9:13:32)
A banana. [;)]

jaybee -> RE: Lovely CSS image/caption zoom (5/1/2006 9:20:04)
. [image]local://upfiles/9075/4A57A55504B64382B4E106A2948F1C81.jpg[/image]

d a v e -> RE: Lovely CSS image/caption zoom (5/1/2006 9:22:27)
looks like a raspberry ;)

Ken of Kentropolis -> RE: Lovely CSS image/caption zoom (5/2/2006 11:49:42)
This is really dumb if you think about it. The whole purpose of thumbnails (besides content organization) is to not have to load large images if you don't want to. Using the same image for thumb and pic is ... well ... just plain stupid. Have we all forgotten out dialup roots?

d a v e -> RE: Lovely CSS image/caption zoom (5/2/2006 12:40:28)
quote: Using the same image for thumb and pic lightbox uses 2 different images - what are you referring to?

Ken of Kentropolis -> RE: Lovely CSS image/caption zoom (5/2/2006 12:55:52)
I was referring to the original example which says one image is used instead of two. Or at least that's what it said in the OutFront Newsletter: quote: Lovely CSS image/caption zoom (posted by womble) "Uses the same image for both the thumbnail & the larger view." http://www.frontpagewebmaster.com/m-323575/tm.htm

d a v e -> RE: Lovely CSS image/caption zoom (5/2/2006 14:06:30)
see what you mean - and agree it is dumb! :)

jaybee -> RE: Lovely CSS image/caption zoom (5/8/2006 14:02:58)
I'm just playing around with the Lightbox and so far it looks great. Validates too. I'll report back when I'm done. [edit] Getting there. The HTML (now converted to XHTML) validates and it clears Cynthia at level 3 but the css is all over the shop. Will clean that up in the morning and see how Lynx gets on with it.

jaybee -> RE: Lovely CSS image/caption zoom (5/9/2006 9:35:32)
Ok, pretty much there. There is one problem with it that I can't find an alternative to at the moment. It uses opacity and so the css doesn't validate.

womble -> RE: Lovely CSS image/caption zoom (5/9/2006 10:05:10)
Damn! Don't you just hate it when that happens? [:@] I got it up and running on a test site I'm working on - it's working just fine and it validates fine as xhtml strict...I never thought to check the lightbox css though...[&o]

jaybee -> RE: Lovely CSS image/caption zoom (5/9/2006 11:22:39)
Am I right in thinking this is css3 and won't validate until then?

Tailslide -> RE: Lovely CSS image/caption zoom (5/9/2006 11:35:40)
What you've got there validates now Jaybee

jaybee -> RE: Lovely CSS image/caption zoom (5/9/2006 11:41:36)
I took all the offending opacity css out and fully expected to get a box popping up with no faded background, but it still worked, so I figured it wouldn't work in IE but it does. Just about to check on a few others as well but it currently validates css, xhtml and cynthia level 3. What am I missing?

d a v e -> RE: Lovely CSS image/caption zoom (5/9/2006 11:51:27)
i think if you look at the lightbox site it shows that it usees a hack for IE to simulate the opacity? maybe with a gif??? or at least i thought it did...

jaybee -> RE: Lovely CSS image/caption zoom (5/9/2006 12:03:41)
The only hacks in the css I have left is a hover hack for IE background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover / and one for IE Mac html .clearfix { /* Hides from IE-mac \/ height: 1%; / End hide from IE-mac */ }

Tailslide -> RE: Lovely CSS image/caption zoom (5/9/2006 12:04:24)
quote: ORIGINAL: jaybee I took all the offending opacity css out and fully expected to get a box popping up with no faded background, but it still worked, so I figured it wouldn't work in IE but it does. Just about to check on a few others as well but it currently validates css, xhtml and cynthia level 3. What am I missing? No idea. Can't be a caching issue. Weird. But good weird!

rubyaim -> RE: Lovely CSS image/caption zoom (3/14/2007 2:10:54)
quote: Ok, pretty much there. It's not there now [:(] Have been faffing about getting Lightbox to work with a database (and users who think a 3mb image is just fine). Oh well, the 404 was worth the trip Jaybee, it's a good one [:D]

jaybee -> RE: Lovely CSS image/caption zoom (3/14/2007 5:37:30)
Sally, I took it off my site but it's on a client site here http://www.malcolmcook.co.uk/portfolio.html

Page: [1] 2 next > >>

Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI

0.109375