Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by jason chan
jason chan
31,009 Points

Lightbox

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Portfolio</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<div id = "header">
    <div id="menu">
        <h2>jquery portfolio</h2>
    </div>
</div>
<div id="overlay">

</div>
<div id="frame">
    <img src="" alt=""/>
</div>
<div id = "wrapper">
    <ul id = "portfolio">
        <li><img src="images/1.jpg" alt = "img"/></li>
        <li><img src="images/2.jpg" alt = "img"/></li>
        <li><img src="images/3.jpg" alt = "img"/></li>
        <li><img src="images/4.jpg" alt = "img"/></li>
        <li><img src="images/5.jpg" alt = "img"/></li>
        <li><img src="images/6.jpg" alt = "img"/></li>
        <li><img src="images/7.jpg" alt = "img"/></li>
        <li><img src="images/8.jpg" alt = "img"/></li>
    </ul>
</div>  

</body>
</html>

body{
    margin:0;
    padding:0;
    font-style: arial, sans-serif;
}
#header{
    width:100%;
    height: 56px;
    background-color: black;
}
#menu{
    color:white;
}

#wrapper{
    width:1024px;
    min-height: 500px;
    margin:0px auto;
}
#portfolio{
    list-style: none;
    padding-left: 0px;
}
#portfolio li {
    display: inline-block;
    margin: 10px 5px 5px 10px;
}
#portfolio li img {
    width: 240px;
    height: 161px;
}
#frame{
    position: fixed;
    display: none;
    left:50%;
    background-color: white;
    width: 700px;
    height: 500px;
    margin-left: -350px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 50px;
}
#overlay{
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    background-color: black;
    opacity: 0.7;
}
#frame img{
    width: 660px;
    margin-left: 20px;
}

$(function(){
    $("#portfolio img").click(function(){

        var src = $(this).attr("src");
        $("#frame img").attr("src", src); // what's happing here?
        $("#frame").fadeIn();
        $("#overlay").fadeIn();
    });
    $("#overlay").click(function(){
        $(this).fadeOut();
        $("#frame").fadeOut();
    });
});

$("#portfolio img").click(function(){
        var src = $(this).attr("src");
        $("#frame img").attr("src", src); // what's happing here?
        $("#frame").fadeIn();
        $("#overlay").fadeIn();
    });

How does attr work? I don't understand what's happening.

2 Answers

Neil Docherty
Neil Docherty
10,418 Points
Neil Docherty
Neil Docherty
10,418 Points 
$("#frame img").attr("src", src)

Firstly, using $("#frame img") we select the img object that is the child of the div id="frame" element.

Then we carry out a method on that object .attr(). This method works in two ways:

  1. attr("src") gets the value of the src attribute.

  2. attr("src", "value") sets the value of the src attribute to = "value".

In this bit of code

var src = $(this).attr("src");

we set the src variable to be equal to the value of the src attribute of the element you clicked on.

Which we then use to set the value for the img element.

$("#frame img").attr("src", src)

Sorry, this could be a bit clearer. If you need clarification - please just ask.

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

jQuery attr

jQuery with one parameter gets the attribute value for only the first element in the matched set. In your example, the attribute value it's getting is the src of $(this) - the object being clicked on - and setting it equal to the variable src.

When it has two parameters it sets whatever the first parameter is equal to the second parameter.

So when you click on an img inside of the #portfolio element, it first grabs the source of the image clicked on. Then it sets the source of the img inside of the #frame element equal to it.

Check out this jsbin to see if it's a little clearer.