Implementing Fancybox in Blogger

FancyBox is a tool for displaying images, HTML content and multi-media in a Mac-style "lightbox" that floats overtop of web page.It is built using the jQuery library

It is a combination of JavaScript, CSS and some images that allow you to create a modal effect using the JavaScript framework jQuery

Steps to Add it to Blogger:

1.Login to the Blogger account

For Multiple Usage
For Single Usage

2. Now Go to Design > Edit HTML.

Now search for the </head> tag and paste the following code just Above/Before it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">  
 </script>  
 <script src="https://sites.google.com/site/fowziey/jquery.fancybox-1.3.4.js" type="text/javascript">  
 </script>

Now search for the ]]></b:skin> tag and paste the following code just Above/Before it.

#fancybox-loading {  
 position: fixed;  
 top: 50%;  
 left: 50%;  
 width: 40px;  
 height: 40px;  
 margin-top: -20px;  
 margin-left: -20px;  
 cursor: pointer;  
 overflow: hidden;  
 z-index: 1104;  
 display: none;  
 }  
 #fancybox-loading div {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 40px;  
 height: 480px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 }  
 #fancybox-overlay {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 100%;  
 z-index: 1100;  
 display: none;  
 }  
 #fancybox-tmp {  
 padding: 0;  
 margin: 0;  
 border: 0;  
 overflow: auto;  
 display: none;  
 }  
 #fancybox-wrap {  
 position: absolute;  
 top: 0;  
 left: 0;  
 padding: 20px;  
 z-index: 1101;  
 outline: none;  
 display: none;  
 }  
 #fancybox-outer {  
 position: relative;  
 width: 100%;  
 height: 100%;  
 background: #fff;  
 }  
 #fancybox-content {  
 width: 0;  
 height: 0;  
 padding: 0;  
 outline: none;  
 position: relative;  
 overflow: hidden;  
 z-index: 1102;  
 border: 0px solid #fff;  
 }  
 #fancybox-hide-sel-frame {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 100%;  
 height: 100%;  
 background: transparent;  
 z-index: 1101;  
 }  
 #fancybox-close {  
 position: absolute;  
 top: -15px;  
 right: -15px;  
 width: 30px;  
 height: 30px;  
 background: transparent url('https://sites.google.com/site/fowziey/fancybox.png') -40px 0px;  
 cursor: pointer;  
 z-index: 1103;  
 display: none;  
 }  
 #fancybox-error {  
 color: #444;  
 font: normal 12px/20px Arial;  
 padding: 14px;  
 margin: 0;  
 }  
 #fancybox-img {  
 width: 100%;  
 height: 100%;  
 padding: 0;  
 margin: 0;  
 border: none;  
 outline: none;  
 line-height: 0;  
 vertical-align: top;  
 }  
 #fancybox-frame {  
 width: 100%;  
 height: 100%;  
 border: none;  
 display: block;  
 }  
 #fancybox-left, #fancybox-right {  
 position: absolute;  
 bottom: 0px;  
 height: 100%;  
 width: 35%;  
 cursor: pointer;  
 outline: none;  
 background: transparent url('https://sites.google.com/site/fowziey/fancy_blank.gif');  
 z-index: 1102;  
 display: none;  
 }  
 #fancybox-left {  
 left: 0px;  
 }  
 #fancybox-right {  
 right: 0px;  
 }  
 #fancybox-left-ico, #fancybox-right-ico {  
 position: absolute;  
 top: 50%;  
 left: -9999px;  
 width: 30px;  
 height: 30px;  
 margin-top: -15px;  
 cursor: pointer;  
 z-index: 1102;  
 display: block;  
 }  
 #fancybox-left-ico {  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -30px;  
 }  
 #fancybox-right-ico {  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -60px;  
 }  
 #fancybox-left:hover, #fancybox-right:hover {  
 visibility: visible; /* IE6 */  
 }  
 #fancybox-left:hover span {  
 left: 20px;  
 }  
 #fancybox-right:hover span {  
 left: auto;  
 right: 20px;  
 }  
 .fancybox-bg {  
 position: absolute;  
 padding: 0;  
 margin: 0;  
 border: 0;  
 width: 20px;  
 height: 20px;  
 z-index: 1001;  
 }  
 #fancybox-bg-n {  
 top: -20px;  
 left: 0;  
 width: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png');  
 }  
 #fancybox-bg-ne {  
 top: -20px;  
 right: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -162px;  
 }  
 #fancybox-bg-e {  
 top: 0;  
 right: -20px;  
 height: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png');  
 background-position: -20px 0px;  
 }  
 #fancybox-bg-se {  
 bottom: -20px;  
 right: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -182px;   
 }  
 #fancybox-bg-s {  
 bottom: -20px;  
 left: 0;  
 width: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png');  
 background-position: 0px -20px;  
 }  
 #fancybox-bg-sw {  
 bottom: -20px;  
 left: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -142px;  
 }  
 #fancybox-bg-w {  
 top: 0;  
 left: -20px;  
 height: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png');  
 }  
 #fancybox-bg-nw {  
 top: -20px;  
 left: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -122px;  
 }  
 #fancybox-title {  
 font-family: Helvetica;  
 font-size: 12px;  
 z-index: 1102;  
 }  
 .fancybox-title-inside {  
 padding-bottom: 10px;  
 text-align: center;  
 color: #333;  
 background: #fff;  
 position: relative;  
 }  
 .fancybox-title-outside {  
 padding-top: 10px;  
 color: #fff;  
 }  
 .fancybox-title-over {  
 position: absolute;  
 bottom: 0;  
 left: 0;  
 color: #FFF;  
 text-align: left;  
 }  
 #fancybox-title-over {  
 padding: 10px;  
 background-image: url('https://sites.google.com/site/fowziey/fancy_title_over.png');  
 display: block;  
 }  
 .fancybox-title-float {  
 position: absolute;  
 left: 0;  
 bottom: -20px;  
 height: 32px;  
 }  
 #fancybox-title-float-wrap {  
 border: none;  
 border-collapse: collapse;  
 width: auto;  
 }  
 #fancybox-title-float-wrap td {  
 border: none;  
 white-space: nowrap;  
 }  
 #fancybox-title-float-left {  
 padding: 0 0 0 15px;  
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -40px -90px no-repeat;  
 }  
 #fancybox-title-float-main {  
 color: #FFF;  
 line-height: 29px;  
 font-weight: bold;  
 padding: 0 0 3px 0;  
 background: url('https://sites.google.com/site/fowziey/fancybox-x.png') 0px -40px;  
 }  
 #fancybox-title-float-right {  
 padding: 0 0 0 15px;  
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -55px -90px no-repeat;  
 }  
 /* IE6 */  
 .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_close.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_left.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_right.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }  
 .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_left.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_main.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_right.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {  
 height: expression(this.parentNode.clientHeight   "px");  
 }  
 #fancybox-loading.fancybox-ie6 {  
 position: absolute; margin-top: 0;  
 top: expression( (-20   (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 )   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ))   'px');  
 }  
 #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_loading.png', sizingMethod='scale'); }  
 /* IE6, IE7, IE8 */  
 .fancybox-ie .fancybox-bg { background: transparent !important; }  
 .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_n.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_ne.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_e.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_se.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_s.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_sw.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_w.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_nw.png', sizingMethod='scale'); }

Now search for the </body> tag and paste the following code just Above/Before it.

<script type="text/javascript">  
 //<![CDATA[  
 $(document).ready(function() {  
 /* This is basic settings */  
 $("a.fancy").fancybox();  
 });  
 //]]>  
 </script>

2.Now go to the Post/Page you want to add the FancyBox and go to Edit HTML.

Now copy the code from below and paste it there

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">  
 </script>  
 <script src="https://sites.google.com/site/fowziey/jquery.fancybox-1.3.4.js" type="text/javascript">  
 </script>  
 <style type="text/CSS">  
 #fancybox-loading {  
 position: fixed;  
 top: 50%;  
 left: 50%;  
 width: 40px;  
 height: 40px;  
 margin-top: -20px;  
 margin-left: -20px;  
 cursor: pointer;  
 overflow: hidden;  
 z-index: 1104;  
 display: none;  
 }  
 #fancybox-loading div {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 40px;  
 height: 480px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 }  
 #fancybox-overlay {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 100%;  
 z-index: 1100;  
 display: none;  
 }  
 #fancybox-tmp {  
 padding: 0;  
 margin: 0;  
 border: 0;  
 overflow: auto;  
 display: none;  
 }  
 #fancybox-wrap {  
 position: absolute;  
 top: 0;  
 left: 0;  
 padding: 20px;  
 z-index: 1101;  
 outline: none;  
 display: none;  
 }  
 #fancybox-outer {  
 position: relative;  
 width: 100%;  
 height: 100%;  
 background: #fff;  
 }  
 #fancybox-content {  
 width: 0;  
 height: 0;  
 padding: 0;  
 outline: none;  
 position: relative;  
 overflow: hidden;  
 z-index: 1102;  
 border: 0px solid #fff;  
 }  
 #fancybox-hide-sel-frame {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 100%;  
 height: 100%;  
 background: transparent;  
 z-index: 1101;  
 }  
 #fancybox-close {  
 position: absolute;  
 top: -15px;  
 right: -15px;  
 width: 30px;  
 height: 30px;  
 background: transparent url('https://sites.google.com/site/fowziey/fancybox.png') -40px 0px;  
 cursor: pointer;  
 z-index: 1103;  
 display: none;  
 }  
 #fancybox-error {  
 color: #444;  
 font: normal 12px/20px Arial;  
 padding: 14px;  
 margin: 0;  
 }  
 #fancybox-img {  
 width: 100%;  
 height: 100%;  
 padding: 0;  
 margin: 0;  
 border: none;  
 outline: none;  
 line-height: 0;  
 vertical-align: top;  
 }  
 #fancybox-frame {  
 width: 100%;  
 height: 100%;  
 border: none;  
 display: block;  
 }  
 #fancybox-left, #fancybox-right {  
 position: absolute;  
 bottom: 0px;  
 height: 100%;  
 width: 35%;  
 cursor: pointer;  
 outline: none;  
 background: transparent url('https://sites.google.com/site/fowziey/fancy_blank.gif');  
 z-index: 1102;  
 display: none;  
 }  
 #fancybox-left {  
 left: 0px;  
 }  
 #fancybox-right {  
 right: 0px;  
 }  
 #fancybox-left-ico, #fancybox-right-ico {  
 position: absolute;  
 top: 50%;  
 left: -9999px;  
 width: 30px;  
 height: 30px;  
 margin-top: -15px;  
 cursor: pointer;  
 z-index: 1102;  
 display: block;  
 }  
 #fancybox-left-ico {  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -30px;  
 }  
 #fancybox-right-ico {  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -60px;  
 }  
 #fancybox-left:hover, #fancybox-right:hover {  
 visibility: visible; /* IE6 */  
 }  
 #fancybox-left:hover span {  
 left: 20px;  
 }  
 #fancybox-right:hover span {  
 left: auto;  
 right: 20px;  
 }  
 .fancybox-bg {  
 position: absolute;  
 padding: 0;  
 margin: 0;  
 border: 0;  
 width: 20px;  
 height: 20px;  
 z-index: 1001;  
 }  
 #fancybox-bg-n {  
 top: -20px;  
 left: 0;  
 width: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png');  
 }  
 #fancybox-bg-ne {  
 top: -20px;  
 right: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -162px;  
 }  
 #fancybox-bg-e {  
 top: 0;  
 right: -20px;  
 height: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png');  
 background-position: -20px 0px;  
 }  
 #fancybox-bg-se {  
 bottom: -20px;  
 right: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -182px;   
 }  
 #fancybox-bg-s {  
 bottom: -20px;  
 left: 0;  
 width: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png');  
 background-position: 0px -20px;  
 }  
 #fancybox-bg-sw {  
 bottom: -20px;  
 left: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -142px;  
 }  
 #fancybox-bg-w {  
 top: 0;  
 left: -20px;  
 height: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png');  
 }  
 #fancybox-bg-nw {  
 top: -20px;  
 left: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -122px;  
 }  
 #fancybox-title {  
 font-family: Helvetica;  
 font-size: 12px;  
 z-index: 1102;  
 }  
 .fancybox-title-inside {  
 padding-bottom: 10px;  
 text-align: center;  
 color: #333;  
 background: #fff;  
 position: relative;  
 }  
 .fancybox-title-outside {  
 padding-top: 10px;  
 color: #fff;  
 }  
 .fancybox-title-over {  
 position: absolute;  
 bottom: 0;  
 left: 0;  
 color: #FFF;  
 text-align: left;  
 }  
 #fancybox-title-over {  
 padding: 10px;  
 background-image: url('https://sites.google.com/site/fowziey/fancy_title_over.png');  
 display: block;  
 }  
 .fancybox-title-float {  
 position: absolute;  
 left: 0;  
 bottom: -20px;  
 height: 32px;  
 }  
 #fancybox-title-float-wrap {  
 border: none;  
 border-collapse: collapse;  
 width: auto;  
 }  
 #fancybox-title-float-wrap td {  
 border: none;  
 white-space: nowrap;  
 }  
 #fancybox-title-float-left {  
 padding: 0 0 0 15px;  
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -40px -90px no-repeat;  
 }  
 #fancybox-title-float-main {  
 color: #FFF;  
 line-height: 29px;  
 font-weight: bold;  
 padding: 0 0 3px 0;  
 background: url('https://sites.google.com/site/fowziey/fancybox-x.png') 0px -40px;  
 }  
 #fancybox-title-float-right {  
 padding: 0 0 0 15px;  
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -55px -90px no-repeat;  
 }  
 /* IE6 */  
 .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_close.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_left.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_right.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }  
 .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_left.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_main.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_right.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {  
 height: expression(this.parentNode.clientHeight   "px");  
 }  
 #fancybox-loading.fancybox-ie6 {  
 position: absolute; margin-top: 0;  
 top: expression( (-20   (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 )   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ))   'px');  
 }  
 #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_loading.png', sizingMethod='scale'); }  
 /* IE6, IE7, IE8 */  
 .fancybox-ie .fancybox-bg { background: transparent !important; }  
 .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_n.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_ne.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_e.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_se.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_s.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_sw.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_w.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_nw.png', sizingMethod='scale'); }  
 </style>  
 <script type="text/javascript">  
 //<![CDATA[  
 $(document).ready(function() {  
 /* This is basic settings */  
 $("a.fancy").fancybox();  
 });  
 //]]>  
 </script>

3.Now for adding the elements ,for example you have to add image into Fancybox ,Firstly add the image normally using Insert Image button

Now When you see the code in the edit HTML window it would be something like this

<a href="large3.jpg"><img src="small3.jpg" /></a>

Make it like this

<a class="fancy" href="large3.jpg" rel="gallery1" ><img src="small3.jpg" /></a>

As you can see we added only a class="fancy" and a rel tag for adding gallery files.

4.Now save the Post/Page and see the magic.

Note:Host all the files on free hosting service like DropBox or Blogspot itself!

Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Sites service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

Written by Prayag Verma

Find me on Twitter

Sine said...

I love it, but my question is the following: How can the step of having to go into your html code and add those fancy and rel tags for every single image be automated? If you write a blog post with a gallery frequently, doing so is a lot of work! Plus if you want to display the pictures in a nice neat table, then you have to add a bunch of table commands making the programming even more elaborate. Isn't there a shortcut, somehow?

Second question: I don't see the "next" prompt or ">" on my image, you just have to guess it's there and click, or use the mouse scroller, but some readers might not know that. How can the ">" and "<" images or simple text be shown?

April 21, 2012 at 3:04 AM Delete

Prayag Verma said...

I suggest you go with the default Lightbox thats inbuilt into Blogger. It automatically lightboxes all the images in the post and also creates a gallery for them. The only problem that you might face would be creating Multiple galleries in a post

April 24, 2012 at 10:24 PM Delete

willy said...

I do not know how to do flash file with default lightbox from blogger . I can only make Fancybox post with flash file.

June 13, 2012 at 2:30 PM Delete

Unknown said...

Sir, that nice article.... but something wrong with "iframe", it seem doesnt work, can you help me ?Thanks

July 18, 2013 at 1:27 AM Delete

ManFerQuim3 said...

may i know what do you call a box that appears automatically in a website which looks like this fancy box? do you have any tutorials regarding this? thanks. :)

October 8, 2013 at 12:31 AM Delete

Implementing Fancybox in Blogger

Written by Prayag Verma

Email Newsletter

Find Us On