Implementing SlideWindow in Blogger

There are many JavaScript applications over the Internet which allow you to display large images on your site using modal dialogs.Most of them use advanced animation effects and depend on additional JavaScript libraries such as JQuery. If you do not want to use additional JavaScript libraries on you site and search for a lightweight and simple image viewer, Slidewindow is the answer.


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.

• For Multiple Usage
• For Single Usage

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/slidewindow/slidewindow.js" type="text/javascript">
</script>
<script type="text/javascript">
  // define the path where auxiliary files are located (slidewindow.css, loading.gif, PNGs)
  currPath = 'http://dl.dropbox.com/u/27675057/slidewindow/';
 
</script>

2.Go to the Post/Page you want to add SlideWindow 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/slidewindow/slidewindow.js" type="text/javascript">
</script>
<script type="text/javascript">
  // define the path where auxiliary files are located (slidewindow.css, loading.gif, PNGs)
  currPath = 'http://dl.dropbox.com/u/27675057/slidewindow/';
 
</script>

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

<div> <a href=" " onclick="return showSlideWindow(this, 600, 400);" ><img src=" " /></a> </div>

As you can see we added only a onclick="return showSlideWindow(this, 600, 400);".And make sure that you include it inside a div tag even if they are single image.

For adding multiple images 

Include all images into a div tag

<div> <a href="1.jpg" onclick="return showSlideWindow(this, 600, 400);" ><img src="1s.jpg" /></a>

<a href="2.jpg" onclick="return showSlideWindow(this, 600, 400);" ><img src="2s.jpg" /></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 Blogpsot itself !


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.