How to Create Fancy Lightbox with using CSS and Javascript

Include JQuery Library

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="https://code.jquery.com/jquery-1.10.2.js">
<script src="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/js/jquery.fancybox.js"></script>
<script src="stylesheet" href="http://portal.domainshostweb.com/stackui.blogspot/js/jquery.fancybox.js"></script>

You can click to see Fancy Lightbox

Use this .fancybox in you hyperlink

You can Create multiple Fancy box just changed your IDs (inline1012, inline1013, inline1014) from href also.

Add this HTML code after head tag

     
      <div class="hide">
       <div id="inline1011">
        <h2>Bikiya Owais Ghulam Hussain</h2>
        <p>Muhammad Owais is a Creative Designer, Front End and Wordpress Developer. I have 5+ years of experiece of Designing website in PSD, HTML & CSS, Responsive sites, Mobile Application Design and Wordpress.</p> <br />
        <a class="when_click" href="https://www.linkedin.com/in/owais-ghulam-hussain-87b0271b/" target="_blank">Click Here To View Linkedin Profile</a>
       </div>
      </div>
     
    

Add this CSS code

     
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
 padding: 0;
 margin: 0;
 border: 0;
 outline: none;
 vertical-align: top;
}

.fancybox-wrap {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 8020;
}

.fancybox-skin {
 position: relative;
 background: #f9f9f9;
 border:2px solid #df6400;
 color: #444;
 text-shadow: none;
 -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
         border-radius: 4px;
}

.fancybox-opened {
 z-index: 8030;
}

.fancybox-opened .fancybox-skin {
 -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
 position: relative;
}

.fancybox-inner {
 overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
 -webkit-overflow-scrolling: touch;
}

.fancybox-error {
 color: #444;
 font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
 margin: 0;
 padding: 15px;
 white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
 display: block;
 width: 100%;
 height: 100%;
}

.fancybox-image {
 max-width: 100%;
 max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
 background-image: url('fancybox_sprite.png');
}

#fancybox-loading {
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -22px;
 margin-left: -22px;
 background-position: 0 -108px;
 opacity: 0.8;
 cursor: pointer;
 z-index: 8060;
}

#fancybox-loading div {
 width: 44px;
 height: 44px;
 background: url('fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
 position: absolute;
 top: -18px;
 right: -18px;
 width: 36px;
 height: 36px;
 cursor: pointer;
 z-index: 8040;
}

.fancybox-nav {
 position: absolute;
 top: 0;
 width: 40%;
 height: 100%;
 cursor: pointer;
 text-decoration: none;
 background: transparent url('blank.gif'); /* helps IE */
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 z-index: 8040;
}

.fancybox-prev {
 left: 0;
}

.fancybox-next {
 right: 0;
}

.fancybox-nav span {
 position: absolute;
 top: 50%;
 width: 36px;
 height: 34px;
 margin-top: -18px;
 cursor: pointer;
 z-index: 8040;
 visibility: hidden;
}

.fancybox-prev span {
 left: 10px;
 background-position: 0 -36px;
}

.fancybox-next span {
 right: 10px;
 background-position: 0 -72px;
}

.fancybox-nav:hover span {
 visibility: visible;
}

.fancybox-tmp {
 position: absolute;
 top: -99999px;
 left: -99999px;
 visibility: hidden;
 max-width: 99999px;
 max-height: 99999px;
 overflow: visible !important;
}



/* Title helper */

.fancybox-title {
 visibility: hidden;
 font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
 position: relative;
 text-shadow: none;
 z-index: 8050;
}

.fancybox-opened .fancybox-title {
 visibility: visible;
}

.fancybox-title-float-wrap {
 position: absolute;
 bottom: 0;
 right: 50%;
 margin-bottom: -35px;
 z-index: 8050;
 text-align: center;
}

.fancybox-title-float-wrap .child {
 display: inline-block;
 margin-right: -100%;
 padding: 2px 20px;
 background: transparent; /* Fallback for web browsers that doesn't support RGBa */
 background: rgba(0, 0, 0, 0.8);
 -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
         border-radius: 15px;
 text-shadow: 0 1px 2px #222;
 color: #FFF;
 font-weight: bold;
 line-height: 24px;
 white-space: nowrap;
}

.fancybox-title-outside-wrap {
 position: relative;
 margin-top: 10px;
 color: #fff;
}

.fancybox-title-inside-wrap {
 padding-top: 10px;
}

.fancybox-title-over-wrap {
 position: absolute;
 bottom: 0;
 left: 0;
 color: #fff;
 padding: 10px;
 background: #000;
 background: rgba(0, 0, 0, .8);
}

    

You can also set your width according to your need. Just need to style your ID

     
      #inline1011 {
       max-width:350px;
       width:100%;
      }
      
      #inline1012 {
       max-width:550px;
       width:100%;
      }
     
    

Add this Javascript

     
      $(document).ready(function() {
       $('.fancybox').fancybox();
      });
      
     

Click here to Download Code Download

Bikiya Owais Ghulam Hussain

Muhammad Owais is a Creative Designer, Front End and Wordpress Developer. I have 5+ years of experiece of Designing website in PSD, HTML & CSS, Responsive sites, Mobile Application Design and Wordpress.

Click Here To View Linkedin Profile

Bikiya Owais Ghulam Hussain

Muhammad Owais is a Creative Designer, Front End and Wordpress Developer. I have 5+ years of experiece of Designing website in PSD, HTML & CSS, Responsive sites, Mobile Application Design and Wordpress.

Click Here To View Linkedin Profile