Comments on: Create a Lightbox effect only with CSS – no javascript needed

By: sumon

sumon — Mon, 08 Mar 2010 20:26:35 +0000

using this example can show one page but plz how to show 2 or 3 page in the same way.plz plz
i use the code………

LIGHTBOX EXAMPLE

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}

function clickform()
{
document.getElementById(‘light’).style.display=’block’;
document.getElementById(‘fade’).style.display=’block’
}
function closeform()
{
document.getElementById(‘light’).style.display=’none’;
document.getElementById(‘fade’).style.display=’none’
}

click here here

i need to show gallery page and another page that will include in the div but who to select one which is opening

By: sumon

sumon — Sat, 06 Mar 2010 11:20:47 +0000

plz help me how to show multiple page using this way.i make this and show only one page bur i need to show 3 page in this way

By: Hoxxy

Hoxxy — Thu, 04 Mar 2010 19:30:26 +0000

Title is very missileading last time I knew

javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’

was javascript!! :(

By: Abeam

Abeam — Mon, 01 Mar 2010 23:09:48 +0000

2 questions:

How would the code look like if i want to click on the opened picture and close?

How would it look like if i want to position the bigger lightbox image above and relative to the thumbnail like right corner of thumb is right corner of big picture?

Cheers!

By: In page pop up javascripts or modalbox | wordpressapi.com

In page pop up javascripts or modalbox | wordpressapi.com — Sat, 20 Feb 2010 05:52:50 +0000

[...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need... Share and Enjoy: [...]

By: Tommy

Tommy — Sat, 30 Jan 2010 20:18:00 +0000

The script works good ! But the only thing is I want to add more then one link to the lightscript box on the same page and I tried to do it but only the first link displayed with the first content? How can I use more then one link on the same page with different content in the light box for each link?

By: ATL2000

ATL2000 — Mon, 18 Jan 2010 00:55:08 +0000

Hi all,

Glad to find a solution here without changing too much in Joomla! for example.

But as lots of you asked, I wonder how to handle a page with lots of pictures here.

Thanks for sharing and in advance for your help.

By: Anonymous

Anonymous — Thu, 14 Jan 2010 15:44:19 +0000

[...] [...]

By: Phil Oertel

Phil Oertel — Sun, 03 Jan 2010 00:24:19 +0000

Thanks, cool post! I found this by googling “how does a lightbox work”, and your simple solution does a great job of explaining the essential trick – the black div with z-index and alpha properties. Thanks for posting!

By: Alex

Alex — Wed, 30 Dec 2009 00:57:01 +0000

The only problem (I think) is that if you click outside the highlighted box that means in the greyed area, the window doesn’t go rather you need to click the close icon. This doesn’t happen in other lightbox.