Search the Highslide website
Examples License Installation Compatibility Download Configurator Barebones samples Changelog Support Tutorial Reference About the author Contact
Testimonials
This is the single best usability improvement I've seen in image viewing since the digital age. For instance, the company [XXX] just bought [YYY], for all the whiz-bang, simply cannot (in my opinion) rival the elegant and beautiful, yet powerful simplicity of your creation. I congratulate and thank you sincerely. It is an added bonus that you have made your creation available under such a non-restrictive licence. I hope your usability talent is well-appreciated.
Highslide is an outstanding piece of work, and I’m particularly impressed by how you’ve dealt with issues such as browser compatibility and accessibility without compromising on functionality. I’ve been trying all weekend to find where the limitations are, but you seem to have covered everything, and in an elegant manner too – well done!
Again, I am truly appreciative and impressed by your quality of product, level of support, technical abilities, and willingness to help. It is for all these reasons that I am enamored by your product and customer support. It is also for these reasons that I am purchasing a license for your software.
We've been looking at a way to enhance our ecommerce and photography software for some time, and were lucky enough to stumble upon Highslide JS. Integration was incredibly straight forward, the documentation and examples meant that we could very quickly decide on the best way forward for our own application, and within an hour we had rewritten our own software to include the Highslide JS functionality as standard. We've tested it on several browsers across several platforms and it works perfectly so far, with no hanging around waiting for java applets to install or inconvenient cabfile installations. We would have no hesitation whatsoever in recommending Highslide to anyone who is considering taking a huge leap forward with their image galleries. Excellent work Torstein, thank you!
First of all: this is one of the best javascripts I've ever encountered. Very useful, customizable and rock solid. You are doing a fantastic job, Torstein. (...)
(...) And that's not all ... you're on this forum answering all those questions with such patience. What a saint.
What is Highslide JS?
Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages:
No plugins like Flash or Java required. Popup blockers are no problem. The content expands within the active browser window. Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it. Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.
Examples
Highslide JS core
With Gallery
With HTML
More examples
The Configurator contains more examples, combined with the possibility to make your own customized version of Highslide by adding or removing components. Several articles in the API reference have good live examples.
License
Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. This means you need the author's permission to use Highslide JS on commercial websites.
Non-commercial
Commercial Single Website
Commercial Unlimited
Free
$29
$179
Do you want to use Highslide for a personal website, a school site, your family's photo album or a non-profit organisation? Then you don't need the author's permission, just go on and use Highslide.
If you want to use Highslide for a commercial website, you get the author's permission by filling in the domain name in the "Buy now" page and paying the fee.
What is a single website?
What makes it commercial?
The unlimited permission entitles you to use all future versions of Highslide on all sites you develop in the future, at no further charge. For any questions please contact the author.What is a single website?
What makes it commercial?
Redistribution: You are allowed to distribute Highslide JS with non-commercial packages given that you a) emphasize on your download page that Highslide JS is not free for commercial use, and b) provide a link back to this web page on your download page.
Installation
Download and extract the zip-archive from the download page. Run the file index.html, navigate to your favourite setup and view the source. Change the file to suit your needs, or copy and paste parts of it into your HTML file. If you mess it up, go back to the original file and change it bit by bit. Study the documentation and the API reference for advanced features. If you move the Highslide JS files, remember to change all the
For any problems in your installation, first read the FAQ, then ask in the support forum.
url references in your CSS file, as well as the graphicsDir setting in the Javascript.Example
In this example the zip archive is unzipped to the root of your website. In addition, the CSS code from your favourite example is copied and pasted into a file called highslide.css and placed in the /highslide directory.1) Put this code in the head tag of your HTML page.
<script type="text/javascript"
src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css"
href="/highslide/highslide.css" />
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>
2) This is how you mark up the thumbnail
src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css"
href="/highslide/highslide.css" />
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>
<a href="images/full-image.jpg" class="highslide"
onclick="return hs.expand(this)">
<img src="images/thumbnail.jpg" alt="Highslide JS"
title="Click to enlarge" height="120" width="107" /></a>
onclick="return hs.expand(this)">
<img src="images/thumbnail.jpg" alt="Highslide JS"
title="Click to enlarge" height="120" width="107" /></a>
Compatibility - tested with:
IE 8 beta 1 Works partly, waiting for more stable beta.
IE 5.0 - 7.0 Works
IE 4.0 Falls back nicely
Firefox 1.5 - 3.0 Works
Opera 8.5 - 9.5 Works
Netscape 7.2 Works
Netscape 4.79 Falls back nicely
Safari 2.0 - 3.0 on Mac, 3.0 on Windows Works
Konqueror 3.5 Works
Showcase
See how developers implemented Highslide on their own sites in this thread.
Plugins
Find third party plugins for Highslide into other systems in this thread.
Get Highslide
News
Version 4.0 released
Wed Aug 06, 2008 5:07 pm
Finally version 4.0 is here. As Highslide's complexity is growing, it took me months to write a stable implementation with all the new options like slideshow, crossfade, image map, headings, better overlays and the other things you can see in the Changelog. And of course, if you are afraid Higshlide is becoming bloated, you still have the Configurator to help you strip out the features you don't use.
Translations needed
Fri Jul 25, 2008 1:36 pm
I am working on the documentation on versioin 4.0, and as I go on I fix the last bugs before the final release. I am now aiming for August 1st as the release date. So while documenting the new hs.lang object it struck me that I should ask the community for contributions. The next step will obviously be to let the implementor choose language in the Configurator and in the planned code generator. So hereby I invite all of you non-English speaking users to post your translations.
Version 4.0 beta published
Wed Jun 25, 2008 1:32 pm
I am happy to invite you all to test the first beta for version 4.0. I have set up a test page that shows some of the new stuff. If you study the source code you will get an idea of what new options are available. There is still some way to go before the stable version, but from this demo you know what you can expect, and you can download the file and play with the options.
You are viewing a mobilized version of this site...
View original page here
View comments, Post new