Though blogger has an inbuilt lightbox feature, but you can still opt for better looks, if you want.
Highslide JS is an image, media and gallery viewer written in JavaScript. Main advantages that highslide offeres are, No plugins like Flash or Java required, also Popup blockers are no problem since the content opens within the active browser window, after opening the image, the user can scroll further down or leave the page without closing it.
Highslide is highly compatible for various systems, here's a list.
For including Highslide in your blog,
Follow the steps bellow.
Go to dashboard and click on templates,
On the next screen you see, click on Customise.
find in the code header tag and paste this right above
(replace the highlighted XXX with either www.your-domain.com or username.fileave.com)
Here is the code for including the feature.
<!-- Start Highslide code -->
<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 code -->
Once included
The final result is nice,
Clicking on the image will open a lightbox, so that you can view the images nicely
This is how, you can
.png)
.png)