Integrate highslide with blogger

Highslide JS is an open source image, media and gallery viewer written in JavaScript. It is easy to integrate Highslide with any website or blog. These are some of its advantages:

• Quick and elegant looking.
• No plugins like Flash or Java required.
• Popup blockers are no problem. The content opens within the active browser window.
• Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
• Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
• Outstanding, unconditional and free user support for both commercial and non-commercial users.
• Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.

Demo image:

 

Step 1:

Go to your blog settings -> Design -> Edit html.
Copy this code and paste before tag.

This code works only for .jpg extenstion images. if you want high slide to work with other extensions like .jpeg , .gif , others you have to add this code at the above located area right before "//insert the if condition code for other extensions like .jpeg, .gif, .png etc."

if (el.href && /\.jpeg$/.test(el.href)) {
 el.className = 'highslide';
 return 'image';
 }if  (el.href && /\.gif$/.test(el.href)) {
 el.className =  'highslide';
 return 'image';
 }

Step 2:

this step is optional, if you don’t like to have thumbnails you don’t have to insert this. Insert this code before </body> tag.