Open image in popup using jquery - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Open image in popup using jquery

In this article I am going to explain how to open image in popup using Jquery.


Description:
To implement this functionality I am using fancybox Jquery plugin. When user move the cursor to thumbnail/image, preview icon become visible and fade out effect will be applied. When user clicks on preview icon image will be open in a popup.

Implementation:
Add the below given style to CSS file or in web page before closing </head> tag.

    <link href="js/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<style>
   img
   {
       width:300px;
       height:200px;
   }
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view a.info {
   background:url(img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
}
.img-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.img-effect a.info {
   position:relative;
   top:-10px;
   opacity: 0;
   -webkit-transition: opacity 0.5s 0s ease-in-out;
   -moz-transition: opacity 0.5s 0s ease-in-out;
   -o-transition: opacity 0.5s 0s ease-in-out;
   -ms-transition: opacity 0.5s 0s ease-in-out;
   transition: opacity 0.5s 0s ease-in-out;
}
.img-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.img-effect:hover a.info {
            opacity:1;
            -moz-transition-delay: 0.3s;
            -webkit-transition-delay: 0.3s;
            -o-transition-delay: 0.3s;
            -ms-transition-delay: 0.3s;
            transition-delay: 0.3s;
}
   </style>

Add the given scripts to webpage:


<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.fancybox.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $(".fancybox-effects").fancybox({
               helpers: {
                   title: {
                       type: 'outside'
                   },
                   overlay: {
                       css: {
                           'background': 'rgba(238,238,238,0.85)'
                       }
                   }
               }
           });        
       });
            </script>

Complete HTML Markup of HTML/web page page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <link href="js/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.fancybox.js" type="text/javascript"></script>
   <style>
   img
   {
       width:300px;
       height:200px;
   }
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view a.info {
   background:url(img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
}
.img-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.img-effect a.info {
   position:relative;
   top:-10px;
   opacity: 0;
   -webkit-transition: opacity 0.5s 0s ease-in-out;
   -moz-transition: opacity 0.5s 0s ease-in-out;
   -o-transition: opacity 0.5s 0s ease-in-out;
   -ms-transition: opacity 0.5s 0s ease-in-out;
   transition: opacity 0.5s 0s ease-in-out;
}
.img-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.img-effect:hover a.info {
            opacity:1;
            -moz-transition-delay: 0.3s;
            -webkit-transition-delay: 0.3s;
            -o-transition-delay: 0.3s;
            -ms-transition-delay: 0.3s;
            transition-delay: 0.3s;
}
   </style>

   <script type="text/javascript">
       $(document).ready(function () {
           $(".fancybox-effects").fancybox({
               helpers: {
                   title: {
                       type: 'outside'
                   },
                   overlay: {
                       css: {
                           'background': 'rgba(238,238,238,0.85)'
                       }
                   }
               }
           });        
       });
            </script> 
</head>
<body>
    <form id="form1" runat="server">
   <div class="view img-effect">
  <img src="images/img2.jpg"/>
      <div class="mask"><a class="fancybox-effects info" href="images/img2.jpg"></a>                    
</div></div>
<div class="view img-effect">
  <img src="images/img1.jpg">
      <div class="mask"><a class="fancybox-effects info" href="images/img1.jpg"></a>                    
</div></div>
<div class="view img-effect">
  <img src="images/img3.jpg">
      <div class="mask"><a class="fancybox-effects info" href="images/img3.jpg"></a>                    
</div></div>
    </form>
</body>
</html>

Open the page in browser and test it.
https://app.box.com/s/hmbjq1amle5r244aijob3akg1gxxhycz
Demo:

Open image in popup using jquery


  In this article we have learn how to open image in popup using Jquery asp.net . I hope you enjoyed this article. 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon