Implementing SexyLightbox in Blogger

SexyLightBox is a clone of classic Lightbox , but it’s more sexier and lightweight than the classic LightBox. It was built for web designers , so it is really easy to install and use.

SexyLightBox supports all sorts of images of different sizes, HTML elements and Now Area maps . The images larger than the browser, are adjusted automatically to see them completely. I really like the bouncy effect when the box comes out and resizes.

SexyLightBox Compatible with Mootools 1.2.2 or jQuery 1.3.2 and All modern browsers like Internet Explorer.This tutorials explains about the jQuery version.

Note: This tutorial requires that you either have a free Dropbox account or some other file hosting which provides a folder options.




             
Steps to Add it to Blogger:


1.Login to the Blogger account.

2. Now Go to Design > Edit HTML.


3.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.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexylightbox.v2.3.jquery.min.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexylightbox.css" media="all" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
    $(document).ready(function(){

      SexyLightbox.initialize({color:'black', dir: 'http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexyimages/'});

    });

  
</script>

As you see the “dir:” in the above JavaScript snippet points to the address where the Next ,Previous ,etc button images are present

2.Go to the Post/Page you want to add SexyLightbox and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexylightbox.v2.3.jquery.min.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexylightbox.css" media="all" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
    $(document).ready(function(){

      SexyLightbox.initialize({color:'black', dir: 'http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexyimages/'});

    });

  
</script>

As you see the “dir:” in the above JavaScript snippet points to the address where the Next ,Previous ,etc button images are present


4.Now for adding the images into SexyLightbox ,Firstly add the image normally using Insert Imagebutton

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

<a href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


Make it like this 

<a rel=”sexylightbox” href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


As you see we only added a rel=”sexylightbox” 


Similarly if you want to add Galleries then each element of the Gallery should have have this kind of a rel tag:

rel=”sexylightbox[GalleryName]”



Some Example Code:

Single 
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="sexylightbox" title="Puente de la Mujer - Buenos Aires - Argentina">
<img alt="" height="112" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="200" />
</a>


Gallery
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="sexylightbox[group1]" title="PHP y MySQL">
<img alt="" height="112" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="200" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/2.png" rel="sexylightbox[group1]" title="D'oh!"><img alt="" height="112" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="200" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" rel="sexylightbox[group1]" title="Clap clap!"><img alt="" height="112" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="200" /></a>

Animated GIFS
<a href="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/images/yo.gif" rel="sexylightbox">
<img alt="" src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/images/yo.jpg" />
</a>

IFrame
<a href="http://www.google.com/?TB_iframe=true&amp;height=450&amp;width=800" rel="sexylightbox">Gooooogle</a>&nbsp;{height-450,width-800}

AJAX
<a href="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/demo-shake.html?height=140&amp;width=480" rel="sexylightbox" title="Contenido cargado via AJAX.">Get data</a>&nbsp; &nbsp;&lt;Dont Click this ,If U will click then I suggest Please use your&nbsp;Browsers REFRESH BUTTON to return to normal&gt;

Youtube Video
<div id="videito2" style="display:none;">
<object width="530" height="260"><param name="movie" value="http://www.youtube.com/v/WyA1dzfKywg&hl=es&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/WyA1dzfKywg&hl=es&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="530" height="260"></embed></object></div>
<a href="#TB_inline?height=260&width=530&background=#000&inlineId=videito2" rel="sexylightbox">Play Video Rambo Extreme Masacre</a>


Divs
<div id="myOnPageContent">

<p>

The <b>Audi R8</b> is a mid-engined sports car introduced by the German automaker Audi in 2006. The R8 is based on the "Audi Space Frame", largely derived from the Lamborghini Gallardo. It is built in a newly renovated factory by Audi AG's wholly owned high performance private subsidiary company, quattro GmbH.</p>

</div>
<a href="#TB_inline?height=125&width=500&inlineId=myOnPageContent" rel="sexylightbox[22]" title="<em>From <a href='http://en.wikipedia.org/wiki/Audi_R8' rel='nofollow'>Wikipedia</a>, the free encyclopedia.</em>">Show HTML</a>

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

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


             

Implementing Nivozoom in Blogger

Nivo Zoom is a Lightbox-like but simpler image zooming jQuery plugin from the developers of the popular Nivo Slider.

The plugin is lightweight (4kb compressed), focused only on images and comes with a bunch of settings.It supports 5 different zoom types and can show image captions (long texts are handled well).Nivo Zoom, by default, doesn’t use overlays but can display the bigger image with an overlay where the opacity and colors of it can be customized.

             
Steps to Add it to Blogger:


1.Login to the Blogger account.

2. Now Go to Design > Edit HTML.


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

<link href="http://dl.dropbox.com/u/27675057/nivozoom.pack1_.0/nivo-zoom.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/nivozoom.pack1_.0/jquery.nivo.zoom.pack.js" type="text/javascript">
</script>

2.Go to the Post/Page you want to add Nivo Zoom and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.


<link href="http://dl.dropbox.com/u/27675057/nivozoom.pack1_.0/nivo-zoom.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/nivozoom.pack1_.0/jquery.nivo.zoom.pack.js" type="text/javascript">
</script>

4.Now for adding the images into Nivo Zoom ,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 border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


Make it like this 

<a class=”nivoZoom” href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


As you see we only added a class=”nivoZoom”


Now add a javascript snippet after it:

<script type="text/javascript">
$(window).load(function() {
 $('body').nivoZoom();
});
</script>

It has many options which can are customizable  

Here is a customized snippet: 

<script type="text/javascript">
$(window).load(function() {
 $('body').nivoZoom({
  speed:500,
  zoomHoverOpacity:0.8,
  overlay:false,
  overlayColor:'#333',
  overlayOpacity:0.5,
  captionOpacity:0.8
 });
});
</script>
5.Now save the Post/Page and see the magic.

Note: Please 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 Code 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.

             

Implementing Featured Image Zoomer in Blogger

Featured Image Zoomer lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It’s great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.

 Here are the script’s features:

Ability to specify either the original image or a larger version of it as the “magnified” image.
The “magnified” image is only loaded on demand (the first time the user moves his mouse over the thumbnail image), saving on initial page download time.
Supports an optional adjustable power setting. When enabled, the user can adjust the zoom level on demand by using the mouse wheel while over the image.

             
Steps to Add it to Blogger:



1.Login to the Blogger account.

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FeaturedImageZoomer/featuredimagezoomer.js">
</script>

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

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

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

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#Anyname').addimagezoom()

})

</script>

2.Go to the Post/Page you want to add Featured Image Zoomer and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<style type="text/css">

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FeaturedImageZoomer/featuredimagezoomer.js">
</script>

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#image3').addimagezoom()

})

</script>

4.Now for adding the images into Featured Image Zoomer ,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 border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


Make it like this 

<a id=”Anyname” href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


As you see we only added a id tag “Anyname”



Now add a javascript snippet

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#Anyname').addimagezoom()

})

</script>

This is the most basic call ,Featured Image Zoom provides with many Options to customize the Zoom effect .Here are some of the Options: 



Here are some example snippet codes:

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#image1').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })
 
 $('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })

 $('#image3').addimagezoom()

})

</script>


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

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

             

Implementing TinyBox2 in Blogger

TinyBox2 is the successor of the previously published resource TinyBox which is a standalone JavaScript modal windows library.

The library is lightweight (5kb) and supports images, iframes, HTML and Ajax requests natively.

             

Steps to Add it to Blogger:



1.Login to the Blogger account.

2. Now Go to Design > Edit HTML.


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

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/TinyBox2/style.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/TinyBox2/tinybox.js"></script>

2.Go to the Post/Page you want to add TinyBox2 and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/TinyBox2/style.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/TinyBox2/tinybox.js"></script>


4.Now for adding the images into TinyBox2


If images are to be added then this is the code:

<li onclick="TINY.box.show({image:'http://dl.dropbox.com/u/27675057/3%20%282%29.jpg',boxid:'frameless', animate:true,openjs:function(){openJS()}})">Image, Load Callback</li>

If iFrame content is to added:

<li onclick="TINY.box.show({iframe:'http://www.google.com/',boxid:'frameless',width:750,height:450,fixed:false, maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})">iFrame, Blue Mask, Absolute Position, Frameless, Close Callback</li>
5.Now save the Post/Page and see the magic.

Note: Please 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 Code 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.

             

Implementing jCarousel in Blogger

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

             

Steps to Add it to Blogger:

1.Login to the Blogger account.

2.Go to the Post/Page you want to add jCarousel and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jCarousel/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jCarousel/jquery.jcarousel.min.js"></script> 
<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/jCarousel/skin.css" /> 
<script type="text/javascript"> 
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
    jQuery('#mycarousel1').jcarousel({
        vertical: true,
        scroll: 2
    });
});
 
</script> 

4.Now for adding the images into jCaousel ,these are the codes:

<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="s.jpg" width="75" height="75" alt="" /></li>
<li><img src="s.jpg" width="75" height="75" alt="" /></li>
</ul>

The id name should be same as the javascript snippet name. 

If you want to add a vertical jCarousel then make the following changes to the javascript snippet.

<script type="text/javascript"> 
 jQuery(document).ready(function() {
 jQuery('#mycarousel1').jcarousel({
        vertical: true,
        scroll: 2
    });
});
 </script>


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

Note: Please Host all the files on free hosting service like DropBox  or Blogpsot 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 Code 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.

             

Implementing PieceMaker 2 in Blogger

Piecemaker V2 is an open source Flash ActionScript 3 image rotator.It‘s free for nearly any use – including commercial.

Its the perfect way to dynamically display your images, videos and .swf files on any post or page.The Piecemaker is a Flash-based 3D Image Rotator.

             
Steps to Add it to Blogger:


1.Login to the Blogger account.

2.Go to the Post/Page you want to add Piecemaker 2 and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<script src="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/scripts/swfobject/swfobject.js" type="text/javascript">
</script>
<div id="flashcontent">
You need to <a href="http://www.adobe.com/products/flashplayer/" target="_blank">Upgrade your Flash Player</a> to version 10 or newer.</div>


<script type="text/javascript">
  var flashvars = {};
  flashvars.xmlSource = "http://dl.dropbox.com/u/27675057/piecemaker.xml";
  flashvars.cssSource = "http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/piecemaker.css";
  flashvars.imageSource = "";
  var attributes = {};
  attributes.wmode = "transparent";
var params = {};  
     params.allowscriptaccess = "always";  
     params.allownetworking = "all";
  swfobject.embedSWF("http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/piecemaker.swf", "flashcontent", "960", "610", "10", "http://dl.dropbox.com/u/27675057/Piecemaker/expressInstall.swf", flashvars, attributes, params, null);
</script>

4.Now for adding anything into Piecemaker 2 you have to edit the XML file included at the top ,which contains code of this kind



<Piecemaker>
<Contents>
<Image Source="http://dl.dropbox.com/u/27675057/pic/15.jpg" Title="Sky"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/21.jpg" Title="Cloud">
</Image>
<Image Source="http://dl.dropbox.com/u/27675057/pic/22.jpg" Title="Clouds"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/22_2.jpg" Title="Green"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/24.jpg" Title="Landscape"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/62.jpg" Title="Water"/>
<Video Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video.mp4" Title="Video Example" Width="910" Height="365" Autoplay="true">
<Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video-preview.jpg" />
</Video>
<Flash Source="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/contents/flash.swf" Title="Loaded SWF File">
      <Image Source="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/contents/flash-preview.png" />
    </Flash>
</Contents>
<Settings ImageWidth="900" ImageHeight="360" LoaderColor="0x333333" InnerSideColor="0x222222" SideShadowAlpha="0.8" DropShadowAlpha="0.7" DropShadowDistance="25" DropShadowScale="0.95" DropShadowBlurX="40" DropShadowBlurY="4" MenuDistanceX="20" MenuDistanceY="50" MenuColor1="0x999999" MenuColor2="0x333333" MenuColor3="0xFFFFFF" ControlSize="100" ControlDistance="20" ControlColor1="0x222222" ControlColor2="0xFFFFFF" ControlAlpha="0.8" ControlAlphaOver="0.95" ControlsX="450" ControlsY="280 " ControlsAlign="center" TooltipHeight="30" TooltipColor="0x222222" TooltipTextY="5" TooltipTextStyle="P-Italic" TooltipTextColor="0xFFFFFF" TooltipMarginLeft="5" TooltipMarginRight="7" TooltipTextSharpness="50" TooltipTextThickness="-100" InfoWidth="400" InfoBackground="0xFFFFFF" InfoBackgroundAlpha="0.95" InfoMargin="15" InfoSharpness="0" InfoThickness="0" Autoplay="10" FieldOfView="45"/>
<Transitions>
<Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300" CubeDistance="30"/>
<Transition Pieces="15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>
<Transition Pieces="5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500" CubeDistance="50"/>
<Transition Pieces="9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900" CubeDistance="5"/>
<Transition Pieces="20" Time="1.1" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>
<Transition Pieces="12" Time="2" Transition="easeInOutCubic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>
</Transitions>
</Piecemaker>

All these codes are of self explanatory nature and really easily to understand  

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

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

             

Implementing mediabox Advanced in Blogger

mediaboxAdvanced is a modal overlay that can handle images, videos, animations, social video sites, twitter media links, inline elements, and external pages with ease.It provides four different styles.

Features:

Supports YouTube and Vimeo videos.
Support for Twitter links.
Videos displayed in the overlay can be played by Apple iOS devices, including the iPhone, iPod Touch, and iPad, along with other mobile devices that support HTML5.

             


Steps to Add it to Blogger:





1.Login to the Blogger account.


2. Now Go to Design > Edit HTML.


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

<link href="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mediaboxAdv-Minimal.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mootools-core-1.3.2.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mootools-more-1.3.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mediaboxAdv.js" type="text/javascript">
</script>

2.Go to the Post/Page you want to add mediabox Advanced and go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<link href="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mediaboxAdv-Minimal.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mootools-core-1.3.2.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mootools-more-1.3.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mediaboxAdv.js" type="text/javascript">
</script>



4.Now for adding the images into mediabox Advanced ,Firstly add the image normally using Insert Image button

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

<a href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>



Make it like this 




<a href=” ” class=”lightbox” ><img src=” ” /></a>


As you can see we added only a class=”lightbox”.
To Add Gallery ,this is the code 
<a  class=”lightwindow” href=”2.jpg” rel=”lightbox[GalleryName]” >image #2</a> 
<a  class=”lightwindow” href=”2.jpg” rel=”lightbox[GalleryName]” >image #2</a> 
Just add a rel tag of the type “lightbox[GalleryName]”.

Some Example Code:

Single
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="lightbox" title="Concrete::taken in eastern Michigan "><img alt="Concrete" height="100" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="100" /></a>

Gallery
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="lightbox[set1]" title="Concrete::taken in eastern Michigan "><img alt="Concrete" height="100" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="100" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" rel="lightbox[set1]" title="Autumn 1"><img "width="100" alt="Nature1" height="100" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/2.png" rel="lightbox[set1]" title="Autumn 2"><img "width="100" alt="Nature2" height="100" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" /></a>



Twitter media

<p>
<a href="http://twitcam.com/118d" rel="lightbox[twitter]" title="Twitcam">Twitcam »</a></p>


<p>
<a href="http://tweetmic.com/p/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic long url">TweetMic»</a></p>


<p>
<a href="http://tmic.fm/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic short url">Tmic.FM »</a></p>


<p>
<a href="http://twitpic.com/8fc41" rel="lightbox[twitter]" title="TwitPic">TwitPic »</a></p>



<p>
<a href="http://www.twitvid.com/5N35X" rel="lightbox[twitter]" title="TwitVid::Red Knapp's Dairy Bar">TwitVid »</a></p>



<p>
<a href="http://yfrog.com/4et9zpj" rel="lightbox[twitter]" title="Yfrog image::Photo by &lt;a href=&quot;http://twitter.com/iaian7&quot; title=&quot;John Einselen&quot; target=&quot;_blank&quot;&gt;John Einselen&lt;/a&gt;">Yfrog image »</a></p>



<p>
<a href="http://yfrog.us/0ia9mcz" rel="lightbox[twitter]" title="Yfrog video">Yfrog video »</a></p>



Social video

<p>
Width and height settings are not required for social video links, but can be still be defined if you want to override the defaults.  This can be especially useful when videos don&#8217;t fit the typical aspect ratio of a given site, or if you want to fit the scale to a specific site layout.</p>

<p>
<a href="http://www.facebook.com/video/video.php?v=543650258685" rel="lightbox[social 756 424]" title="facebook.com">Facebook »</a></p>


<p>
<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video" rel="lightbox[social 400 300]" title="flickr.com">Flickr video »</a></p>


<p>
<a href="http://www.gametrailers.com/player/49936.html" rel="lightbox[social]" title="gametrailers.com/player/">GameTrailers.com player »</a></p>

<p>
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[social]" title="Blue Monster::3D animation - John Einselen">Youtube</a></p>

<p>
<a href="http://www.gametrailers.com/video/e3-09-assassins-creed/50139" rel="lightbox[social]" title="gametrailers.com/video/">GameTrailers.com video »</a></p>


<p>
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social 640 290]" title="video.google.com">Google video »</a></p>


<p>
<a href="http://megavideo.com/?v=WD28NSRM" rel="lightbox[social]" title="megavideo.com">Megavideo »</a></p>


<p>
<a href="http://www.metacafe.com/watch/2185365/spot_electrabel_gdf_suez_happy_new_year_2009/" rel="lightbox[social 400 350]" title="www.metacafe.com">MetaCafe »</a></p>


<p>
<a href="http://quietube.com/v.php/http://www.youtube.com/watch?v=b5Ff2X_3P_4" rel="lightbox[social 480 392]" title="youtube via quietube.com">Quietube   Youtube »</a></p>



<p>
<a href="http://quietube.com/v.php/http://vimeo.com/2295261" rel="lightbox[social 480 392]" title="vimeo via quietube.com">Quietube   Vimeo »</a></p>


<p>
<a href="http://www.revver.com/video/758469/see-whats-possible-challenge/" rel="lightbox[social 480 392]" title="www.revver.com">Revver »</a></p>


<p>
<a href="http://rutube.ru/tracks/732179.html?v=31d844c852720c85a74d55474dd3f65a" rel="lightbox[social]" title="www.RuTube.ru">RuTube »</a></p>


<p>
<a href="http://www.tudou.com/programs/view/KG2UG_U4DMY/" rel="lightbox[social 400 340]" title="www.tudou.com">Tudou »</a></p>


<p>
<a href="http://v.youku.com/v_show/id_XNDI1MDkyMDQ" rel="lightbox[social 480 400]" title="www.youku.com">YouKu »</a></p>


<p>
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[social]" title="www.youtube.com">YouTube »</a></p>


<p>
<a href="http://www.youtube.com/view_play_list?p=63F0C78739B09958" rel="lightbox[social]" title="www.youtube.com playlist::hover over the window to see everything in the play queue">YouTube Playlist »</a></p>


<p>
<a href="http://www.veoh.com/watch/v20943320Dz9Z45Qj" rel="lightbox[social 410 341]" title="www.veoh.com">Veoh »</a></p>


<p>
<a href="http://vimeo.com/877053" rel="lightbox[social]" title="vimeo.com">Vimeo »</a></p>


Social video embed

<p>
Because some social video sites do not use the media ID in the page <span class="caps">URL</span>, you have to use the link given in the <em>embed</em> code.  Be forewarned that this is both more difficult (you must dig through the embed code to find the link) and does not deprecate nicely (without javascript, the links will point to the site&#8217;s media player, not the video&#8217;s page).</p>

<p>
<a href="http://blip.tv/play/Ae2bN420ZA" rel="lightbox[social 640 390]" title="blip.tv::John Einselen - 2008 demo reel preview">Blip.tv »</a></p>


<p>
<a href="http://www.break.com/usercontent/2009/4/The-Wonderful-World-of-Reals-703500.html" rel="lightbox[social]" title="break.com">Break.com »</a></p>


<p>
<a href="http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="lightbox[social 640 486]" title="www.dailymotion.com">DailyMotion »</a></p>


<p>
<a href="http://mediaservices.myspace.com/services/media/embed.aspx/m=100005440,t=1,mt=video" rel="lightbox[social set3 430 346]" title="vids.myspace.com">vids.MySpace »</a> (some known issues with embedding limitations)</p>


<p>
<a href="http://www.ustream.tv/flash/live/534892" rel="lightbox[social 400 326]" title="Ustream.tv">Ustream.tv »</a> (some known issues with the server refusing links)</p>


<p>
<a href="http://www.viddler.com/player/d4cf1bc/" rel="lightbox[social 545 451]" title="www.viddler.com">Viddler »</a></p>


Flash media

<p>
<span class="caps">SWF</span> files will be embedded directly using the flash plugin.</p>

<p>
<a href="http://www.homestarrunner.com/sbemailtwohundred.swf" rel="lightbox[flash 550 410]" title="SWF animation::Homestarrunner.com flash animation"><span class="caps">SWF</span> animation »</a></p>


<p>
<span class="caps">FLV</span>, MP4, and MP3 files can be played using either <a href="http://nonverbla.de/blog/2008/09/15/nonverblasterhover/">NonverBlaster:Hover</a> or the <a href="http://www.jeroenwijering.com/?item=JW_FLV_Media_Player">JW Media Player</a>.  Given the install base for Flash, this is typically the most reliable way of playing media files.</p>

<p>
<a href="http://iaian7.com/media/mediabox/2007vfx.flv" rel="lightbox[flash 640 360]" title="FLV video::John Einselen - 2007 demo reel"><span class="caps">FLV</span> video »</a></p>


<p>
<a href="http://iaian7.com/media/mediabox/2005vfx.mp4" rel="lightbox[flash 640 360]" title="MP4 video::John Einselen - 2005 demo reel">MP4 video »</a></p>


<p>
<a href="http://iaian7.com/media/mediabox/TheISS2.mp3" rel="lightbox" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a></p>


<a href="#mb_inline" rel="lightbox[inline 360 180]" title="">inline content »</a>
<div id="mb_inline" style="display: none;">
<span style="color: #999999; text-align: center;">This is an example of content that was hidden on the page, and opened in Mediabox using an anchor link.


<a href="" onclick="Mediabox.close();return false;">close onClick »</a></span></div>


<a href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=detroit, mi&amp;aq=&amp;sll=42.653,-83.14063&amp;sspn=0.026765,0.024848&amp;ie=UTF8&amp;hq=&amp;hnear=Detroit, Wayne, Michigan&amp;z=10&amp;ll=42.331427,-83.045754&amp;output=embed" rel="lightbox[external 640 360]" title="Google.com">Google map »</a>

<a href="http://movies.yahoo.com" rel="lightbox[external 640 50%]" title="movies.Yahoo.com">movies.Yahoo.com »</a>

<a href="http://vectorform.com/" rel="lightbox[external 80% 660]" title="Vectorform.com">Vectorform.com »</a>


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

Note: Please 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 Code 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.
             

Implementing Colorbox in Blogger

Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.3 through 1.6

Why you should be using ColorBox:

Supports photos, grouping, slideshow, ajax, inline, and iframed content.
Lightweight: 10KB of JavaScript.
Appearance is controlled through CSS so users can restyle the box.
Behavior settings can be over-written without altering the ColorBox javascript file.
Can be extended with callbacks & event-hooks without altering the source files.
Completely unobtrusive, options are set in the JS and require no changes to existing HTML.



Note: All the files required in this tutorial are hosted on colorpowered.com ,so if their servers go down then this tutorials Demo will also not Work

             
Steps to Add it to Blogger:



1.Login to the Blogger account.


2. Now Go to Design > Edit HTML.


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

<link media="screen" rel="stylesheet" href="http://colorpowered.com/colorbox/core/example2/colorbox.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script src="http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js"></script> 
<script> 
  $(document).ready(function(){
   //Examples of how to assign the ColorBox event to elements
   $("a[rel='WhatEverNameUlike']").colorbox();
   
  });
 </script> 

2.Go to the Post/Page you want to add ColorBox and go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<link media="screen" rel="stylesheet" href="http://colorpowered.com/colorbox/core/example2/colorbox.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script src="http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js"></script> 
<script> 
  $(document).ready(function(){
   //Examples of how to assign the ColorBox event to elements
   $("a[rel='WhatEverNameUlike']").colorbox();
   
  });
 </script>

4.Now for adding the images into Colorbox ,Firstly add the image normally using Insert Image button

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

<a href=” large3.jpg”=””><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>

Make it like this

<a href=” ” rel=”WhatEverNameUlike” ><img src=” ” /></a>

As you can see we added only a rel=”WhatEverNameUlike” tag .Make sure that the rel tag and the javascript snippet above in which the rel tag name is being called should be the same.
There are some options available to alter transitions,innerheight,etc these are: 

Key Default Description
transition “elastic” The transition type. Can be set to “elastic”, “fade”, or “none”.
speed 350 Sets the speed of the fade and elastic transitions, in milliseconds.
href false This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. Example:
$(‘h1’).colorbox({href:”welcome.html”})
title false This can be used as an anchor title alternative for ColorBox.
rel false This can be used as an anchor rel alternative for ColorBox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Example:
$(‘#example a’).colorbox({rel:’group1′})
Note: The value can also be set to ‘nofollow’ to disable grouping.
width false Set a fixed total width. This includes borders and buttons. Example: “100%”, “500px”, or 500
height false Set a fixed total height. This includes borders and buttons. Example: “100%”, “500px”, or 500
innerWidth false This is an alternative to ‘width’ used to set a fixed inner width. This excludes borders and buttons. Example: “50%”, “500px”, or 500
innerHeight false This is an alternative to ‘height’ used to set a fixed inner height. This excludes borders and buttons. Example: “50%”, “500px”, or 500
initialWidth 300 Set the initial width, prior to any content being loaded.
initialHeight 100 Set the initial height, prior to any content being loaded.
maxWidth false Set a maximum width for loaded content. Example: “100%”, 500, “500px”
maxHeight false Set a maximum height for loaded content. Example: “100%”, 500, “500px”
scalePhotos true If ‘true’ and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, ColorBox will scale photos to fit within the those values.
scrolling true If ‘false’ ColorBox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of ColorBox.
iframe false If ‘true’ specifies that content should be displayed in an iFrame.
inline false If ‘true’ a jQuery selector can be used to display content from the current page. Example:
$(“#inline”).colorbox({inline:true, href:”#myForm”});
html false This allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example:
$.colorbox({html:'<p>Hello</p>’});
photo false If true, this setting forces ColorBox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like ‘photo.php’ instead of ‘photo.jpg’, ‘photo.jpg#1’, or ‘photo.jpg?pic=1’)
opacity 0.85 The overlay opacity level. Range: 0 to 1.
open false If true, the lightbox will automatically open with no input from the visitor.
returnFocus true If true, focus will be returned when ColorBox exits to the element it was launched from.
fastIframe true If false the loading graphic removal and onComplete event will be delayed until iframe contents have completely loaded.
preloading true Allows for preloading of ‘Next’ and ‘Previous’ content in a shared relation group (same values for the ‘rel’ attribute), after the current content has finished loading. Set to ‘false’ to disable.
overlayClose true If false, disables closing ColorBox by clicking on the background overlay.
escKey true If false, will disable closing colorbox on esc key press.
arrowKey true If false, will disable the left and right arrow keys from navigating between the items in a group.
loop true If false, will disable the ability to loop back to the beginning of the group when on the last element.
slideshow false If true, adds an automatic slideshow to a content group / gallery.
slideshowSpeed 2500 Sets the speed of the slideshow, in milliseconds.
slideshowAuto true If true, the slideshow will automatically start to play.
slideshowStart “start slideshow” Text for the slideshow start button.
slideshowStop “stop slideshow” Text for the slideshow stop button

Here is a example of modified snippet:

<script> 

$(document).ready(function(){

                $(“a[rel=’example4′]”).colorbox({slideshow:true});
                
                });
</script> 

Some Example Code:

<script> 
  $(document).ready(function(){
   //Examples of how to assign the ColorBox event to elements
   $("a[rel='example1']").colorbox();
   $("a[rel='example2']").colorbox({transition:"fade"});
   $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
   $("a[rel='example4']").colorbox({slideshow:true});
   $(".example5").colorbox();
   $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
   $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
   $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
   $(".example9").colorbox({
    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
   });
   
   //Example of preserving a JavaScript event for inline calls.
   $("#click").click(function(){ 
    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
    return false;
   });
  });
 </script> 

<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>
Fade Transition</h2>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>
No Transition   fixed width and height (75% of screen size)</h2>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee1.jpg" rel="example3"  title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee2.jpg" rel="example3"  title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee3.jpg" rel="example3"  title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>
Slideshow</h2>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee1.jpg" rel="example4"  title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee2.jpg" rel="example4"  title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee3.jpg" rel="example4"  title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>
Other Content Types</h2>
<p>
<a class='example5' href="http://colorpowered.com/colorbox/core/content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p>
<a class='example5' href="http://colorpowered.com/colorbox/core/content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
<p>
<a class='example6' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p>
<a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
<p>
<a class='example8' href="#">Inline HTML</a></p>

<h2>
Demonstration of using callbacks</h2>
<p>
<a class='example9' href="http://colorpowered.com/colorbox/core/content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
5.Now save the Post/Page and see the magic.

Note: Please 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 Code 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.

             

Implementing CeeBox in Blogger

This is a modal window system built as a jQuery plugin.It can present images, galleries, HTML, inline content, Flash files and remote videos (Facebook, Vimeo, YouTube, Daily Motion, CNN, Metacafe, etc.).

Here are some key features of “CeeBox”:

iPhone users are automatically redirected to link, (youtube movies launch the youtube app)
CeeBox currently supports Google Video, YouTube, Metacafe, Vimeo, Dailymotion, Spike, iFilm, CNN, Facebook videos and swf files.
With a bit of regex knowhow you can add support yourself for other sites

             
Steps to Add it to Blogger:


1.Login to the Blogger account.


2. Now Go to Design > Edit HTML.


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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/js/jquery.swfobject.js" type="text/javascript"></script> 
<script src="http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/js/jquery.ceebox-min.js" type="text/javascript"></script> 
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/css/ceebox-min.css);
</style>

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

<script type='text/javascript' > 
    jQuery(document).ready(function(){
  debugging = true;
 
  //$().ceebox(); //used to test to make sure the init call works.
  //$(".ceebox").ceebox({boxColor:'#fff',borderColor:'#525252',textColor:'#333',videoJSON:"js/humor.json"});
  $(".ceebox").ceebox({borderColor:'#dcdcdc',boxColor:"#fff"});

 });
    </script>

2.Go to the Post/Page you want to add CeeBox and go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/js/jquery.swfobject.js" type="text/javascript"></script> 
<script src="http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/js/jquery.ceebox-min.js" type="text/javascript"></script> 
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/css/ceebox-min.css);
</style>
<script type='text/javascript' > 
    jQuery(document).ready(function(){
  debugging = true;
 
  //$().ceebox(); //used to test to make sure the init call works.
  //$(".ceebox").ceebox({boxColor:'#fff',borderColor:'#525252',textColor:'#333',videoJSON:"js/humor.json"});
  $(".ceebox").ceebox({borderColor:'#dcdcdc',boxColor:"#fff"});

 });
    </script>

4.Now for adding the images into CeeBox ,Firstly add the image normally using Insert Image button

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

<a href=” large3.jpg”=””><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>

Make it like this

<a href=” ” class=”ceebox” ><img src=” ” /></a>

As you can see we added only a class=”ceebox”.
To Add Gallery ,this is the code 

<a href=” ” class=”ceebox nameofgallery” ><img src=” ” /></a>
<a href=” ” class=”ceebox nameofgallery” ><img src=” ” /></a>

Some Example Code

Single 
<a class="ceebox" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a>


Gallery
<ul class="ceebox i">
<li><a href="http://catcubed.com/images/kurtvon.jpg" title="drawing of Kurt Vonnegut">Kurt</a></li>
<li><a href="http://catcubed.com/images/zombie_puppetmaster.jpg" title="Zombie Sock Puppet" class="{boxColor:'#130',textColor:'#dfd'}">Zombie Puppet</a> color of background at text set via metadata</li>
<li><a href="http://catcubed.com/images/balsa-man.jpg" title="Balsa Man 2008 as the sunsets. Oh boy isn't it pretty! Didn't get as nice of a picture this time.">Balsa Man</a></li>
<li><a href="http://farm3.static.flickr.com/2642/3894718411_88fe1d2968.jpg" title="16th Indian Tacos (photo by sninky-chan)">16th Indian Tacos</a></li>
<li><a href="http://tr-tr.facebook.com/profile/pic.php?oid=AAAAAQAQ_W8eL0hDl1i9pyC5HlMBWwAAAA_UlK1k0GmRW2Jc1JOQvcPL&size=normal" rel="image">photo</a> photo link does not contain jpg but we are forcing CeeBox to recognize it as an image with rel="image"</li>
</ul>


Videos,Images,Iframes
<ul class="ceebox mixed {videoWidth:200}">
<li><a href="http://www.youtube.com/watch?v=G_5htGZkp9g" title="Balsa Man 2009 Video" >YouTube: balsa man vid</a></li>
<li><a href="http://www.youtube.com/watch?v=__GhJl_UQg0" title="Machine with oil" class="{videoGallery:false}">Machine with Oil</a> set to not be in gallery</li>
<li><a href="http://www.vimeo.com/5606758" title="Awesome Aquarium">link to vimeo video</a></li>
<li><a href="http://www.facebook.com/video/video.php?v=238358730483" class="{videoWidth:400,boxColor:'#bbf',borderColor:'#db0 #aa0',borderWidth:'12px'}" title="Lame Facebook Video">link to facebook video</a>  (videoWidth set to 400, boxColor set to a light blue, and borderColor set to orange via metadata)</li>
<li><a href="http://farm3.static.flickr.com/2642/3894718411_88fe1d2968.jpg" title="16th Indian Tacos (photo by sninky-chan)">16th Indian Tacos</a></li>
<li><a href="http://www.catcubed.com" title="Catcubed: My blog">Catcubed</a></li>
<li><a href="http://www.spike.com/video/crazy-heart/3292468" title="Crazy heart" rel="width:600" class="{video:false,html:false}">Spike.com: Crazy Heart Trailer</a> Set to not display via metadata</li>
<li><a href="http://www.ifilm.com/video/2861849">iFilm: Swear Jar</a> Note: this is an old link. iFilm forwards to spike.com but CeeBox still works </li>
<li><a href="http://us.cnn.com/video/?/video/world/2009/11/18/amanpour.rwanda.cnn" >CNN: Rwanda Then and Now</a></li>
<li><a href="http://www.metacafe.com/watch/3740158/the_wolfman_movie_trailer/" >Metacafe: The Wolfman Movie Trailer</a></li>
<li><a href="http://www.colbertnation.com/the-colbert-report-videos/256451/november-19-2009/ak-47-designer-celebrates-his-birthday---john-pike" rel="ratio:1.3333">Colbert: AK-47 designers birthday</a> Colbert supported via the humor.json</li>
<li><a href="http://www.thedailyshow.com/watch/tue-november-17-2009/submission-accomplished" rel="videoId:256344 ratio:4:3">Daily Show: Submission Accomplished</a> NOTE: ceebox does not support Daily Show videos natively. It requires the humor.json file to be loaded and a videoId to be on the rel</li>
<li><a href="http://www.uctv.tv/search-details.aspx?showID=16803">uctv</a></li>
</ul>
Daily Motion Video
<a class="ceebox" title="BMW M3 auf dem Nürburgring" rel="600 400" href="http://www.dailymotion.com/video/x3j545_bmw-m3-auf-dem-nurburgring_auto"> 
<img class="video-thumb" alt="BMW M3 auf dem Nürburgring" src="http://ak2.static.dailymotion.com/static/video/149/139/5931941:jpeg_preview_medium.jpg?20090120063245"/> 
</a>
5.Now save the Post/Page and see the magic.

Note: Please 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 Code 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.
             

Implementing Lightbox 2 in Blogger

Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

WHAT’S NEW IN VERSION 2:

Image Sets: group related images and navigate through them with ease
Visual Effects: fancy pants transitions
Backwards Compatibility: yes!

             

Steps to Add it to Blogger:


1.Login to the Blogger account.


2. Now Go to Design > Edit HTML.


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

<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/prototype.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/scriptaculous.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/effects.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/builder.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/lightbox.js" type="text/javascript">
</script>
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/Lightbox%202/lightbox.css);
</style>

2.Go to the Post/Page you want to add Lightbox 2 and go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/prototype.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/scriptaculous.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/effects.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/builder.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Lightbox%202/lightbox.js" type="text/javascript">
</script>
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/Lightbox%202/lightbox.css);
</style>



4.Now for adding the images into Lightbox 2 ,Firstly add the image normally using Insert Image button

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

<a href=” large3.jpg”=””><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>

Make it like this

<a href=” ” rel=”lightbox” ><img src=” ” /></a>

As you can see we added only a rel=”lightbox”.
To Add Gallery ,this is the code

<a href=” ” rel=”lightbox[Galleryname]” ><img src=” ” /></a>

<a href=” ” rel=”lightbox[Galleryname]” ><img src=” ” /></a>


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

Note: Please 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 Code 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.