Sunday, 26 August 2012

FancyBox Lightbox For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

Features :
  • Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
  • Customizable through settings and CSS
  • Groups related items and adds navigation.
  • Support fancy transitions by using easing plugin
  • Adds a nice drop shadow under the zoomed item
  • Also works in all type of HTML documents
Well you all know that i'am a huge Light Box fan and this one is totally amazing so time to show you how to add this :
  • Go To Blogger > Template > Edit HTML
  • Find </head> and post following script just above it :
<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
 </script>
 <script src="http://widcraft.googlecode.com/svn/jquery.fancybox-1.3.4.js" type="text/javascript">
 </script>
<style>
#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('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/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('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/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('http://3.bp.blogspot.com/-GT4BdaGWcyY/UDpnLkS6bgI/AAAAAAAAK7M/bgKxuPP3m6I/s1600/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('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -30px;
 }
 #fancybox-right-ico {
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/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('http://4.bp.blogspot.com/-EahAYxFuSjc/UDpnbmFTaPI/AAAAAAAAK9Q/KsYLa1Qpd8w/s1600/fancybox-x.png');
 }
 #fancybox-bg-ne {
 top: -20px;
 right: -20px;
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -162px;
 }
 #fancybox-bg-e {
 top: 0;
 right: -20px;
 height: 100%;
 background-image: url('http://1.bp.blogspot.com/-qIHfkj3d-Po/UDpncUqgoOI/AAAAAAAAK9Y/gBOPsLQfsTk/s1600/fancybox-y.png');
 background-position: -20px 0px;
 }
 #fancybox-bg-se {
 bottom: -20px;
 right: -20px;
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -182px;
 }
 #fancybox-bg-s {
 bottom: -20px;
 left: 0;
 width: 100%;
 background-image: url('http://4.bp.blogspot.com/-EahAYxFuSjc/UDpnbmFTaPI/AAAAAAAAK9Q/KsYLa1Qpd8w/s1600/fancybox-x.png');
 background-position: 0px -20px;
 }
 #fancybox-bg-sw {
 bottom: -20px;
 left: -20px;
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -142px;
 }
 #fancybox-bg-w {
 top: 0;
 left: -20px;
 height: 100%;
 background-image: url('http://1.bp.blogspot.com/-qIHfkj3d-Po/UDpncUqgoOI/AAAAAAAAK9Y/gBOPsLQfsTk/s1600/fancybox-y.png');
 }
 #fancybox-bg-nw {
 top: -20px;
 left: -20px;
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/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('http://2.bp.blogspot.com/-Fw9EyBGel70/UDpnaE5LDhI/AAAAAAAAK9E/XMNoUZl8jVs/s1600/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('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/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('http://4.bp.blogspot.com/-EahAYxFuSjc/UDpnbmFTaPI/AAAAAAAAK9Q/KsYLa1Qpd8w/s1600/fancybox-x.png') 0px -40px;
 }
 #fancybox-title-float-right {
 padding: 0 0 0 15px;
 background: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png') -55px -90px no-repeat;
 }
 /* IE6 */
 .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-aLUQlvqrDF4/UDpnMmMt6PI/AAAAAAAAK7U/gJxsmojyoGs/s1600/fancy_close.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-zr2csneON3Y/UDpnPPqfCuI/AAAAAAAAK7g/mIv46RHF7tw/s1600/fancy_nav_left.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://2.bp.blogspot.com/-CtSjSZxi2C0/UDpnQZ1YQzI/AAAAAAAAK7s/We4nsXRTxBE/s1600/fancy_nav_right.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://2.bp.blogspot.com/-Fw9EyBGel70/UDpnaE5LDhI/AAAAAAAAK9E/XMNoUZl8jVs/s1600/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
 .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-YTEsKM7mWD4/UDpnYQGrCsI/AAAAAAAAK8w/9JvFfSDWch0/s1600/fancy_title_left.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-DPkXJ84Qk1g/UDpnZL1no0I/AAAAAAAAK84/al4gcBDhjJQ/s1600/fancy_title_main.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://1.bp.blogspot.com/-bOFKlmwTCes/UDpna0CvcGI/AAAAAAAAK9I/f0G7j2Q1G9Q/s1600/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='http://1.bp.blogspot.com/-dyPW4uvvOIY/UDpnOJgPOnI/AAAAAAAAK7c/Br0x3FmdLHE/s1600/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='http://3.bp.blogspot.com/-Kv43QvJ0JHM/UDpnR7K5vuI/AAAAAAAAK78/nzL_IvkFOG0/s1600/fancy_shadow_n.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-Z2EmQ_P2vH8/UDpnTKG6jgI/AAAAAAAAK8A/dKwm9mfUzcw/s1600/fancy_shadow_ne.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://2.bp.blogspot.com/-SYr42X0Uh6E/UDpnRNGdh0I/AAAAAAAAK7w/LKtzzW1KaFA/s1600/fancy_shadow_e.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://1.bp.blogspot.com/-9nx_8VgkEbc/UDpnVr6yHDI/AAAAAAAAK8c/Nl4HvpDZYLc/s1600/fancy_shadow_se.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-21lzFRG0gAI/UDpnUiq2b3I/AAAAAAAAK8Q/OnBSvpMlIV8/s1600/fancy_shadow_s.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://1.bp.blogspot.com/-YHrWfQW5Vlk/UDpnWsUaqaI/AAAAAAAAK8k/S6iEcz12X5A/s1600/fancy_shadow_sw.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-nSarHQjL0Ek/UDpnXllyGCI/AAAAAAAAK8o/aXQ7bE55PjE/s1600/fancy_shadow_w.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-4jVYIoPVQ-M/UDpnTxq7HAI/AAAAAAAAK8I/CAyjuQ8Sow4/s1600/fancy_shadow_nw.png', sizingMethod='scale'); }
</style>
  • Now post below script above </body>
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
                'hideOnOverlayClick': false
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
$("#iframe").fancybox({'width': '70%','height': '100%','autoScale': true,'type':'iframe', });
$("#swf").fancybox({'width': '680','height': '495','autoScale': true,'type':'swf', });
});
 </script> 
Done with all script now time to show how to add this on your content :

Image :
 <a id="single_image" href="Image URL"><img src="Image URL" alt="Some Text"/></a>

 Image Group :
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>

 Inline Content :
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

iFrame  :
<a href="http://google.com/" title="Google" id="iframe">some link text</a>

Flash :
<a href="SWF File Source/" title="Flash" id="swf">Flash</a>

In Second script which you posted above </body> you can change your iframe width and height and create more actions of iframes/groups and all content.

Now it was bit difficult but if you need any help then please comment and if this lightbox doesn't work then try to posting all script in your post instead of template. 
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.