 |
| 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 |
