Highslide JS is an open source script offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.It uses modal windows instead of pop-up windows to open larger versions of the thumbnail images. It’s free for non-commercial uses.
Special thanks to the maker of this JavaScript for providing a tutorial for implementation of Single image version of HighSlide into Blogspot Blogs.
Note: This is a easy setup but has one downside , that if the roadrash.no servers go down then it will not work .
Steps to Add it to Blogger:
1.Login to the Blogger account.
2. Now Go to Design > Edit HTML.
There is one problem with Blogger that first time this code will work but if you click Edit then you save it ,then it stops working,Therefore make sure you keep this code handy & whenever you want to add new stuff remove the code present and copy this again(then it starts working).
3.Now search for the </head> tag and paste the following code just Above/Before it.
<script src='http://www.roadrash.no/hs-support/highslide/highslide-full.js' type='text/javascript'></script>
<link href='http://www.roadrash.no/hs-support/highslide/highslide.css' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]-->
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://www.roadrash.no/hs-support/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';
}
};
if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {
new hs.Outline('rounded-white');
new hs.Outline('glossy-dark');
});
// The gallery example on the front page
var galleryOptions = {
slideshowGroup: 'gallery',
wrapperClassName: 'dark',
//outlineType: 'glossy-dark',
dimmingOpacity: 0.8,
align: 'center',
transitions: ['expand', 'crossfade'],
fadeInOut: true,
wrapperClassName: 'borderless floating-caption',
marginLeft: 100,
marginBottom: 80,
numberPosition: 'caption'
};
if (hs.addSlideshow) hs.addSlideshow({
slideshowGroup: 'gallery',
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
hs.Expander.prototype.onInit = function() {
hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;
}
// focus the name field
hs.Expander.prototype.onAfterExpand = function() {
if (this.a.id == 'contactAnchor') {
var iframe = window.frames[this.iframe.name],
doc = iframe.document;
if (doc.getElementById("theForm")) {
doc.getElementById("theForm").elements["name"].focus();
}
}
}
//]]>
</script>
<style type='text/css'>
pre {
background: white;
padding: 5px;
font-size: 10.9px;
}
</style> 2.Go to the Post/Page you want to add Highslide JS and then go to Edit HTML tab .
3.Now copy the code from below and paste it there.
<script src='http://www.roadrash.no/hs-support/highslide/highslide-full.js' type='text/javascript'></script>
<link href='http://www.roadrash.no/hs-support/highslide/highslide.css' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]-->
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://www.roadrash.no/hs-support/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';
}
};
if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {
new hs.Outline('rounded-white');
new hs.Outline('glossy-dark');
});
// The gallery example on the front page
var galleryOptions = {
slideshowGroup: 'gallery',
wrapperClassName: 'dark',
//outlineType: 'glossy-dark',
dimmingOpacity: 0.8,
align: 'center',
transitions: ['expand', 'crossfade'],
fadeInOut: true,
wrapperClassName: 'borderless floating-caption',
marginLeft: 100,
marginBottom: 80,
numberPosition: 'caption'
};
if (hs.addSlideshow) hs.addSlideshow({
slideshowGroup: 'gallery',
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
hs.Expander.prototype.onInit = function() {
hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;
}
// focus the name field
hs.Expander.prototype.onAfterExpand = function() {
if (this.a.id == 'contactAnchor') {
var iframe = window.frames[this.iframe.name],
doc = iframe.document;
if (doc.getElementById("theForm")) {
doc.getElementById("theForm").elements["name"].focus();
}
}
}
//]]>
</script>
<style type='text/css'>
pre {
background: white;
padding: 5px;
font-size: 10.9px;
}
</style> There is one problem with Blogger that first time this code will work but if you click Edit then you save it ,then it stops working,Therefore make sure you keep this code handy & whenever you want to add new stuff remove the code present and copy this again(then it starts working).4.Now for adding the images into Highslide JS,just add the image and Highslide will automatically detect it
The tricky part is in Adding other stuff ,Here are some Example Codes:
<div class="thumbwrapper"> Gallery <a class="highslide" href="http://www.highslide.com/samples/gallery3.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery3.thumb.jpg" title="Click to enlarge" /> <a href="http://www.highslide.com/samples/gallery7.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery7.thumb.jpg" title="Click to enlarge" /> </span></a> <a class="highslide" href="http://www.highslide.com/samples/gallery5.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery5.thumb.jpg" title="Click to enlarge" /></a></div> <div class="thumbwrapper"> </div> </div> <div class="textwrapper">
Inline HTML
<a class="highslide" href="#" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white', wrapperClassName: 'draggable-header',
headingText: 'Full HTML content' } )">
HTML content
</a>
<div class="highslide-maincontent">
This example uses the <code>htmlExpand</code> method to display full HTML content in the expander.
The width of the expanding <code>div</code> is set to <code>300px</code>, while the height is omitted
to allow Highslide to decide the best fit.
In the expander you can put all kinds of content, for instance form elements.
</div>
</div>
<div class="textwrapper">
<a class="highslide" href="http://www.highslide.com/include-long.htm" onclick="return hs.htmlExpand(this, { objectType: 'ajax', contentId: 'highslide-html-8' } )">
Scrolling HTML content
</a>
<div class="highslide-html-content" id="highslide-html-8" style="padding: 15px; width: auto;">
<div style="border-bottom: 1px solid silver; height: 20px; padding: 5px;">
<a class="control" href="http://www.blogger.com/post-edit.g?blogID=7521351820124661054&postID=7837002431450655615&from=pencil#" onclick="return hs.close(this)">Close</a>
<a class="highslide-move control" href="http://www.blogger.com/post-edit.g?blogID=7521351820124661054&postID=7837002431450655615&from=pencil#" onclick="return false">Move</a>
</div>
<div class="highslide-body" style="padding: 10px;">
</div>
<div style="border-top: 1px solid silver; text-align: center;">
<small>
Powered by <i>Highslide JS</i>
</small>
</div>
</div>
</div>
<div class="textwrapper">
AJAX
<a class="highslide" href="http://www.highslide.com/include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white',
wrapperClassName: 'draggable-header', objectType: 'ajax' } )">
AJAX content
</a>
</div>
<div class="textwrapper">
AJAX Dynamic
<a class="highslide" href="http://www.highslide.com/ajax.htm#dynamic" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html-ajax',
wrapperClassName: 'highslide-white', outlineType: 'rounded-white',
outlineWhileAnimating: true, objectType: 'ajax', preserveContent: true } )">
Dynamic AJAX content
</a>
</div>
<div class="textwrapper">
IFrame 1
<a class="highslide" href="http://www.highslide.com/include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white',
wrapperClassName: 'draggable-header', objectType: 'iframe' } )">
Iframe content
</a>
</div>
<div class="textwrapper">
IFrame 2
<a class="highslide" href="http://www.highslide.com/form.htm" id="formexample" onclick="return hs.htmlExpand( this, {
objectType: 'iframe', outlineType: 'rounded-white', wrapperClassName: 'highslide-wrapper drag-header',
outlineWhileAnimating: true, preserveContent: false, width: 250 } )">Iframe with form</a>
</div>
5.Now save the Post/Page and see the magic.
Find me on
what do u mean by "just add the image and Highslide will automatically detect it"?
should i just paste the image link after pasting the script? or in a "img src="" tag?
@-HKB-
Just add the image normally that is like this
<a href="large.jpg"><img alt="Highslide JS" src="small.jpg" /></a>
if its a single image then it will be detected automatically without need of rel or class tags as required in other lightbox scripts
sorry the "alt tag" is not necessary
wow.. this is simply amazing, but can u upload all image in drobox and give a link to it instead of by using ur own? since drobox is free with hotlink future isn't ? just suggestion, btw I will test this to see ur amazing work :P
Dropbox has a limit on usage. They ban accounts when the usage cross those limits. The offcial define limit is 10GB/day but they ban very early even before reaching maybe even 500MB/day
I want to add this code for entire my blog for every image. What can i do?