FrogLace css Lightbox
First off, I’m a firm believer in credit where credit is due. While following some links I ran across Lightbox JS by Lokesh Dhakar. I thought it was an interesting idea, and bookmarked it for latter reading. In the wee hours of the same night, I asked myself if I could create the same effect without using javascript.
Why do this? In order to display an image that exceeds the established width of a column.
FrogLace css Lightbox in action: css Lightbox Example. (This example was built using the xhtml_lightbox_template.txt file).
How Does It Work? By employing a small amount of php it is possible to turn off and on a div containing the information for the Lightbox effect. The css it self uses position absolute to place the information on top of the page.
Here is the php code used: (This is placed between the head & /head tags.
To activate the css Lightbox effect, in the body tag you have:
And the anchor tag uses this:
In this example, playground2.html is the page name. What follows the ? changes the state of the body id. I’ve used “on” in this example. If you wanted multiple incidences, each would require a unique name, i.e. pic1, pic2, pic3 etc.
The (x)html code itself looks something like this:
What follows is the css:
A link to load the css is needed between your head & /head tags. In this example:
Misc.: The (x)html used in this example is xhtml.
Known Problems & Issues: IE6 displayed some intermittent display issues. The code is written for a 1024 pixel wide display. Larger browser display widths will have the Lightbox effect sitting in the upper left corner of the browser window. Smaller browser display widths will create a horizontal scroll bar. Google Ads in Opera display above the effect, in Firefox they create a small warping effect. I corrected the Google Ads problem by turning off the display block while the Lightbox effect is active.
This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.
