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文档

Fabio Ottaviani 的工作很好。

希望有所帮助：）

Answer 2

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

点击屏幕中心的打开图像

2 个答案: