Highslide Blogger Integration

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.

You may see the demo on the Highslide website. Highslide is easy to integrate with any website or blog.  Here is the steps to integrate Highslide with BlogSpot.

[sniplet postads]

Step 1:

Go to your blog settings -> Layout -> Edit html.

Copy this code and paste before </head> tag.

[code]

<script src='http://highslide.com/highslide/highslide-full.js' type='text/javascript'/>

<link href='http://highslide.com/highslide/megik.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
//<![CDATA[

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.allowSizeReduction = false;
hs.showCredits = false;

hs.isUnobtrusiveAnchor = function(el) {

if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
//insert the if condition code for other extensions like .jpeg, .gif, .png etc.
}

function fixBloggerImages(searchFor, replaceWith) {
var href;
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
href = anchors[i].href;
if(href.indexOf(searchFor) != -1) {
anchors[i].href = href.replace(searchFor, replaceWith);
anchors[i].setAttribute("onclick", "return hs.expand(this)");
anchors[i].setAttribute("class", "highslide");
anchors[i].setAttribute("title", "Click to enlarge");
}
}
}

//]]>

</script>

[/code]

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.

[code]

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

[/code]

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.

[code]
<script type='text/javascript'>fixBloggerImages(&quot;s1600-h&quot;, &quot;s1600&quot;);</script>
[/code]

If you have problem in inserting the code verify the below video.

[sniplet postads]

All the code linked in the script are linked from the highslide website. If you still have problems comment here, I will help you.