Enlarge image by clicking on it using jQuery

Question

How do I enlarge an image by clicking on it using jQuery. I'm pretty new to this and feel like I'm going in circles, please help. Thanks!

Here's the HTML portion:

  <div class="box"> 
    <img id="image1" src="css/images/smallknife.png"> 
    <p>$50.00</p> 
  </div> 

<div id="dialog" style="display: none;"> 
  <img src="css/images/smallknife.png"> 
</div>

And this is the jQuery portion

$('#image1').click(function(){
        $("#dialog").dialog();
    });   

Answer 1

Might you be looking for a lightbox plugin like fancybox?

http://fancybox.net/