HighDots Forums  

Image Display Technique

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Image Display Technique in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
steve@walkerfx.com
 
Posts: n/a

Default Image Display Technique - 08-14-2006 , 07:06 PM






I came across this website that has a great way for displaying images.
Rather than opening another browser window, it dynamically displays the
image in the center of the window, making the rest of the window
partially transparent. I looked at the source of the page, but can't
figure out how they are doing it.

Here is the site:
http://www.blendernation.com/

Just click on some of the image thumbnails to see what I mean.

Is this CSS? or Javascript? Does anyone have any idea how to do this?

Thanks,

Walker
WalkerFX


Reply With Quote
  #2  
Old   
axlq
 
Posts: n/a

Default Re: Image Display Technique - 08-14-2006 , 07:32 PM






In article <1155600417.643664.301920 (AT) 75g2000cwc (DOT) googlegroups.com>,
<steve (AT) walkerfx (DOT) com> wrote:
Quote:
http://www.blendernation.com/

Just click on some of the image thumbnails to see what I mean.

Is this CSS? or Javascript?
It's both. The fake "pop-up" is accomplished with CSS tricks, and all
the rest is driven by javascript.

Quote:
Does anyone have any idea how to do this?
Sure. Just view the source for the page, track down all the CSS
and javascript files loaded by it, study them, and figure it out.
Everything your browser can get, so can you.

-Alex


Reply With Quote
  #3  
Old   
Jeff North
 
Posts: n/a

Default Re: Image Display Technique - 08-14-2006 , 09:08 PM



On 14 Aug 2006 17:06:57 -0700, in
comp.infosystems.www.authoring.stylesheets steve (AT) walkerfx (DOT) com
<1155600417.643664.301920 (AT) 75g2000cwc (DOT) googlegroups.com> wrote:

Quote:
| I came across this website that has a great way for displaying images.
| Rather than opening another browser window, it dynamically displays the
| image in the center of the window, making the rest of the window
| partially transparent. I looked at the source of the page, but can't
| figure out how they are doing it.
|
| Here is the site:
| http://www.blendernation.com/
|
| Just click on some of the image thumbnails to see what I mean.
|
| Is this CSS? or Javascript? Does anyone have any idea how to do this?
It's a bit of both.

http://www.huddletogether.com/projects/lightbox/
http://serennz.cool.ne.jp/sb/sp/lightbox/#sample

or a variation of Lightbox
http://orangoo.com/labs/GreyBox/
---------------------------------------------------------------
jnorthau (AT) yourpantsyahoo (DOT) com.au : Remove your pants to reply
---------------------------------------------------------------


Reply With Quote
  #4  
Old   
steve@walkerfx.com
 
Posts: n/a

Default Re: Image Display Technique - 08-14-2006 , 10:50 PM



Thanks for your help guys!

Walker


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.