I have one query in my php website. 
I want to display image on button click.
Right now image is open in different webpage, but i need to open it in same webpage with some effect like imageViewer.
code snippet appreciated.
thanks

```
<script type="text/javascript">
  $(document).ready(function () {
  $("#selectedAlbumList").change(function () {
    $("#loading1").after('<div id="loader1"><img src="img/loading.gif" width="20px" height="20px" alt="loading division" /></div>');
    $.get('albumimageGet.php?albumid=' + $("#selectedAlbumList").val() + ' ', function (data) {
      $("#galleryData").html(data);
      $('#loader1').slideUp(200, function ()
                            {
        alert(data);
        $(this).remove();
      });
    });
  });
});
</script>

```

//albumimageGet.php

```
<div class="gallery" data-toggle="lightbox-gallery">
  <div class="row">
    <?php
while ($row = mysql_fetch_array($query)) {
?>
    <div class="col-sm-4 gallery-image">
      <img src="json/uploads/<?php echo $username; ?>/<?php echo $albumname; ?>/<?php echo $row['imagename']; ?>" alt="image" height="200" width="350">
      <div class="gallery-image-options text-center">
        <div class="btn-group btn-group-sm">
          <a href="json/uploads/<?php echo $username; ?>/<?php echo $albumname; ?>/<?php echo $row['imagename']; ?>" class="gallery-link btn btn-sm btn-alt btn-default" title="Image Info">View</a>
          <a href="deleteImage.php?albumid=<?php echo $albumid; ?>&imagename=<?php echo $row['imagename']; ?>" class="btn btn-sm btn-alt btn-default" data-toggle="tooltip" title="Delete" style="height:30px;"><i class="fa fa-trash-o"></i></a>
        </div>
      </div>
    </div>
    <?php
}
?> 
  </div>
</div>

```