Auf Klick Bild in der Mitte des Bildschirms öffnen

Question

Also habe ich versucht, meine Galerie besser zu machen. Ich möchte, wenn Benutzer auf Element klicken, um das Bild in der Mitte des Bildschirms zu öffnen. Ich bin mir sicher, dass es einen effizienten Weg gibt, dies mit dem Hinzufügen von Klassen oder etwas zu tun. Was soll ich tun?

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

Ich glaube, ich habe genau das, was Sie suchen.

Sie können für einige CSS aussehen und ein Beispiel here

Dies ist, wo die Magie passiert:

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() 

Dies sollte die Popup-Logik decken.

Fabio Ottaviani seine Arbeit getan schön

Für die Zentrierung Ausgabe, die Sie über den Link sollten überprüfen, und bei der CSS-Dokumentation suchen.

Hope it :)

Answer 2

hilft Vielleicht möchten imgZoom ausprobieren, ein jQuery-Plugin leicht zu integrieren, um Ihre aktuelle Bilder Zoomfunktion: http://odyniec.net/projects/imgzoom/