Just started delving into jQuery. I'm trying to grab the image source and showcase it in a fixed division like a pop-up, along with the image title. However, I'm encountering difficulties in fetching the image source.
My attempt with the .attr() method is returning undefined.
HTML:
<div id="album">
<div class="pic">
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
css:
.screen {
border: 1px solid green;
margin: 10px auto;
float: left;
cursor:pointer
}
.image {
width: 300px;
}
.title {
font-size: 30px;
}
.description {
font-size: 25px;
}
.pic {
width: 600px;
position:fixed;
}
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display();
});
});
function display() {
var source = $("img",this).attr("src");
alert("The souce of the image is " + source);
}