On click open image in center of screen

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>

Why don't use a plugin such as [`fancybox`](http://fancyapps.com/fancybox/#examples)? — Mosh Feu, Jun 19 '16 at 06:56
Try this out : http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen — Master DJon, Jun 19 '16 at 07:27
This webpage - http://www.w3schools.com/howto/howto_css_modal_images.asp has a simple tutorial explaining how to make one with CSS and JavaScript and how it works. Or use a ready made plugin from the internet. — Edward, Jun 19 '16 at 10:44
JSFiddle example of the code stated in the question at https://jsfiddle.net/wqcqg0t2/. — Edward, Jun 19 '16 at 10:54

score 4 · Accepted Answer · answered Jun 19 '16 at 09:35

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

score 2 · Answer 2 · answered Jun 19 '16 at 09:54

2

You might want to try out imgZoom, a jQuery plugin to easily integrate zooming function to your current images: http://odyniec.net/projects/imgzoom/

answered Jun 19 '16 at 09:54

Ayhan Dorman

102
1
13

On click open image in center of screen

2 Answers2