Highslide in Blogger

Stones - click to enlarge

UPDATED JANUARY 14, 2013

This page describes two ways to get single images opened in Highslide JS popups in Blogger:
You can:
1. Store the necessary files on your own server/file host.
or you can:
2. Link to the necessary files stored on my server.

First you need to turn off the default Blogger image popup function.
Settings => Posts and comments => Chose "No" for "Showcase images with Lightbox".

1. Store the necessary files in your own domain/file host

Download Highslide JS from the Highslide JS download page and unzip.
Download this JavaScript file: http://roadrash.no/blogger/highslide.config.js and place it in the highslide folder.
Upload the highslide folder with all its content to your server/file host.
Go to "Layout" and click "Add a Gadget" (click thumb #1 below)
Chose "HTML/JavaScript" from the list (click thumb #2 below)
You will see this window: (click thumb #3 below)
Don’t add a title since we don’t want this Gadget to be visible with title in the page.
Add the below code in the content area.

<!-- Start Highslide stuff -->
<script src="http://XX/highslide/highslide-full.js" type="text/javascript"></script>
<script src="http://XX/highslide/highslide.config.js" type="text/javascript"></script>
<link href="http://XX/highslide/highslide.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://XX/highslide/highslide-ie6.css" />
<![endif]-->
<!-- End Highslide stuff -->

thumb #1

thumb #2

thumb #3

2. Link to the necessary files stored at my server

Go to "Layout" in the menu and click "Add a Gadget" (click thumb #1 above)
Chose "HTML/JavaScript" from the list (click thumb #2 above)
You will see this window: (click thumb #3 above)
Don’t add a title since we don’t want this Gadget to be visible with title in the page.
Add the below code in the content area.

<!-- Start Highslide stuff -->
<script src="http://roadrash.no/hs-support/highslide/highslide-full.min.js" type="text/javascript"></script>
<script src="http://roadrash.no/blogger/highslide.blogger.config.js" type="text/javascript"></script>
<link href="http://roadrash.no/hs-support/highslide/highslide.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://roadrash.no/hs-support/highslide/highslide-ie6.css" />
<![endif]-->
<!-- End Highslide stuff -->

3. Make the Highslide effect available in the Mobile templates

Go to “Templates” in the menu and click the little gear icon below the “Mobile” template. (click thumb #4 above)
Choose “Yes. Show mobile template on mobile devices.” and chose “Custom” in the drop-down menu. Click “Save” (click thumb #5 above)
Click “Edit HTML below the template you are using for your blog. (click thumb #6 above)
Search for HTML1 in the template code. If you already had added another HTML/JavaScript Gadget before the one we added for Highslide you probably need to search for HTML2. Your other HTML/JavaScript Gadget most likely has a title – the one you are searching for now doesn’t. The code you are searching for looks like this (note that the number in the id might be different):
```
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
```
You need to make it available for the mobile template – add the highlighted part:
```
<b:widget id='HTML1' locked='false' mobile='yes' title='' type='HTML'/>
```
Save the template and close.