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.