Implementing Videobox in Blogger

Videobox is a 6kb script, which shows your videos in the page with an overlay. It was inspired from Lightbox.v2 and uses some of the Slimbox’s code. It’s written for the wonderful mootools library. And used swfobject to embed flash.

             

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/video/js/mootools.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/video/js/swfobject.js" type="text/javascript">
</script>

<script src="http://dl.dropbox.com/u/27675057/video/js/videobox.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/video/css/videobox.css" media="screen" rel="stylesheet" type="text/css"></link> 

Change the address of the player.swf in the videobox.js for the correct working of the script

2.Go to the Post/Page you want to add VideoBox 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/video/js/mootools.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/video/js/swfobject.js" type="text/javascript">
</script>

<script src="http://dl.dropbox.com/u/27675057/video/js/videobox.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/video/css/videobox.css" media="screen" rel="stylesheet" type="text/css"></link>

Change the address of the player.swf in the videobox.js for the correct working of the script

4.Now for adding the videos into Videobox ,Firstly add the video normally like you add a Image




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

<a href=”http://www.youtube.com/watch?v=uhi5x7V3WXE” title=”Youtube Video”>Youtube</a>

Now just add a rel=”vidbox” into the above code like this

<a href=”http://www.youtube.com/watch?v=uhi5x7V3WXE” rel=”vidbox” title=”Youtube Video”>Youtube</a>


VideoBox supports all the services which use flash embedding like Youtube,MetaCafe,Spike,Google Videos,Vimeo,DailyMotion,etc and also native SWF

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 Squeezebox in Blogger

SqueezeBox is an unobtrusive LightBox inspired overlay, for modal boxed content on your blog. It’s a snap to show images but just as easy to use HTML elements, Ajax requests, iFrames, SWF movies and more.

             





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/SqueezeBox/assets/SqueezeBox.css" rel="stylesheet" type="text/css"></link> 
<script src="http://dl.dropbox.com/u/27675057/SqueezeBox/mootools-1.2-core-nc.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/SqueezeBox/SqueezeBox.js" type="text/javascript">
</script>  


2.Go to the Post/Page you want to add SqueezeBox 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/SqueezeBox/assets/SqueezeBox.css" rel="stylesheet" type="text/css"></link> 
<script src="http://dl.dropbox.com/u/27675057/SqueezeBox/mootools-1.2-core-nc.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/SqueezeBox/SqueezeBox.js" type="text/javascript">
</script> 


4.Now for adding the images into Squeezebox ,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 rel=”boxed” href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


As you see we only added rel=”boxed” (this is changable)

Now add a javascript snippet to link this to squeezebox 

<script type="text/javascript">
 
  /* <![CDATA[ */
window.addEvent('domready', function() {
SqueezeBox.assign($$('a[rel=boxed]'));

});
  /* ]]> */
 
</script> 

Here are some Example Code:

Single Image

<a href="http://farm3.static.flickr.com/2215/1675314906_e98e323f23.jpg" rel="boxed"><img alt="El Terreno Park" src="http://farm3.static.flickr.com/2215/1675314906_e98e323f23_t.jpg" />&nbsp;<span class="Apple-style-span" style="-webkit-text-decorations-in-effect: none; color: black;"><img alt="Another river in autumn" src="http://farm3.static.flickr.com/2370/1623259465_2cc4144b4d_t.jpg" />&nbsp;</span></a>&nbsp;<a href="http://farm3.static.flickr.com/2203/1672130582_5cee3503ec.jpg" rel="boxed"><img alt="Night in Palma de Mallorca" src="http://farm3.static.flickr.com/2203/1672130582_5cee3503ec_t.jpg" /></a>&nbsp;&nbsp;<a href="http://farm3.static.flickr.com/2268/1624148602_c69850e3fc.jpg" rel="boxed"><img alt="Sunny autumn river" src="http://farm3.static.flickr.com/2268/1624148602_c69850e3fc_t.jpg" /></a>





Ajax
<a href="http://digitarald.de/project/squeezebox/1-1/showcase/ajax/what-is.html" rel="boxed">What is it?</a> |
<a href="http://digitarald.de/project/squeezebox/1-1/showcase/ajax/extended.html" rel="boxed">Box with JavaScript</a> 



Inline
<a href="#demo-target-clone" rel="boxed1">Clone me my content in a box!</a> |
<div id="demo-target-clone">
 <h5>
I am the clone!</h5>
<p>
  You can easily add elements to your XHTML and show them with a single click.
The href points to the id, like usual. You can set the size and other options
via link-attribute or during assigning the SqueezeBox.
</p>
</div>




iFrame
<a href="http://mootools.net" class="boxed3" rel="{handler:'iframe',size:{x:840,y:550}}"> 
MooTools.net in a box!
</a>
<a href="http://groups.google.com/group/mootools-users" class="boxed3" rel="{handler:'iframe',size:{x:500,y:500},iframePreload:true}" title="IFrame is preloaded"> 
MooTools Users Group
</a> 

<script type="text/javascript">
 
  /* <![CDATA[ */
window.addEvent('domready', function() {
SqueezeBox.assign($$('a[rel=boxed]'));

SqueezeBox.assign($$('a[rel=boxed1][href^=#]'), {

  size: {x: 200, y: 200}

 });
SqueezeBox.assign($$('a.boxed3'), {

  parse: 'rel'

 });


});
  /* ]]> */
 
</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 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 ImageZoom in Blogger

ImageZoom is based on Mootools, and is perfect for photo galleries.
It can display large images on top of a page, and has the ability to group multiple photos in one set.

There are numerous advantages to use ImageZoom  :

Images can be dragged around.
Multiple images can be open at the same time.
Visitors can still access the underlying content of the page.
It’s easier for visitors to find the navigation buttons.

             
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/ImageZoom/mootools-1-2-1.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/mootools-1-2-more.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/main.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/imagezoom.js" type="text/javascript">
</script> 
<link href="http://dl.dropbox.com/u/27675057/ImageZoom/imagezoom.css" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/demos.js" type="text/javascript">
</script>

2.Go to the Post/Page you want to add the ImageZoom 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/ImageZoom/mootools-1-2-1.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/mootools-1-2-more.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/main.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/imagezoom.js" type="text/javascript">
</script> 
<link href="http://dl.dropbox.com/u/27675057/ImageZoom/imagezoom.css" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/demos.js" type="text/javascript">
</script> 

4.Now for adding the images into ImageZoom 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=”imagezoom” ><img src=” ” /></a>

As you can see we added only a rel=”imagezoom”.

For Gallery , add the following code 

<a href=” ” rel=”imagezoom[Gallery_Name]” ><img src=” ” /></a>

      <a href=” ” rel=”imagezoom[Gallery_Name]” ><img src=” ” /></a>

Just make sure that all the elements of the gallery have the same rel tag


For overlaying the items the code is 


<a href="javascript: openImageZoomOverlay();"><img id="demo_overlay"  src="http://dl.dropbox.com/u/27675057/floatbox/zion_valley_thm.jpg" alt="Speed" width="100; height="100;/></a>



In the code ,the src image should be the small one and the link to the larger image should be given in the demos.js file 

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 Bumpbox in Blogger

Bumpbox is a lightbox clone script which also supports HTML files, FLV videos, SWF files and PDF’s as well as common images.Bumpbox is a lightbox clone script which also supports HTML files, FLV videos, SWF files and PDF’s as well as common images.

Bumpbox requires flowplayer media player to show FLV video files. The script requires Mootools JavaScript library of version 1.2.

             
Steps to Add it to Blogger:


1.Login to the Blogger account.


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

3.Now copy the code from below and paste it there.
1
<script src=”http://dl.dropbox.com/u/27675057/bumpbox/mootools.js” type=”text/javascript”>
2
</script>
3
4
<script src=”http://dl.dropbox.com/u/27675057/bumpbox/bumpbox-2.0.1-min.js” type=”text/javascript”>
5
</script>
6
7
<script src=”http://dl.dropbox.com/u/27675057/bumpbox/flowplayer.min.js” type=”text/javascript”>
8
</script> 

For using this Multiple times copy the Above code Before the </head> tag in the Design > Edit HTML Tab

4.Now for adding the images into BumpBox, 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=”bump” ><img src=” ” /></a>

As you can see we added only a class=”bump”.Then you also have to add this piece of code 
1
<script type=”text/javascript”>
2
3
//names,inSpeed,outSpeed,boxColor,backColor,bgOpacity,bRadius, borderWeight,borderColor,boxShadowSize,boxShadowColor,iconSet,effectsIn,effectsOut
4
5
doBump(‘.bump’);
6
7
</script>
‘.bump’ can be replaced by the name you of your choice but then the call should also be made by that name

For adding bumpbox with effects you can see the code below 

1
<script type=”text/javascript”>
2
3
//names,inSpeed,outSpeed,boxColor,backColor,bgOpacity,bRadius, borderWeight,borderColor,boxShadowSize,boxShadowColor,iconSet,effectsIn,effectsOut
4
5
doBump(‘.bump’,1200, 500, ‘34373c’, ‘34373c’, 0.7, 3, 1 ,’333′, 9,’000′, 1, Fx.Transitions.Bounce.easeOut, Fx.Transitions.Bounce.easeOut);
6
7
</script>

Here is a complete list of options

Options available
name
Class name for bumpbox objects, note the dot in front of the class name itself
inSpeed
Effect speed to show bumpbox ( in ms )
outSpeed
Effect speed to remove bumpbox ( in ms )
boxColor
Hex color of bumpbox itself, omit #
backColor
Hex color of the background overlay, omit #
bgOpacity
Opacity of the background overlay, values 0 – 1
bRadius
Border radius of the bumpbox client window in px
borderWeight
Border weight of the bumpbox client window
borderColor
Hex color of the bumpbox client window, omit #
boxShadowSize
Shadow spread size in px
boxShadowColor
Hex color of bumpbox shadow, omit #
iconSet
Choose from 4 predefined icon sets
effectsIn
Transition used for appearing see Transitions
effectsOut
Transition used for disappearing – see Transitions
bgImage
Background image to be used
bgPosition
Background position
bgRepeat
Background repeat
Using a fully customized bumpbox:
doBump( ‘.bump’,750, 500, ‘111’, ‘900’, ‘0.8’, 5, 1 ,’333′, 15,’000′, 4,
                 Fx.Transitions.Bounce.EaseOut,
                 Fx.Transitions.Bounce.EaseOut,
                 ‘images/demo_bg_bumpbox.png’,
                 ‘top left’,
                 ‘repeat-x’ );
Some Example Code:


01
Single Image
02
<a class=”bump1″ href=”http://dl.dropbox.com/u/27675057/1%282%29.jpg“><img alt=”First”src=”http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg” title=”The first image” /></a>
03
04
Gallery
05
<a class=”bump” href=”http://dl.dropbox.com/u/27675057/1%282%29.jpg“><img alt=”First”src=”http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg” title=”The first image” /></a>&nbsp;&nbsp;<a class=”bump” href=”http://dl.dropbox.com/u/27675057/2.png“><img alt=”First”src=”http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png” title=”The SECOND image” /></a>
06
07
<a href=”http://www.artviper.net/test/artvipermedia.flv” class=”bx2″ rel=”800-452″ title=”Playing now…”>FLV Video</a>
08
09
<pre><a href=”http://www.artviper.net/index.mp3” class=”bx2″ rel=”400-93″>MP3 Audio</a>
10
11
12
<a href=”http://www.artviper.net/pc.swf” class=”bx2″ rel=”480-480″>SWF Video</a>
13
14
15
<a href=”http://www.artviper.net/test.pdf” class=”bx2″ rel=”800-350″>PDF File</a>
16
17
18
<a href=”http://www.artviper.net/website-tools/abc.jpg” class=”bx2″ rel=”357-500″>Image File </a>
19
20
21
<a href=”http://www.artviper.net/” class=”bx2″ rel=”1040-600″>HTML File</a>
22
23
24
25
<a href=”http://www.youtube.com/embed/XpF32DRBPh0” class=”bx2″ rel=”640-390″>Youtube Video</a>
26
27
28
<a href=”http://player.vimeo.com/video/12939579” class=”bx2″ rel=”400-300″>Vimeo Video</a>
29
30
</pre>
31
32
<script type=”text/javascript”>
33
//names,inSpeed,outSpeed,boxColor,backColor,bgOpacity,bRadius,borderWeight, borderColor,boxShadowSize,boxShadowColor,iconSet,effectsIn,effectsOut
34
doBump(‘.bump1’);
35
doBump(‘.bump’,1200, 500, ‘34373c’, ‘34373c’, 0.7, 3, 1 ,’333′, 9,’000′, 1, Fx.Transitions.Bounce.easeOut, Fx.Transitions.Bounce.easeOut);
36
doBump(‘.bx2’,850, 500, ‘000’, ‘6b7477′, 0.7, 7, 2 ,’333′, 15,’000’, 2, Fx.Transitions.Back.easeOut, Fx.Transitions.linear);
37
</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 Multibox in Blogger

Multibox is a simple jQuery plugin to overlay elements on a page.Its support Images ,Swfs ,Wmvs ,Flvs ,Mp3s ,IFrames ,Html Elements to name a few.Its lightweight and stylish.

See DemoDownload

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


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

<link href="http://dl.dropbox.com/u/27675057/Multibox/multiBox.css" rel="stylesheet" type="text/css"></link>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4-core-yc%20%281%29.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4.4-more-yc.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/overlay.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/multiBox.js" type="text/javascript">  
 </script>  
 <script type="text/javascript">  
 window.addEvent('domready', function(){  
 //call multiBox  
 var initMultiBox = new multiBox({  
 mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)  
 container: $(document.body),//where to inject multiBox  
 descClassName: 'multiBoxDesc',//the class name of the description divs  
 path: './Files/',//path to mp3 and flv players  
 useOverlay: true,//use a semi-transparent background. default: false;  
 maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing  
 addDownload: false,//do you want the files to be downloadable?  
 pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)  
 addRollover: true,//add rollover fade to each multibox link  
 addOverlayIcon: true,//adds overlay icons to images within multibox links  
 addChain: true,//cycle through all images fading them out then in  
 recalcTop: true,//subtract the height of controls panel from top position  
 addTips: true,//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)  
 autoOpen: 0//to auto open a multiBox element on page load change to (1, 2, or 3 etc)  
 });  
 });  
 </script>

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

body{  
  font-family:Arial;  
 }  
 a.home, a:link.home, a:visited.home, a:hover.home, a:active.home,  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  color:#FF6600;  
  font-family:Verdana, Arial, Helvetica, sans-serif;  
  text-decoration:none;  
  float:right;  
  margin:-13px 0 0 0;  
  font-size:10px;  
 }  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  margin:0;  
 }  
 a:hover.home, a:hover.Download{  
 color:#FFA062;  
 }
2. Now Go to the Post/Page you want to add the MultiBox and go to Edit HTML.

And copy the code from below and paste it there
<link href="http://dl.dropbox.com/u/27675057/Multibox/multiBox.css" rel="stylesheet" type="text/css"></link>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4-core-yc%20%281%29.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4.4-more-yc.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/overlay.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/multiBox.js" type="text/javascript">  
 </script>  
 <script type="text/javascript">  
 window.addEvent('domready', function(){  
 //call multiBox  
 var initMultiBox = new multiBox({  
 mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)  
 container: $(document.body),//where to inject multiBox  
 descClassName: 'multiBoxDesc',//the class name of the description divs  
 path: './Files/',//path to mp3 and flv players  
 useOverlay: true,//use a semi-transparent background. default: false;  
 maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing  
 addDownload: false,//do you want the files to be downloadable?  
 pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)  
 addRollover: true,//add rollover fade to each multibox link  
 addOverlayIcon: true,//adds overlay icons to images within multibox links  
 addChain: true,//cycle through all images fading them out then in  
 recalcTop: true,//subtract the height of controls panel from top position  
 addTips: true,//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)  
 autoOpen: 0//to auto open a multiBox element on page load change to (1, 2, or 3 etc)  
 });  
 });  
 </script>  
 <style type="text/css">  
 body{  
  font-family:Arial;  
 }  
 a.home, a:link.home, a:visited.home, a:hover.home, a:active.home,  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  color:#FF6600;  
  font-family:Verdana, Arial, Helvetica, sans-serif;  
  text-decoration:none;  
  float:right;  
  margin:-13px 0 0 0;  
  font-size:10px;  
 }  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  margin:0;  
 }  
 a:hover.home, a:hover.Download{  
 color:#FFA062;  
 }  
 </style>
3.Now for adding the elements ,for example you have to add image into Multibox ,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="large2.jpg"  title="Image 2"><img  src="small2.jpg" title="Image 1" /></a>
Make it like this
<a class="mb" href="large2.jpg" id="mb2" rel="[images],noDesc" title="Image 2"><img src="small2.jpg" title="Image 1" /></a>
As you can see we added only a class=”mb” and a id tag. For adding multiple files increase the digit of the ID tag consecutively.

You can also give the Description to the element by applying this piece of code just below the element with its respective ID tag
<div class="multiBoxDesc mb4 mbHidden">
This is my description text 4. It can support html.</div>


Here are some example code for Adding different elements:

SWF
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/parallax.swf" id="mb5" rel="width:700,height:200,[flash]" title="Flash">.swf example</a>
<div class="multiBoxDesc mb5 mbHidden">
.swf example by Sai</div>

MOV
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/curly.mov" id="mb6" rel="width:400,height:310," title="Movie">.mov example</a>
<div class="multiBoxDesc mb6 mbHidden">
.mov example</div>

WMV
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/curly.wmv" id="mb8" rel="width:400,height:350," title="Windows Media Video">.wmv example</a>
<div class="multiBoxDesc mb8 mbHidden">
.wmv example</div>

MP3
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/music.mp3" id="mb9" rel="[flash]" title="mp3">.mp3 example</a>
<div class="multiBoxDesc mb9 mbHidden">
.mp3 example</div>

FLV
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/curly.flv" id="mb10" rel="width:400,height:300,[flash]" title="Flash Video">.flv example</a>
<div class="multiBoxDesc mb10 mbHidden">
.flv example</div>

HTML
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/blank.htm" id="mb11" rel="width:400,height:300" title="iFrame">HTML page</a>
<div class="multiBoxDesc mb11 mbHidden">
html</div>


HTML Element
<a class="mb" href="http://www.blogger.com/page-edit.do?blogID=7521351820124661054&amp;pageID=5579707308047961391#htmlElement" id="mb13" rel="type:element" title="HTML element">HTML element</a>
<div class="multiBoxDesc mb13 mbHidden">
html element</div>
<div class="mbHidden" id="htmlElement">
This is a snippet of html.
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>

IFRAME
<a class="mb" href="http://www.bbc.co.uk/" id="mb14" rel="width:600,height:400" title="iFrame">bbc.co.uk</a>
<div class="multiBoxDesc mb14 mbHidden">
bbc.co.uk</div>


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 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.

See DemoDownload