Author Topic: Show fullsize image in <div> over page  (Read 1329 times)

0 Members and 1 Guest are viewing this topic.

Offline njdirtTopic starter

  • Irregular
  • Posts: 31
    • View Profile
Show fullsize image in <div> over page
« on: March 09, 2010, 07:22:21 PM »
Hello,
  So I'm trying to make it so that on my site, when a user clicks a particular image, a semi-transparent <div> shows up covering 100% of the site and the larger image is shown centered on top of this.  I know there must be a popular code out there to do this as I've seen it many times.  Unfortunately, I can't remember any sites I've seen it on...  if you have seen this, could you please post a link to a site that uses it?  Thanks in advance!

Offline njdirtTopic starter

  • Irregular
  • Posts: 31
    • View Profile
Re: Show fullsize image in <div> over page
« Reply #1 on: March 09, 2010, 07:32:03 PM »
Here is an example that uses Flash.  I know there is something that uses only CSS though.

http://www.huddletogether.com/projects/lightbox2/

Offline haku

  • Guru
  • Freak!
  • *
  • Posts: 5,707
  • Old Man
    • View Profile
Re: Show fullsize image in <div> over page
« Reply #2 on: March 09, 2010, 08:41:40 PM »
There is nothing that uses only CSS, but it can be done with javascript (and a combination of CSS). Anyways, here is a very comprehensive list of different scripts that can do what you want (its called a lightbox by the way): http://planetozh.com/projects/lightbox-clones/

Offline njdirtTopic starter

  • Irregular
  • Posts: 31
    • View Profile
Re: Show fullsize image in <div> over page
« Reply #3 on: March 09, 2010, 08:56:55 PM »
Thanks Haku, you're right, it does require Javascript.  I am going to use the Lightbox2 code from the link I posted up.  Thanks for your quick response, too!