Grabbing all <a> tags in a specific div and displaying them
- by Taylor Swyter
So I'v got a small problem with my portfolio site (you can see it at here)
When you click on a portfolio piece, a top section opens up to reveal the details (Title, year, role, description) as well as the photos. I'v been able to get each project to replace all the text data, but I can't seem to get the images to load into the thumbnails.
I have been able to get the last image i'm looking for in all of the images on the site, but not display each photo for each project.
Here's the HTML i'm working with:
<section id="details">
<div class="pagewrapper">
<section id="main-img">
<article id="big-img">
<img src="" alt="big-img" />
</article>
<article class="small-img-container">
<a href="#"><img src="#" alt="smallimg" class="small-img" /></a>
</article>
</section>
<section id="description">
<h3></h3>
<h4></h4>
<h5></h5>
<p></p>
</section>
</div>
<div class="clear"></div>
</section>
<section id="portfolio">
<div class="pagewrapper">
<h2 class="sectionTitle">Portfolio</h2>
<div class="thumb">
<a class="small" href="#" title="David Lockwood Music" data-year="2010" data-role="Sole Wordpress Developer" data-description="David Lockwood is a musician and an educator based in New Hampshire who came to me needing a website for his musical career. I fully developed his site using Wordpress as a CMS, creating a custom template based on the design by Jeremiah Louf. Jeremiah and I worked together on the website's UX design."><img src="images_original/davidcover.png" alt="thumb" />
<div class="hide">
<a href="images/davidlockwood/homepage.png" ></a>
<a href="images/davidlockwood/blog.png"></a>
<a href="images/davidlockwood/shows.png"></a>
<a href="images/davidlockwood/bio.png"></a>
<a href="images/davidlockwood/photos.png"></a>
</div>
<h3>David Lockwood Music</h3>
<div class="clear"></div>
</a>
</div><!--thumb-->
and here's the jQuery:
$(document).ready(function(){
var proj = {};
$('.thumb a').click(function() {
$('#details').slideDown(1000);
$('.hide a').each(function() {
proj.img = $(this).attr("href");
$('.small-img-container img').attr('src',proj.img);
});
alert("the image is " + proj.img);//is it getting the image URLS?
proj.title = $(this).attr("title");
proj.year = $(this).attr("data-year");
proj.role = $(this).attr("data-role");
proj.description = $(this).attr("data-description");
$('#description h3').text(proj.title);
$('#description h4').text(proj.year);
$('#description h5').text(proj.role);
$('#description p').text(proj.description);
});
});
Anyone have any idea how I grab just the images for the specific project, display them all as thumbnails and then make those thumbnail clickable to see the bigger image?
Thanks!
