Jquery - trying to create a image gallery that slides in to view upon clicking thumbnail

Question

I've been trying to figure out how to create my own custom image gallery for my portfolio website to no avail.

I have a div that holds my thumbnails for my different images. The CSS code for this div is as follows:

.gallery {
width: 900px;
height: 600px;
background-color: white;
margin: 50px;
float: left;
box-shadow: 3px 3px 20px #000000;
position: relative;

I've created another div which is #project_display that is absolutely positioned -900px to the left of the gallery div. This div is also set to width: 900px and height: 600px;

What I'm trying to do is take the anchored link of the thumbnails (which are the larger version images of the thumbnails) and dynamically Fill this outlying div with the larger image as it animates in. It's hard to explain. Below is the code, hopefully that makes it more clear:

$('.projects').bind('click', function(event){
    $('#project_display').animate({
        left:'0px'
        });
        event.preventDefault();

        var this_project = $('.projects').each(function(){
            $(this).children('a[href]');
        })

        $('#project_display').html('<img src="'+this_project+'"/>');
    })

The anchor link to the large image is not being put into the outlying div.

Can someone tell me what I'm doing wrong? because I clearly am not doing something right.

Answer 1

$('.projects').bind('click', function(event){
       var aHref= $(this).attr("href");
       $('#project_display').html('<img src="'+aHref+'"/>');
       $('#project_display').animate({
           left:'0px'
       });
 });

Try the above one. If not works Please Provide HTML also, that will increase the understanding of code. So I will help you to fix the problem.