Implementing Clearbox in Blogger

Clearbox is a lightbox script based on the jQuery framework. It is capable of displaying image galleries, Flash, Quicktime, Windows Media formats, HTML, inner content, etc.One of its Plus point is that it works BEFORE the page is fully loaded! It is even capable of Rotating the images (not working in Internet Explorer or some other older browsers).It can effectively scale down large images with no comprise in quality and also features a Download button (For Images,MOV,other Media Fromats) as well as a Play button (For Slideshow).

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://dl.dropbox.com/u/27675057/Clearbox/clearbox.js" type="text/javascript">
</script>

In this JS file you will have to change the path of CB_ScriptDir variable (its on the top) to the one pointing to the Clearbox Folder (This is where Dropbox comes into the picture).

2.Go to the Post/Page you want to add Clearbox 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/Clearbox/clearbox.js" type="text/javascript">
</script>

In this JS file you will have to change the path of CB_ScriptDir variable (its on the top) to the one pointing to the Clearbox Folder (This is where Dropbox comes into the picture).

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

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

<a title=”1 tes” href=”large3.jpg”><img src=”small3.jpg” /></a>

Make it like this 

<a rel=”clearbox” href=”large3.jpg”><img src=”small3.jpg” /></a>

As you see we only added rel tag namely “clearbox”. 

Now to add Galleries just see the following code:

<a href="2.png" rel="clearbox
"><img src="D.png" /></a>
<a href="9.jpg" rel="clearbox
"><img src="5D.jpg" /></a>
<a href="29.jpg" rel="clearbox
"><img src="7D.jpg"/></a>

As you see we only added rel=”clearbox

” where My Gallery is the name of the Gallery

Now Some Working Example Code:

Divs
<a href="inner#test" rel="clearbox[tnhrf=nopreview,,title=Inner content,,comment=Alike, but not similar to the previous example!]">Inner DIV</a> 

Swf
<a href="http://www.clearbox.hu/test.swf" rel="clearbox[tnhrf=nopreview,,width=600,,height=400,,title=Flash content]">SWF</a> 

YouTube
<a href="http://www.youtube.com/v/OtQN-iDfprU" rel="clearbox[tnhrf=nopreview,,width=700,,height=490,,title=A clearbox 3 preview movie on YouTube,,comment=I uploaded some movies to YouTube from clearbox 3...]">Youtube</a> 

MOV
<a href="http://handras.hu/insight/media/insight_960.mov" rel="clearbox[tnhrf=nopreview,,title=iNSIGHT (http://handras.hu/insight),,comment=This joy of creation through behind-the-scenes pictures.&lt;br /&gt;&lt;font color=&quot;#ff7700&quot;&gt;QuickTime plugin required!&lt;/font&gt;,,width=960,,height=540]">Quicktime</a> 

MP3
<a href="http://www.clearbox.hu/test.mp3" rel="clearbox[tnhrf=nopreview,,width=500,,height=150,,title=MP3 music,,comment=Windows Media Player plugin is required!]">MP3</a>

Firstly the format is a little different ,you have to get with it.

Secondly the comment in the code represents the Text which is shown below the item

Thirdly to call divs you have to include “inner” in the address before #

If you can’t understand something else please feel free to ask

Now I tried whether Clearbox could open itself in itself(Inspection style).Now there are no official way to do this ,but normally if you iFrame it to a page containing Clearbox then it can Function,In my case I redirected it to my Demo page,See the result for yourself

(Level Three is not Possible)

5.Now save the Post/Page.

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.

Thanks to Charlotte for pointing out how to remove the popup messages that appear telling “Clearbox is ready” and stuff.

To disable it go to /clearbox/config/default/cb_config.js

The new code has to be this with “OFF” :
CB_OSD=’off’, // turns on OSD
CB_OSDShowReady=’off’, // when clearbox is loaded and ready, it shows an OSD message

             

Implementing CSS Lightbox in Blogger

You have read it right, this is a purely CSS based lightbox with the ablitly to show images only (That is quite understandable).This marvel of a lightbox can be found at www.w3css.co.uk, but I am unable to find its real author.The major plus point about this Lightbox over others is that, you only have to include a CSS code for it to work, with no dependencies on a JavaScript (But there is a tiny exception).It has some minor bugs ,that I will discuss later in the tutorial.

             

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.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://dl.dropbox.com/u/27675057/Css%20Lightbox/lightbox.css" rel="stylesheet"></link>

That JavaScript file  html5.js is needed for smooth working in Internet Explorer 9(But the Lightbox continues to work even without it ,but but I recommend you include it)

2.Go to the Post/Page you want to add this CSS Lightbox 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/Css%20Lightbox/lightbox.css" rel="stylesheet"></link>t ,but but I recommend you include it)

Now include the below JavaScript file inside the </head> tag, For that Go to Design Tab > Edit HTML and copy it Above/Before </head> tag

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

4.Now adding the images into this CSS Lightbox is a little tricky affair ,Firstly  I will give you full code then explain how it works.

<div id="lightbox">
<a class="thumb b1" href="#x" tabindex="1"><img alt="" src="http://dl.dropbox.com/u/27675057/2.png" /></a>

<div class="holder p1">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://dl.dropbox.com/u/27675057/2.png" alt="" />
<p>
Image 1 of 3
A line for descriptive text</p>
<p class="close">
CLOSE X</p>
</div>
</div>
<p class="instructions">
IE9  and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

</div>

The 2nd and 10th Line contains the address of the image ,former being the one shown on the Page and the later in the Lightbox


From Line 3 onwards to the 2nd last line, is the code which makes the Lightbox effect work.Every class tag is self explanatory ,just keep this Markup handy for adding images into this lightbox


For adding multiple files into the lightbox just see the Markup below:

<div id="lightbox">
<a class="thumb b1" href="#x" tabindex="1"><img alt="" src="http://dl.dropbox.com/u/27675057/2.png" /></a>&nbsp;<a class="thumb b2" href="#x" tabindex="2"><img alt="" src="http://dl.dropbox.com/u/27675057/1%282%29.jpg" /></a>

<div class="holder p1">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://dl.dropbox.com/u/27675057/2.png" alt="" />
<p>
Image 1 of 3
A line for descriptive text</p>
<p class="close">
CLOSE X</p>
</div>
</div>
<p class="instructions">
IE9  and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

<div class="holder p2">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://dl.dropbox.com/u/27675057/1%282%29.jpg" alt="" />
<p>
Image 2 of 3
A line for descriptive text</p>
<p class="close">
CLOSE X</p>
</div>
</div>
<p class="instructions">
IE9  and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>
</div>


The bug that I was talking about in the beginning ,is that the images are reloaded again into the Lightbox every time you Minimize the Page or switch between the Pages of your Browser.



5.Now save the Post/Page. 


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

             

Implementing PhotoViewer in Blogger

PhotoViewer is a Lightbox based on the extremely popular YUI(Yahoo UI) Framework.It is now obsolete.Some of its features are:

>Load your Flickr RSS feed
>Lightbox functionality, modal dialog and auto-centered panels
>Slide show configuration models
>Cross-browser, cross-platform compatibility
>Create galleries using existing HTML
>Create galleries using remote XML files
>Quick set-up time, endless configuration options
>Light weight for the flexibility

             

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/Photoviewer/base-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/fonts-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/container.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base.css" rel="stylesheet" type="text/css"></link>

<script src="http://dl.dropbox.com/u/27675057/Photoviewer/yahoo-dom-event.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/dragdrop-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/animation-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/container-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/connection-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base-min.js" type="text/javascript">
</script>
<script src="assets/javascript.cfm?event=demos" type="text/javascript">
</script>

2.Go to the Post/Page you want to add PhotoViewer 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/Photoviewer/base-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/fonts-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/container.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base.css" rel="stylesheet" type="text/css"></link>

<script src="http://dl.dropbox.com/u/27675057/Photoviewer/yahoo-dom-event.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/dragdrop-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/animation-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/container-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/connection-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base-min.js" type="text/javascript">
</script>
<script src="assets/javascript.cfm?event=demos" type="text/javascript">
</script>

4.Now for adding the images into PhotoViewer ,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

<div id=’SomeName’>
<a class=”photoviewer” href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>
</div>

As you see we only added class=”photoviewer” and enclosed it inside a div tag


After this add a snippet to link it to the plugin as following:

<script type="text/javascript">
// config 
YAHOO.photoViewer.config = {
 viewers: {
  "SomeName" : {
   properties: {
    id: "lb1",
    grow: 0.2,
    fade: 0.2,
    modal: true,
    dragable: true,
    fixedcenter: true,
    loadFrom: "html",
    position: "absolute",
    easing: YAHOO.util.Easing.easeBothStrong
   }
  }
 }
};
</script>

5.Now save the Post/Page.




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

Zoombox is an easy to use jquery modul that allows you to display images, html content and multi media content with a “lightbox” that floats over your web page.

Features
>Can display all kind of links : Images, Flash animations, Youtube videos, Dailymotion videos, Iframe, HTML Content
>Everything is customizable, you can create new themes using CSS
>You can group your link and make galleries

             

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/Zoombox/zoombox.css" media="screen" rel="stylesheet" type="text/css"></link>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Zoombox/zoombox.js" type="text/javascript">
</script>

Add the following JavaScript Snippet after the content a.k.a. the elements using zoombox

<script type="text/javascript">
 
//<![CDATA[
    $(function(){
        $('a.zoombox').zoombox();
    });

//]]>
</script>

Change the address of the FLVplayer.swf in the zoombox.js for the correct working of the script

2.Go to the Post/Page you want to add ZoomBox 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/Zoombox/zoombox.css" media="screen" rel="stylesheet" type="text/css"></link>


-------The Content------



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Zoombox/zoombox.js" type="text/javascript">
</script>

<script type="text/javascript">
 
//<![CDATA[
    $(function(){
        $('a.zoombox').zoombox();
    });

//]]>
</script>

Change the address of the FLVplayer.swf in the zoombox.js for the correct working of the script

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


As you see we only added class=”zoombox”


For Adding gallery just add class=”zoombox GalleryName” to all the elements of the Gallery


You can video format like FLV,MP4 and iFrames with just class=”zoombox” tag Here is the Example Code:

<a class="zoombox w500 h400" href="http://www.grafikart.fr/img/zoombox/video.flv" title="">FLV</a>

<a class="zoombox w450 h375" href="http://www.grafikart.fr/img/zoombox/video.mp4" title="">MP4/Mov</a>

<a class="zoombox" href="http://grafikart.fr/zoombox">This is my site </a>





It also supports Youtube, Dailymotion, Vimeo ,etc Here is the Example Code:

<a class="zoombox" href="http://www.youtube.com/watch?v=8oejjWGFs6o" title="Hey this is youtube !">Youtube</a>

<a class="zoombox" href="http://www.dailymotion.com/JojoRatonLaveur/video/x1xhl1_jojodemarrages2diabolos_creation" title="Dailymotion now">Dailymotion</a>

<a class="zoombox" href="http://vimeo.com/752979" title="We all like vimeo !">Vimeo</a>

Well the most amazing thing about this Lightbox is its ability to open a itself inside a itself (Something like Inception).Well I tested it and found to my surprise that it really worked beyond my expectations .The image below tells it all.

5.Now save the Post/Page.


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 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 Fancy Zoom in Blogger

Fancy Zoom works with any html (images, text, headings, flash). The only caveat is it doesn’t currently work with AJAX. Whatever you want to zoom to must be html already on the page.Width and height of zoom box are configurable through optional setting or css.

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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FancyZoom/jquery/js/fancyzoom.js"></script> 

A little tweaking is required for the proper functioning of this plugin
-Firstly Open the fancyzoom,js file and find var directory in it ,It would appear something like this:


var directory = options && options.directory ? options.directory : ‘images’;


Make it like this 


var directory = ‘http://dl.dropbox.com/u/27675057/FancyZoom/jquery/images/’;


Where images folder contain the various images like Close button,etc (This is where DropBox helps)

2.Go to the Post/Page you want to add FancyZoom and then 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.2.6/jquery.min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FancyZoom/jquery/js/fancyzoom.js"></script> 



A little tweaking is required for the proper functioning of this plugin

-Firstly Open the fancyzoom,js file and find var directory in it ,It would appear something like this:

var directory = options && options.directory ? options.directory : ‘images’;

Make it like this 

var directory = ‘http://dl.dropbox.com/u/27675057/FancyZoom/jquery/images/’;

Where images folder contain the various images like Close button,etc (This is where DropBox helps)

4.Now adding images into FancyZoom is little bit different from other scripts

First add a image as shown

<div class=”photo”>
<a href=”#abc”> 
<img src=”small.jpg”  /> 
</a> 
</div>
Now add this div tag containing the larger version of the image 
<div id=”abc”>
<img src=”Large.jpg”  /> 
</div>

Finally add this JavaScript Snippet to link this to FancyZoom

<script type=”text/javascript” charset=”utf-8″> 
  $(document).ready(function() {
   $(‘div.photo a’).fancyZoom({scaleImg: true, closeOnClick: true});
  });
 </script>
Here are Some Example Codes:

<script type="text/javascript" charset="utf-8"> 
  $(document).ready(function() {
   $('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
   $('#medium_box_link').fancyZoom({width:400, height:300});
   $('#large_box_link').fancyZoom();
   $('#flash_box_link').fancyZoom();
  });
 </script> 

<style type="text/css" media="screen"> 
  #large_box {width:800; height:600;}
 </style> 

<div id="photos">
<h3>
Images</h3>
<div class="photo">
<a href="#github"> 
<img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25_s.jpg" alt="Github helmet" /> 
</a> 
</div>
<div class="photo">
<a href="#hotdog"> 
<img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0_s.jpg" alt="Github helmet" /> 
</a> 
</div>
<div class="photo">
<a href="#turtles"> 
<img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455_s.jpg" alt="Github helmet" /> 
</a> 
</div>

<div id="github">
<img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25.jpg" alt="helmet" /> 
</div>
<div id="hotdog">
<img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0.jpg" alt="Hot dog" /> 
</div>
<div id="turtles">
<img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455.jpg" alt="Turtles" /> 
<p id="turtles_caption">
It's true, they do bite!</p>
</div>
</div>
<div id="text">
   <h3>
Text</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. <a href="#medium_box" id="medium_box_link">Here is a medium box</a> blandit rhoncus. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac, ante. <a href="#large_box" id="large_box_link">Here is a large box</a>. Morbi sit amet mi. Ut magna. Curabitur id est. Nulla velit. Sed consectetuer sodales justo. Aliquam dictum gravida libero. Sed eu turpis. Nunc id lorem. Aenean consequat tempor mi. Phasellus in neque. Nunc fermentum convallis ligula. <a href="#flash_box" id ="flash_box_link">You can even embed flash</a>.</p>

<div id="medium_box">
    <h2>
Here is a medium box</h2>
<p>
<strong>The width and height of this box are set in the options for this fancy zoom.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>

<div id="large_box">
    <h2>
Here is a large box</h2>
<p>
<strong>The width and height for this box are inferred from css. See the style tag in the &lt;head&gt; of this document.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>

<div id="flash_box">
    <object type="application/x-shockwave-flash" width="400" height="300" data="http://www.flickr.com/apps/video/stewart.swf?v=59154" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="flashvars" value="intl_lang=en-us&amp;photo_secret=1869930911&amp;photo_id=2756538377">
</param>
<param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=59154">
</param>
<param name="bgcolor" value="#000000">
</param>
<param name="allowFullScreen" value="true">
</param>
<embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/video/stewart.swf?v=59154" bgcolor="#000000" allowfullscreen="true" flashvars="intl_lang=en-us&amp;photo_secret=1869930911&amp;photo_id=2756538377" height="300" width="400"></embed></object> 
</div>

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

NyroModal is a simple jQuery plugin that implements a complex modal window system

The modals are able to load content such as inline HTML, AJAX calls, iframes with external links, images, gallery sets, external Flash and much more.
Here are some key features of “NyroModal”:
· Ajax Call
· Single Image
· Images Gallery with arrow navigating
· Form
· Form in iframe
· Iframe

             
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/jquery.nyroModal/styles/nyroModal.css" type="text/css" media="screen" />
<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/jquery.nyroModal/js/jquery.nyroModal.custom.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nyroModal/js/jquery.nyroModal-ie6.min.js"></script>
<![endif]-->

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

<script type="text/javascript">
$(function() {
  $('.nyroModal').nyroModal();
});
</script>

2.Go to the Post/Page you want to add NyroModal 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/jquery.nyroModal/styles/nyroModal.css" type="text/css" media="screen" />
<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/jquery.nyroModal/js/jquery.nyroModal.custom.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nyroModal/js/jquery.nyroModal-ie6.min.js"></script>
<![endif]-->

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

<script type="text/javascript">
$(function() {
  $('.nyroModal').nyroModal();
});
</script>


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


Make it like this 

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


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

If you want to add a Gallery then Here is the Code:

<a href=”9.jpg” id=”imgFiche” class=”nyroModal” rel=”galleryName”>Gallery Img 1</a>
<a href=”29.jpg” class=”nyroModal”  rel=”galleryName”>Gallery Img 2</a>

As you see we only added a rel tag accompanying the class tag.


Some Example Codes:

Single
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" class="nyroModal" title="3rd Street Promenade">Image</a>

Gallery
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" id="imgFiche" class="nyroModal" title="UCLA" rel="gal">Gallery Img 1</a>
<a href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" class="nyroModal" title="3rd Street Promenade by Night" rel="gal">Gallery Img 2</a>
<a href="http://www.youtube.com/watch?v=lddUnv1R5y0" class="nyroModal" rel="gal" title="Hockey Goal fight">Youtube in gallery</a>

<a href="http://dl.dropbox.com/u/27675057/2.png" class="nyroModal" title="Sunset at Santa Monica" rel="gal">Gallery Img 3</a>


Hidden Inline
<a href="#test" class="nyroModal">DOM Element (hidden div)</a>
<div id="test" style="display: none; width: 600px;">
<a href="demoSent.php" class="nyroModal">Open a new modal</a>

Test
</div>

Youtube:Via Embedly Filter
<a href="http://www.youtube.com/watch?v=lddUnv1R5y0" class="nyroModal">Youtube (Via Embedly filter)</a>

<a id="manual1" href="#">Manual Call to get an ajax content</a>
<a id="manual2" href="#">Manual Call calling through an other link</a>
<form id="myValidForm" method="post" action="demoSent.php">
<input type="text" name="wouhou" />
<input type="submit" value="simple form with validation" />
</form>
<script type="text/javascript">
$(function() {
  $('#manual1').click(function(e) {
    e.preventDefault();
    $.nmManual('demoSent.php');
  });
  $('#manual2').click(function(e) {
    e.preventDefault();
    $('#imgFiche').nmCall();
  });
  var validForm = $('#myValidForm').submit(function(e) {
    e.preventDefault();
    if (validForm.find(':text').val() != '') {
      validForm.nyroModal().nmCall();
    } else {
      alert("Enter a value before going to "   validForm.attr("action"));
    }
  });
});
</script>

Iframe
<a href="http://www.perdu.com/" class="nyroModal">Iframe Automatique via other hostname</a>
<a href="demoIframe.php" target="_blank" class="nyroModal">Iframe Automatique via target=_blank</a>


Non Existent
<a href="invalidUrl.php" class="nyroModal">Non existent URL</a>

<a href="invalidUrl.jpg" class="nyroModal">Non existent Image</a>

<a href="#inexistent" class="nyroModal">Non existent Element ID</a>

<a href="demoSent.php#inexistent" class="nyroModal">Non existent Element ID in Ajax Request</a>

Forms
<form method="post" enctype="multipart/form-data" action="demoSent.php" class="nyroModal">
<input type="file" name="file" />
<input type="submit" value="form with file"/>
</form>
<form method="post" enctype="multipart/form-data" action="demoSent.php#blabla" class="nyroModal">
<input type="file" name="file" />
<input type="submit" value="form with file Filtering Content"/>
</form>
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 SuperBox in Blogger

Superbox is a jQuery plugin for creating easily customizable modal windows (lightbox-like).

It is an accessible script, uses the rel attribute of an element for triggering & href attribute is used for defining the source to be displayed.

It can display any type of content as every HTML content can be presented. But by default, images (single or gallery mode), text content & iframes are supported

Dimensions of the modal window can be choosen to resize automatically according to the content or width & height can be defined for a standard size.

             
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/SuperBox/demo.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/SuperBox/jquery.superbox.css" media="all" rel="stylesheet" type="text/css"></link>
<style type="text/css">
/* Custom Theme */
#superbox-overlay{background:#e0e4cc;}
#superbox-container .loading{width:32px;height:32px;margin:0 auto;text-indent:-9999px;background:url(http://saibaba.googlecode.com/files/loaderss.gif) no-repeat 0 0;}
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#333;cursor:pointer;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
</style>
<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/SuperBox/jquery.superbox-min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$.superbox.settings = {
closeTxt: "Close",
loadTxt: "Loading...",
nextTxt: "Next",
prevTxt: "Previous"
};
$.superbox();
});
</script>

2.Go to the Post/Page you want to add SuperBox 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/SuperBox/demo.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/SuperBox/jquery.superbox.css" media="all" rel="stylesheet" type="text/css"></link>
<style type="text/css">
/* Custom Theme */
#superbox-overlay{background:#e0e4cc;}
#superbox-container .loading{width:32px;height:32px;margin:0 auto;text-indent:-9999px;background:url(http://saibaba.googlecode.com/files/loaderss.gif) no-repeat 0 0;}
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#333;cursor:pointer;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
</style>
<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/SuperBox/jquery.superbox-min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$.superbox.settings = {
closeTxt: "Close",
loadTxt: "Loading...",
nextTxt: "Next",
prevTxt: "Previous"
};
$.superbox();
});
</script>


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


As you see we only added a rel=”superbox[image]”


For Adding Gallery:
 rel=”superbox

[GalleryName]” In all the elements of the Gallery

For Adding IFrame:
 rel=”superbox[iframe]”

For Inline Content:
rel=”superbox[content]”

For AJAX Content
rel=”superbox[ajax]

Some Example Code:

Single
<a href="http://farm4.static.flickr.com/3269/2605397024_73497a6cf5.jpg" rel="superbox[image]">Superbox picture (auto dimensions)</a>  
<a href="http://farm4.static.flickr.com/3111/2605394848_e11968abaf.jpg" rel="superbox[image][700x]">Superbox picture (defined width)</a>  
<a href="http://farm4.static.flickr.com/3031/2605388478_b8ae228aab.jpg" rel="superbox[image][x600]">Superbox picture (defined height)</a>


Gallery
<a href="http://farm4.static.flickr.com/3269/2605397024_73497a6cf5.jpg" rel="superbox
[my_gallery]"><img alt="" height="75" src="http://farm4.static.flickr.com/3269/2605397024_73497a6cf5_s.jpg" width="75" /></a>&nbsp;&nbsp;<a href="http://farm4.static.flickr.com/3111/2605394848_e11968abaf.jpg" rel="superbox
[my_gallery]"><img alt="" height="75" src="http://farm4.static.flickr.com/3111/2605394848_e11968abaf_s.jpg" width="75" /></a>&nbsp;&nbsp;<a href="http://farm4.static.flickr.com/3031/2605388478_b8ae228aab.jpg" rel="superbox
[my_gallery]"><img alt="" height="75" src="http://farm4.static.flickr.com/3031/2605388478_b8ae228aab_s.jpg" width="75" /></a>


Iframe
<a href="http://en.wikipedia.org/wiki/Special:Random" rel="superbox[iframe]">Iframe Superbox (default dimensions)</a>
<a href="http://en.wikipedia.org/wiki/Special:Random" rel="superbox[iframe.wikipedia][750x500]">Iframe Superbox (defined dimensions)</a>


Inline
<div id="mode-content">
Generates a box containing an element of the page.
The link will be external, and will point to an element of the page using its <code>id</code> attribute.
This element will be copied to appear in Superbox.
</div>

<a href="#mode-content" rel="superbox[content]">SuperBox element</a>
<a href="#mode-content" rel="superbox[content][500x400]">SuperBox element (dimensions)</a>

AJAX
<a href="http://pierrebertet.net/projects/jquery_superbox/crockford.html" rel="superbox[ajax][crockford-ajax.html]">AJAX SuperBox</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 Loader.gif is 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 HighSlide JS in Blogger


Highslide JS
is an open source script offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.It uses modal windows instead of pop-up windows to open larger versions of the thumbnail images. It’s free for non-commercial uses.

Special thanks to the maker of this JavaScript for providing a tutorial for implementation of Single image version of HighSlide into Blogspot Blogs.

             

Note: This is a easy setup but has one downside , that if the roadrash.no servers go down then it will 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.

<script src='http://www.roadrash.no/hs-support/highslide/highslide-full.js' type='text/javascript'></script> 
<link href='http://www.roadrash.no/hs-support/highslide/highslide.css' rel='stylesheet' type='text/css'/> 
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]--> 
<script type='text/javascript'> 
//<![CDATA[
hs.graphicsDir = 'http://www.roadrash.no/hs-support/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.dimmingOpacity = 0.65;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
// close button
hs.registerOverlay({
 html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
 position: 'top right',
 fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.isUnobtrusiveAnchor = function(el) {
 if (el.href && /.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
  el.className = 'highslide'; // for the zoom-in cursor
  el.title = 'Click to enlarge'; // for title
  return 'image';
 }
};
if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {

 new hs.Outline('rounded-white');

 new hs.Outline('glossy-dark');

});
// The gallery example on the front page
var galleryOptions = {

 slideshowGroup: 'gallery',

 wrapperClassName: 'dark',

 //outlineType: 'glossy-dark',

 dimmingOpacity: 0.8,

 align: 'center',

 transitions: ['expand', 'crossfade'],

 fadeInOut: true,

 wrapperClassName: 'borderless floating-caption',

 marginLeft: 100,

 marginBottom: 80,

 numberPosition: 'caption'

};
if (hs.addSlideshow) hs.addSlideshow({

    slideshowGroup: 'gallery',

    interval: 5000,

    repeat: false,

    useControls: true,

    overlayOptions: {

     className: 'text-controls',

  position: 'bottom center',

  relativeTo: 'viewport',

  offsetY: -60

 },

 thumbstrip: {

  position: 'bottom center',

  mode: 'horizontal',

  relativeTo: 'viewport'

 }



});

hs.Expander.prototype.onInit = function() {

 hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;

}



// focus the name field

hs.Expander.prototype.onAfterExpand = function() {



 if (this.a.id == 'contactAnchor') {

  var iframe = window.frames[this.iframe.name],

   doc = iframe.document;

     if (doc.getElementById("theForm")) {

         doc.getElementById("theForm").elements["name"].focus();

     }



 }

}


//]]>

</script> 
<style type='text/css'> 
pre {
 background: white; 
 padding: 5px; 
 font-size: 10.9px;
}
</style> 

There is one problem with Blogger that first time this code will work but if you click Edit then you save it ,then it stops working,Therefore make sure you keep this code handy & whenever you want to add new stuff remove the code present and copy this again(then it starts working)

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


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


<script src='http://www.roadrash.no/hs-support/highslide/highslide-full.js' type='text/javascript'></script> 
<link href='http://www.roadrash.no/hs-support/highslide/highslide.css' rel='stylesheet' type='text/css'/> 
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]--> 
<script type='text/javascript'> 
//<![CDATA[
hs.graphicsDir = 'http://www.roadrash.no/hs-support/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.dimmingOpacity = 0.65;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
// close button
hs.registerOverlay({
 html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
 position: 'top right',
 fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.isUnobtrusiveAnchor = function(el) {
 if (el.href && /.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
  el.className = 'highslide'; // for the zoom-in cursor
  el.title = 'Click to enlarge'; // for title
  return 'image';
 }
};
if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {

 new hs.Outline('rounded-white');

 new hs.Outline('glossy-dark');

});
// The gallery example on the front page
var galleryOptions = {

 slideshowGroup: 'gallery',

 wrapperClassName: 'dark',

 //outlineType: 'glossy-dark',

 dimmingOpacity: 0.8,

 align: 'center',

 transitions: ['expand', 'crossfade'],

 fadeInOut: true,

 wrapperClassName: 'borderless floating-caption',

 marginLeft: 100,

 marginBottom: 80,

 numberPosition: 'caption'

};
if (hs.addSlideshow) hs.addSlideshow({

    slideshowGroup: 'gallery',

    interval: 5000,

    repeat: false,

    useControls: true,

    overlayOptions: {

     className: 'text-controls',

  position: 'bottom center',

  relativeTo: 'viewport',

  offsetY: -60

 },

 thumbstrip: {

  position: 'bottom center',

  mode: 'horizontal',

  relativeTo: 'viewport'

 }



});

hs.Expander.prototype.onInit = function() {

 hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;

}



// focus the name field

hs.Expander.prototype.onAfterExpand = function() {



 if (this.a.id == 'contactAnchor') {

  var iframe = window.frames[this.iframe.name],

   doc = iframe.document;

     if (doc.getElementById("theForm")) {

         doc.getElementById("theForm").elements["name"].focus();

     }



 }

}


//]]>

</script> 
<style type='text/css'> 
pre {
 background: white; 
 padding: 5px; 
 font-size: 10.9px;
}
</style> 

There is one problem with Blogger that first time this code will work but if you click Edit then you save it ,then it stops working,Therefore make sure you keep this code handy & whenever you want to add new stuff remove the code present and copy this again(then it starts working).

4.Now for adding the images into Highslide JS,just add the image and Highslide will automatically detect it 


The tricky part is in Adding other stuff ,Here are some Example Codes:

<div class="thumbwrapper">
Gallery
<a class="highslide" href="http://www.highslide.com/samples/gallery3.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery3.thumb.jpg" title="Click to enlarge" />
<a href="http://www.highslide.com/samples/gallery7.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery7.thumb.jpg" title="Click to enlarge" />&nbsp;</span></a>&nbsp;<a class="highslide" href="http://www.highslide.com/samples/gallery5.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery5.thumb.jpg" title="Click to enlarge" /></a></div>
<div class="thumbwrapper">

</div>
</div>
<div class="textwrapper">
Inline HTML
<a class="highslide" href="#" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white', wrapperClassName: 'draggable-header',

 headingText: 'Full HTML content' } )"> 
HTML content



</a>

<div class="highslide-maincontent">

This example uses the <code>htmlExpand</code> method to display full HTML content in the expander.

The width of the expanding <code>div</code> is set to <code>300px</code>, while the height is omitted

to allow Highslide to decide the best fit.



In the expander you can put all kinds of content, for instance form elements.

</div>

</div>



<div class="textwrapper">

<a class="highslide" href="http://www.highslide.com/include-long.htm" onclick="return hs.htmlExpand(this, { objectType: 'ajax', contentId: 'highslide-html-8' } )">

Scrolling HTML content

</a>

<div class="highslide-html-content" id="highslide-html-8" style="padding: 15px; width: auto;">

<div style="border-bottom: 1px solid silver; height: 20px; padding: 5px;">

<a class="control" href="http://www.blogger.com/post-edit.g?blogID=7521351820124661054&amp;postID=7837002431450655615&amp;from=pencil#" onclick="return hs.close(this)">Close</a>

<a class="highslide-move control" href="http://www.blogger.com/post-edit.g?blogID=7521351820124661054&amp;postID=7837002431450655615&amp;from=pencil#" onclick="return false">Move</a>

</div>

<div class="highslide-body" style="padding: 10px;">



</div>

<div style="border-top: 1px solid silver; text-align: center;">

<small>

Powered by <i>Highslide JS</i>

</small>

</div>

</div>



</div>



<div class="textwrapper">
AJAX
<a class="highslide" href="http://www.highslide.com/include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white',

   wrapperClassName: 'draggable-header', objectType: 'ajax' } )">

AJAX content

</a>

</div>



<div class="textwrapper">
AJAX Dynamic
<a class="highslide" href="http://www.highslide.com/ajax.htm#dynamic" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html-ajax',

   wrapperClassName: 'highslide-white', outlineType: 'rounded-white',

   outlineWhileAnimating: true, objectType: 'ajax', preserveContent: true } )">

Dynamic AJAX content

</a>

</div>





<div class="textwrapper">
IFrame 1
<a class="highslide" href="http://www.highslide.com/include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white',

   wrapperClassName: 'draggable-header', objectType: 'iframe' } )">

Iframe content

</a>

</div>



<div class="textwrapper">
IFrame 2
<a class="highslide" href="http://www.highslide.com/form.htm" id="formexample" onclick="return hs.htmlExpand( this, {

     objectType: 'iframe', outlineType: 'rounded-white', wrapperClassName: 'highslide-wrapper drag-header',

        outlineWhileAnimating: true, preserveContent: false, width: 250 } )">Iframe with form</a>

</div>
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 !