クリックすると画面の中央に画像が開きます

Question

私はギャラリーをもっと良くしようとしました。ユーザーが画面の中央で画像を開くために要素をクリックしたいとき。私はクラスや何かを追加することでこれを行う効率的な方法があると確信しています。 どうすればいいですか？

HTML

<ul class="gallery"> 
     <li> 
      <img src="img/1.png" /> 
      <div class="caption" onclick="view('1.png')"> 
       <div class="blur"></div> 
       <div class="caption-text"> 
        <h1>+</h1> 
       </div> 
      </div> 
     </li> 
     <li> 
      <img src="img/2.png" onClick="view('2.png');"> 
      <div class="caption"> 
       <div class="blur"></div> 
       <div class="caption-text"> 
        <h1>+</h1> 
       </div> 
      </div> 
     </li> 
    <ul> 

Javascriptを：

<script type="text/javascript"> 
    function view(imgsrc) { 
     viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300'); 
    } 
</script> 

Answer 1

私はあなたが探している正確に何を持っていると思います。あなたは、いくつかのCSSと例here

を探すことができます

魔法が起こる場所です：

popup = { 
init: function(){ 
    $('li').click(function(){ 
    popup.open($(this)); 
    }); 

$(document).on('click', '.popup img', function(){ 
    return false; 
}).on('click', '.popup', function(){ 
    popup.close(); 
}) 
}, 
open: function($li) { 
$('.gallery').addClass('pop'); 
$popup = $('<div class="popup" />').appendTo($('body')); 
$fig = $li.clone().appendTo($('.popup')); 
$bg = $('<div class="bg" />').appendTo($('.popup')); 
$close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig); 
$shadow = $('<div class="shadow" />').appendTo($fig); 
src = $('img', $fig).attr('src'); 
$shadow.css({backgroundImage: 'url(' + src + ')'}); 
$bg.css({backgroundImage: 'url(' + src + ')'}); 
setTimeout(function(){ 
    $('.popup').addClass('pop'); 
}, 10); 
}, 
close: function(){ 
$('.gallery, .popup').removeClass('pop'); 
setTimeout(function(){ 
    $('.popup').remove() 
}, 100); 
} 
} 

popup.init() 

これは、ポップアップ・ロジックをカバーする必要があります。中心問題については

あなたは上記のリンクをチェックアウトして、CSSのドキュメント

うまく行わファビオオッタヴィアーニの作品、見なければなりません。

はそれが役に立てば幸い:)

Answer 2

あなたが簡単にあなたの現在の画像にズーム機能を統合するimgZoom、jQueryプラグインを試してみたいことがありますhttp://odyniec.net/projects/imgzoom/