通過點擊使用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免費的代碼。也許它會做你想做的事情，因爲它會在保持圖像比例的同時將圖像擴大到儘可能大。