navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
FrontPage Alternative
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

 

Lovely CSS image/caption zoom

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Community >> OutFront Discoveries >> Lovely CSS image/caption zoom 		Page: [1] 2   next >   >>
 
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

  		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.


_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to womble)
d a v e

 

Posts: 4177
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

  		RE: Lovely CSS image/caption zoom - 4/29/2006 7:57:11   
the right pic zooms off the page :(

_____________________________

David Prescott
Gekko web design

(in reply to jaybee)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

  		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

:)

<edit 2>Edited due to incompetent pasting of urls :)</edit 2>

< Message edited by womble -- 5/1/2006 8:48:36 >

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to d a v e)
Tailslide

 

Posts: 6290
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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"

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to womble)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

  		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.

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to Tailslide)
Tailslide

 

Posts: 6290
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

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

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to womble)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

  		RE: Lovely CSS image/caption zoom - 4/30/2006 20:03:23   
/does happydance around the forum :)

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

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to Tailslide)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

  		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.

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to Tailslide)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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

:)


Am I being thick? Both of the first 2 links go to the same place.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to womble)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

  		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! :)

:)
This is where the SuckerFish Hover Lightbox is really.

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to jaybee)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		RE: Lovely CSS image/caption zoom - 5/1/2006 9:04:57   
:) Wha' do I win? Wha' do I win?



< Message edited by jaybee -- 5/1/2006 9:11:01 >

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to womble)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

  		RE: Lovely CSS image/caption zoom - 5/1/2006 9:13:32   
A banana. :)

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to jaybee)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		RE: Lovely CSS image/caption zoom - 5/1/2006 9:20:04   
.


Thumbnail Image
:)

Attachment (1)

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to womble)
d a v e

 

Posts: 4177
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

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

_____________________________

David Prescott
Gekko web design

(in reply to jaybee)
Ken of Kentropolis

 

Posts: 78
Joined: 12/15/2005
From: Buffalo, NY USA
Status: offline

  		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?

(in reply to d a v e)
d a v e

 

Posts: 4177
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

  		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?

_____________________________

David Prescott
Gekko web design

(in reply to Ken of Kentropolis)
Ken of Kentropolis

 

Posts: 78
Joined: 12/15/2005
From: Buffalo, NY USA
Status: offline

  		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

(in reply to d a v e)
d a v e

 

Posts: 4177
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

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

_____________________________

David Prescott
Gekko web design

(in reply to Ken of Kentropolis)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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.

< Message edited by jaybee -- 5/8/2006 19:21:52 >

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to d a v e)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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.





_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to jaybee)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

  		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...:)



_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to jaybee)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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?

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to womble)
Tailslide

 

Posts: 6290
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

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

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to jaybee)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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?

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to Tailslide)
d a v e

 

Posts: 4177
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

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

_____________________________

David Prescott
Gekko web design

(in reply to jaybee)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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 */
}

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to d a v e)
Tailslide

 

Posts: 6290
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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!

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to jaybee)
rubyaim

 

Posts: 757
Joined: 6/22/2005
Status: offline

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


_____________________________

Sally

(in reply to jaybee)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		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

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to rubyaim)
Page:   [1] 2   next >   >>

All Forums >> Community >> OutFront Discoveries >> Lovely CSS image/caption zoom 		Page: [1] 2   next >   >>
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Back to top

  Microsoft Corporation in no way endorses or is affiliated with "OutFront."
  OutFront is published and edited by Thomas Brunt.
  440 Great Circle Dr., St. Matthews, SC 29135.
  © 2008 All Rights Reserved
  Click here to view our privacy statement.