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.
Step 1:
Go to your blog settings -> Layout -> Edit html.
Copy this code and paste before </head> tag.
<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>
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.
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.
<script type='text/javascript'>fixBloggerImages("s1600-h", "s1600");</script>
If you have problem in inserting the code verify the below video.
All the code linked in the script are linked from the highslide website. If you still have problems comment here, I will help you.
Tip!
For websites you can use the visual Highslide Editor to set up your Highslide installation without writing code.
Written by Sakthi Tharan (tharansakthi)
About Author: A professional blogger, writes on blogging and other various web trends and activities that relates to blogging. His articles are more strategical than being more technical.
Very good sharing this.
nice to be here…. thanks for share
Thank you for sharing this.
How can i make a slideshow with Highslide?
you have to include some config javascript with the code you added before the head tag. Because you can’t add custom class for image inside post.
Most what i read online is trash and copy paste but you definitely add value. Keep it like this.
This weblog appears to recieve a good ammount of visitors. How do you promote it? It gives a nice individual twist on things. I guess having something useful or substantial to talk about is the most important thing.
works perfect! thanks for the simple tutorial.
I actually surely need to think much more in that course and see a few things i can do about that.
You are a talented blogger, and I absolutely enjoy reading your posts.
Hi, I really liked your tutorial, but fr some reason is not working anymore. I checked all the links to the java scripts and the only link not working is the (http://highslide.com/highslide/megik.css) one. where can I get so i ca make this work.
Thanks in advance for your prompt response!
I such as your blog, and also just like the article, and thank you for provide me a great deal of information
You can add the css of your own. You can copy the css code from the following link http://alvistor.com/wp-content/plugins/highslide-integration/highslide/highslide.css.
or else replace the link to this url highslide css
Sakthi! Thank you for this simple tutorial! This is what I was looking for! I have a question though.. I got highslide working, I tried a small test like in the video, works great. But on old posts on my blog it only works for the fist image. Can you give me a hand?
Thanks!!
try to read the source code of the blogger theme. this method automatically inserts highslide class to your image. (if it has anchor tag). If you have difficulty in this ping me back.
There is obviously a lot to know about this. I think you made some nice points in features also.
It is not working in my blog. When i installed it. The picture reside as same. It is not shown as thumbnail, picture showing its original size. please help me via E-mail.
Thank you for the great information in your article. I feel I will come away a little wiser from the content you’ve written here. I am saving this article to my favorites for further study.
Great article! I can’t say the last time I read so much valuable information all in one place. You make strong points that I agree with and comprehend. You’ve done a great job on this.
Are all of these articles written yourself or did you hire a writer?