Implementing Slimbox in Blogger

Slimbox 2 is a very small size visual clone of the popular Lightbox 2, written using the jQuery javascript library. It is designed to be very small, efficient, standards-friendly and fully customizable

It is compatible with all modern browsers: Firefox 2+, Internet Explorer 6+, Opera 9+ and Opera for Wii, Safari 3+, Camino and Google Chrome.It works with both strict mode and quirks mode web pages.Unlike many Lightbox-like scripts, it displays fine in case of horizontal scrolling of the web page.





             


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/slimbox-1.71a/slimbox-1.71a/js/mootools.js" type="text/javascript">  
</script>
<script src="http://dl.dropbox.com/u/27675057/slimbox-1.71a/slimbox-1.71a/js/slimbox.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/slimbox-1.71a/slimbox-1.71a/css/slimbox.css" media="screen" type="text/css"></link>


2.Go to the Post/Page you want to add the Slimbox 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/slimbox-1.71a/slimbox-1.71a/js/mootools.js" type="text/javascript">  
</script>
<script src="http://dl.dropbox.com/u/27675057/slimbox-1.71a/slimbox-1.71a/js/slimbox.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/slimbox-1.71a/slimbox-1.71a/css/slimbox.css" media="screen" type="text/css"></link>







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


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



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


Make it like this


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

As you can see we added only a rel=lightbox".
For making a Gallery add the following code 


<a href=" " rel="lightbox-g1" ><img src=" " /></a>
<a href=" " rel="lightbox-g1" ><img src=" " /></a>

5.Now save the Post/Page andsee 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.
             

0 comments:

Post a Comment

 
© 2009 Blogger Tips 2013 | Powered by Blogger