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" /> <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" /> </span></a> <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> <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.
Find me on
nice post..
rahul:nice post i am going to apply on my blog...