单击时，在屏幕中央打开图像

Question

So i tried to make my gallery more better. I want when user click on element to open image in the middle of the screen. I'm sure that there is efficient way to do this with adding class or something. What should i do ?

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

I think I have exactly what you are looking for.

You can look for some css and an example here

This is where the magic happens:

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

This should cover the popup logic.

For the centering issue you should check out the link above and look at the css documentation

Fabio Ottaviani 's work, nicely done.

Hope it helps :)

Answer 2

您可能想尝试imgZoom，这是一个jQuery插件，可轻松将缩放功能集成到当前图像中： http : //odyniec.net/projects/imgzoom/