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

Barebones代码：

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

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

Answer 3

这是一些基本用法。

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

如果您要将click事件绑定到一个特定图像，请提供图像并id 和像这样的缓存

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

Answer 4

这是我将使用的最简单的方法来放大平滑过渡的图像：

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

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

我知道这篇文章有点陈旧，但万一其他人偶然发现它，这就是如何在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 7

这是一个很好的代码片段，它可以在120px宽和400px宽之间切换图像大小，并且可以点击一个漂亮的慢动画。

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

Answer 8

我选择了simplemodal jquery插件。它包括我需要的所有内容，并且使用起来非常简单。

Using SimpleModal (StackOverflow)

使用jQuery单击放大图像

8 个答案: