通过点击使用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

下面是一些基本的使用。

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');

Answer 2

准系统代码：

$(function() 
{ 
    $('#my-image').on('click', function() 
    { 
     $(this).width(1000); 
    }); 
}); 

http://jsfiddle.net/mattball/YbMTg/

Answer 3

你可能在寻找像fancybox一样的lightbox插件吗？

http://fancybox.net/

Answer 4

我知道这个帖子是慈祥的老人，但在两端万一别人绊倒，这是如何在一个jQuery对话框的图像放大。

$('img').on('click', function(){ 
    $('body').append('<div id="dialog" title="Image"><img src="' + $(this).attr('src') + '" width="300" /></div>'); 
    $('#dialog').dialog(); 
}); 

确保你有jquery-ui.css可用，否则它会看起来很有趣。

Answer 5

搜索和搜索后，我发现自己的方法做到了，而无需使用外部JS源代码，并且没有授权问题。定位绝对，并将宽度和高度设置为100％，玩一个div的ocupacy并在那里。我需要创建额外的表格才能够将图像居中，而不是在div上工作。不要忘记z-index将div和table放在所有其他元素之上。欢呼声......

function enlargeimage(x) 
    { 
     var a = document.getElementById('_enlargeimg'); 
     a.style.height = x + '%'; 
     a.style.width = x + '%'; 
     x++;  
     if (x < 90) 
     { setTimeout("enlargeimage(\"" + x + "\")", 5);} 
    } 

    function reduceimage(x) 
    { 
     var a = document.getElementById('_enlargeimg'); 
     a.style.height = x + '%'; 
     a.style.width = x + '%'; 
     x--; 

     if (x > 0) 
     { setTimeout("reduceimage(\"" + x + "\")", 5);} 
     else 
     { 
      b = document.getElementById('_enlargediv'); 
      c = document.getElementById('_enlargetable'); 
      b.parentNode.removeChild(b); 
      c.parentNode.removeChild(c);   
      document.body.style.overflow = 'auto'; 
     } 
    } 
     function createelements(imgfile) 
     { 

      var divbackground = document.createElement('div'); 
      divbackground.setAttribute('id', '_enlargediv'); 
      divbackground.style.width = '100%'; 
      divbackground.style.height = '100%'; 
      divbackground.style.position= 'absolute'; 
      divbackground.style.background= '#000'; 
      divbackground.style.left= '0'; 
      divbackground.style.top= '0'; 
      divbackground.style.opacity= 0.7; 
      divbackground.style.zIndex= '1'; 

      document.body.appendChild(divbackground); 

      var tblbackground = document.createElement('table'); 
      tblbackground.setAttribute('id', '_enlargetable') 
      tblbackground.style.width = '100%'; 
      tblbackground.style.height = '100%'; 
      tblbackground.style.position= 'absolute';  
      tblbackground.style.left= '0'; 
      tblbackground.style.top= '0';  
      tblbackground.style.zIndex= '2'; 
      tblbackground.style.textAlign = 'center'; 
      tblbackground.style.verticalAlign = 'middle'; 
      tblbackground.setAttribute('onClick', 'reduceimage(90)'); 

      var tr = tblbackground.insertRow(); 
      var td = tr.insertCell(); 

      var nimg = document.createElement('img'); 
      nimg.setAttribute('src', imgfile); 
      nimg.setAttribute('id', '_enlargeimg'); 
      nimg.style.width='0px'; 
      nimg.style.height='0px' 
      nimg.style.borderRadius = '5px'; 

      td.appendChild(nimg); 

      document.body.appendChild(tblbackground); 
      document.body.style.overflow = 'hidden';   

      enlargeimage(0); 
     } 

Answer 6

这是方法，我会用在它的最简单的水平平稳过渡到放大图像：

$(document).ready(function(){  
    $("img").click(function(){  
     $("img").animate({height: "300px"}); 
    }); 
}); 

Answer 7

这里是一个不错的代码片段将切换图像大小在120px宽和400px宽之间，以一个很好的慢动画onclick。

$("img").toggle(function() 
    {$(this).animate({width: "400px"}, 'slow');}, 
    function() 
    {$(this).animate({width: "120px"}, 'slow'); 
}); 

Answer 8

我选择了simplemodal jquery插件。它包括我需要的所有东西，并且超级简单易用。

Using SimpleModal (StackOverflow)

Answer 9

您还可以检查出www.point-blankllc.com，并采取看看PicBoss免费的代码。也许它会做你想做的事情，因为它会在保持图像比例的同时将图像扩大到尽可能大。