使用jQuery单击放大图像

Question

如何通过使用jQuery单击来放大图像.我对此非常陌生,觉得我在圈子里,请帮忙.谢谢!

这是HTML部分:

  <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>

这是jQuery部分

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

Answer 1

您是否正在寻找像fancybox这样的灯箱插件？

http://fancybox.net/

Answer 2

这是一些基本用途。

var $img = $('img'); // finds all image tags

$img.click(function resize(e) { // bind click event to all images
  $img.css({ // resize the image
     height: '300px',
     width: '300px'
  });
});

如果您希望将单击事件绑定到一张特定图像，请id 像这样提供图像和缓存

var $img = $('#imageID');