open full size image when clicking on thumbnail inside a div

Question

I'm using on my website a page that displays images in a Grid. What I'm trying to do is to open a full size version of my image when clicking on it. When clicking on an image, a div displays over the thumbnails, containing the same image but with different width and height, and the div has to be on the top left of my container grid. something like an overlay but I don't what's the best method to do it. i don't want to use a lightbox.

my original size photos is :

.photo_medias{width:233px;height:133px}

and the full size should be :

.photo_medias{width:706px;height:364px}

here is a jsfiddle of my grid : http://jsfiddle.net/aaWLJ/9/

can anybody help me with this ?

thanks a lot for your help

Answer 1

This is not the full answer (some css is needed to do it beautifully), but:

JS:

$(".mix").click(function(){
    var photoSrc = $(this).find("img").attr("src");
    $(this).append("<div class='big-img-cont'><img src='"+photoSrc+"' /></div>");
});

CSS:

.container .mix{
    position: relative;
  display: inline-block; 
}

.photo_medias{width:233px;height:133px}

.big-img-cont{
    position: absolute;
    top:0px;
    left:0px;

}

.big-img-cont img{
    width:706px;height:364px
}

EDIT:

regarding your second question (in your comment), you can do something like:

JS:

 $(".mix").click(function(){
        var photoSrc = $(this).find("img").attr("src");
        $(this).append("<div class='big-img-cont'><img src='"+photoSrc+"' /><a class='close-img' href='javascript:void(0);'>close</a></div>");
    });



 $(document).on( "click", ".close-img", function(){
     $(".big-img-cont").remove();
  } );