How To Popup Image Over The Screen After Clicking The Image

In my code, there is a lot of image in a table. I want to click a photo & then the photo will popup in a large size over the screen. But I do not have much idea about javascrip

Solution 1:

Instead of the onclick attribute, you could assign a class popup_image to your img and attach a click handler when the DOM is ready.

I took the liberty to remove scripts and tags that were not neccessary to demonstrate the result.

$(document).ready(function() {

  $(".popup_image").on('click', function() {
    w2popup.open({
      title: 'Image',
      body: '<div class="w2ui-centered"><img src="' + $(this).attr('src') + '"></img></div>'
    });
  });

});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scripttype="text/javascript"src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script><linkrel="stylesheet"type="text/css"href="http://w2ui.com/src/w2ui-1.4.2.min.css" /><imgclass="btn popup_image"style="width:100px; height:100px; border-radius:4px;"src="http://lorempixel.com/g/200/200/"></img>

Solution 2:

Replace your jquery with below any try:

<scripttype="text/javascript">functionpopup() {
       var image = $(this).attr('src');
        w2popup.open({
            title: 'Image',
            body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
        });
    }
</script>

I assume the images are displayed properly which you will click

Solution 3:

I would recommend using Colorbox by Jack Moore. It uses JQuery, and is very customizable.

Colorbox: http://www.jacklmoore.com/colorbox/

Demo: http://www.jacklmoore.com/colorbox/example1/

If you aren't opposed to using PHP, you also may want to check out UberGallery. It uses colorbox internally and can be used simply with

<?php include_once('UberGallery.php') UberGallery::init()->createGallery("path to dir","name of gallery"); ?>