jQuery Basics- creating a simple lightbox

Question

Hello,

I'm following the jQuery Basics project and just completed the Creating a Simple Lightbox stage. I wanted to incorporate this into a project I'm working on. However, instead of pictures popping up in the lightbox, I'm having text be shown instead. Everything is working perfectly, except I want my last "lightbox" to be formatted differently. Not only do I want the text styling to change, but I also want a picture to appear behind the text. I've tried targeting the elements I want changed with :last-child, along with assigning it a specific #id, I even tried in-line styling, but I can't seem to get only this "answer" to be different.

Sorry if that's confusing. My code below. Any advice would be super appreciated!

my HTML:

<ul id="questionGallery">
    <li>
        <a href="#" class="question">
            <p><span class="before">*</span> Why is the ocean salty?</p>
                <p class="answers">
                    Because rain erodes rock, which runs off into rivers and water and stuffz.
                </p>
        </a>                
    </li>
    <li>
        <a href="#" class="question">
            <p>What color do you get when you mix blue and yellow?</p>
                <p class="answers">
                    Green! (But in a different font and with a picture behind it.)
                </p>
        </a>                
    </li>
</ul>

my JS:

//Problem: clicking question doesn't do anything
//Solution: create an overlay with the answer

var $overlay = $("<div id='overlay'></div>");
var $answer = $("<p class='answer'></p>");

    //Add answer to overlay
    $overlay.append($answer);
    //Add overlay
    $(".container").append($overlay);

// Capture the click event on a link to nowhere
$("#questionGallery a").click(function(event){
    event.preventDefault();
    var answerText = $(this).children("p.answers").text();
    // Update the overlay with the answer from the list item
    $answer.text(answerText);

    // Show the overlay
    $overlay.fadeIn("slow");
});

// When overlay is clicked, 
$overlay.click(function(){
  // hide the overlay
  $overlay.fadeOut("slow");
});

my CSS:

#overlay {
  background: rgba(0,0,0,.6);
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  text-align:center;
}
#overlay p {
    background: white;
    margin: auto;
    width: 50%;
    padding: 2%;
    border-radius: 10px;
    margin-top: 15%;
    text-align: left;
}
.answers {
    display: none;
}

as always, thanks for any advice!

Jenn

Answer 1 · 2014-04-28T23:47:35Z

April 28, 2014 11:47pm

Edit: Fixed syntax error as noted by Jennifer Hinkle - Missing ) on if condition

I think there might be several ways to do this.

Here's one way you can try.

First set up a css rule that will contain the styles you want applied to the last answer.

Something like:

.last-answer {
    /* styles here */
}

Then update your click function to check if the parent of the link clicked (which would be the li) is the last-child. If it is then add the "last-answer" class to your "answer" paragraph.

// Capture the click event on a link to nowhere
$("#questionGallery a").click(function(event){
    event.preventDefault();
    var answerText = $(this).children("p.answers").text();
    // Update the overlay with the answer from the list item
    $answer.text(answerText);

    if ($(this).parent().is(':last-child')) {
        $answer.addClass("last-answer");
    }
    else {
        $answer.removeClass("last-answer");
    }

    // Show the overlay
    $overlay.fadeIn("slow");
});

This is untested so perhaps let us know how far you get with it.

Welcome to the Treehouse Community

Looking to learn something new?

Jennifer Hinkle

Jennifer Hinkle

jQuery Basics- creating a simple lightbox

1 Answer

Jason Anello

Jason Anello

Jennifer Hinkle

Jennifer Hinkle

Jennifer Hinkle

Jennifer Hinkle

Jason Anello

Jason Anello