Show photos on click (facebook-style) form - photo

Question

I need help on showing photos larger when you click them.
Let me explain better.
I am doing an art project. I am using MVC(model-view-controller) on CodeIgniter and I want ,if it is possible to show me the code,and where to put it...so when I click on the image it becomes larger,like the photos on facebook...they are small but when u click on them they became larger so you can better see the image.
Any idea ?
Would be appreciated :)

Answer 1

Ok here's the js fiddle:
http://jsfiddle.net/tK6up/2/
and here's the code. It assumes you're using the latest jQuery library:
HTML:
<img class="small_img" src="http://www.fleces.com/media/images/fleces_logo.png" style="width:100px;" />
<div id="large">
</div>
CSS:
#large{
display:none;
position:absolute;
z-index:100;
top:10%;
left:10%;
}
.small_img{
width:100px;
}
jQuery:
$(document).ready(function(){
$('.small_img').on('click', function(){
$('#large').html($(this).clone().removeClass('small_img')).fadeIn("medium");
});
$('#large').on('click', function(){
$(this).fadeOut("medium");
});
});
Keep in mind I just threw this together. I don't know what facebook does since I don't use that site. I just went by your description. In reality you might use lightbox to handle the popup and almost certainly you would re-style the css to fit your needs. But, as per your outline, this will work.