Highslide for single images in Blogger

2011-06-24T20:36:00.003+02:00

Stones - click to enlarge

First you need to have somewhere to store the highslide files – either your own domain or a file host. You can’t use any type of file host because Highslide needs to access the content of the folder in a special way. We know this file host works well: http://www.fileave.com/

Download Highslide from the Highslide download page and unzip.

If you have your own domain:
Open highslide.css and highslide-ie.css in a text editor (do not use Word or smiliar! Notepad is fine) and change all paths for the graphics to full paths.
Example:

a.highslide-full-expand {
   background: url(graphics/fullexpand.gif) no-repeat;
   display: block;
   margin: 0 10px 10px 0;
   width: 34px;
   height: 34px;
}

Change to (replace your-domain.com with the name of your domain):

a.highslide-full-expand {
   background: url(http://www.your-domain.com/highslide/graphics/fullexpand.gif) no-repeat;
   display: block;
   margin: 0 10px 10px 0;
   width: 34px;
   height: 34px;
}

Do the same for all graphic files in both CSS files.
Upload the highslide folder to the root of your domain.

If you are going to use fileave.com:
Create an account at fileave.com, log in and create the highslide folder. The url for this folder is http://your-user-name.fileave.com/highslide/
Open highslide.css and highslide-ie.css in a text editor (do not use Word or smiliar! Notepad is fine) and change all paths for the graphics to full paths.
Example:

a.highslide-full-expand {
   background: url(graphics/fullexpand.gif) no-repeat;
   display: block;
   margin: 0 10px 10px 0;
   width: 34px;
   height: 34px;
}

Change to (replace your-user-name with your fileave user name):

a.highslide-full-expand {
   background: url(http://username.fileave.com/highslide/graphics/fullexpand.gif) no-repeat;
   display: block;
   margin: 0 10px 10px 0;
   width: 34px;
   height: 34px;
}

Do the same for all graphic files in both CSS files.
Upload all files and folders to the highslide folder at fileave.com

Go to your Blogger Dashboard => Design => Edit HTML => find </head> in the code and paste this right above (replace the highlighted XXX with either www.your-domain.com or username.fileave.com):

<!-- Start Highslide stuff -->
<script src='http://XXX/highslide/highslide-full.js' type='text/javascript'/></script>
<link href='http://XXX/highslide/highslide.css' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://XXX/highslide/highslide-ie6.css" />
<![endif]-->
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://XXX/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.dimmingOpacity = 0.65;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;

// close button
hs.registerOverlay({
    html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
    position: 'top right',
    fade: 2 // fading the semi-transparent overlay looks bad in IE
});

hs.isUnobtrusiveAnchor = function(el) {
    if (el.href && /\.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
        el.className = 'highslide'; // for the zoom-in cursor
        el.title = 'Click to enlarge'; // for title
        return 'image';
    }
};
//]]>
</script>
<!-- End Highslide stuff -->

That’s it – now all the images will automatically open in a Highslide popup.

Water drop - click to enlarge

Highslide in Blogger

Highslide for single images in Blogger