View enlarged image on click

by Brad Patton

HTML

<div class="web_dialog_overlay"> </div>

<div class="web_dialog" id="popup"><img id="popup-image" width="800" height="800" src=""/> </div>

<a href="javascript:void(0)" class="popup"><img id="my-image" width="300" height="300" src="http://asymptotia.com/wp-images/2015/06/sunflower_june_2015.jpg"/></a>

<img id="sunflower" width="300" height="300" src="http://asymptotia.com/wp-images/2015/05/techniflower.jpg"/>

CSS

.web_dialog_overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.web_dialog {
   display: none;
   position: fixed;
  //width: 100%;
 // height: 100%;
   top: 10%;
   left: 10%;
   margin-left: -19px;
   margin-top: -15px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;
   font-family: Verdana;
   font-size: 10pt;
}

JavaScript

$(function() {
	$(".popup").click(function (e) {
        var source = $("#my-image").prop('src');
		ShowDialog(false, source);
	    e.preventDefault();
	});
    
    $("#sunflower").click(function (e) {
        var source = $(this).prop('src');
        //alert(source);
		ShowDialog(true, source);
	    e.preventDefault();
	});
});

   function ShowDialog(modal, source) {
       //alert(source);
       $("#popup-image").attr('src', source);
       
      $(".web_dialog_overlay").show();
      $(".web_dialog").fadeIn(300);

      if (modal) {
         $(".web_dialog_overlay").unbind("click");
      } else {
         $(".web_dialog_overlay, .web_dialog").click(function (e) {
            HideDialog();
         });
      }
   }

   function HideDialog() {
      $(".web_dialog_overlay").hide();
      $(".web_dialog").fadeOut(300);
   }