CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pHenomen
pHenomen

Reputation: 153

On click open image in center of screen

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>

Upvotes: 2

Views: 16135

Answers (2)

Ayhan Dorman
Ayhan Dorman

Reputation: 102

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

Upvotes: 2

Vali D
Vali D

Reputation: 541

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

Upvotes: 5

Related Questions