HTML and CSS Reference
In-Depth Information
Next we've got the lightboxes. Recall what the HTML looks like for each house:
< div id =" aboutHouse " class =" house ">
< div class =" door "></ div >
< div class =" lightbox ">
< div class =" inner about ">
Lightbox content goes here…
</ div >
</ div >
</ div >
Did you notice the .lightbox class in the house div? We will use it later. What I basically did
was define a “hot spot” for each house. When the player gets to one of those hot spots, the
JavaScript activates the lightboxInit(elm) method, which also gets the relevant house's ID.
This method is very simple:
lightboxInit : function ( elm ) {
// Get the relevant content
var content = $ ( elm ). find ( '.lightbox' ). html ();
// Create the lightbox
$ ( '<div id="dark"></div>' ). appendTo ( 'body' ). fadeIn ();
$ ( '<div id="lightbox">' + content + '<span
id="closeLB">x</span></div>' ). insertAfter ( "#dark" ). delay ( 1000 ). fadeIn ();
}
First, I get the relevant content by finding the div.lightbox child of the house element. Then,
I create and fade in a blank div, named dark , which gives me the dark background. Finally, I
create another div, fill it up with the content (which I had already stored in a variable), and
insert it right after the dark background. Clicking the “x” will call another method that fades out
the lightbox and removes it from the DOM.
One good practice that I unfortunately learned the hard way is to keep the code as dynamic
as possible . Write your code in such a way that if you add more content to the portfolio in
future, the code will support it.
Search WWH ::




Custom Search