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

使用すると、1つの特定の画像にクリックイベントをバインドするために探している場合、このように画像とid とキャッシュを与える

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

Answer 2

ベアボーンコード：

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

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

Answer 3

fancyboxのようなライトボックスのプラグインをお探しですか？

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で動作しませんでした。他のすべての要素の上にdivとtableを置くためにz-indexを忘れないでください。歓声...

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

は、ここで画像サイズを切り替えることができます素敵なコードスニペットです幅120ピクセルから幅400ピクセルまでの間で、素早くアニメーションをオンクリックします。

$("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無料のコードを見てかかることがあります。おそらく、それは画像の比率を維持しながら、画面上でできるだけ大きくなるように画像を拡大するので、あなたが望むことをするでしょう。