Search the Highslide website
Close

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.
Janos, Budapest
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!
Gary, UK
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.
Sean Dempsey
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!
Mark Reid
Director, Three Ravens Ltd
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

Highslide JS
Highslide JS
This instance uses graphic outlines to create a rounded border with a drop shadow. Full HTML captions can be assigned to each image, and a full HTML controlbar is created using custom overlays. This is a good combination for slideshows.
Highslide JS
You can add a caption below the expanded image. Use CSS to style the borders and captions. This image also has a Mac-style close button overlaid in the top right corner.
Highslide JS

Caption on the right

You can open more than one image at a time, and arrange them on your screen by dragging them around. There are also specific CSS-classes for a blurred image. Notice how these borders change color when you open another image.
Highslide JS
The images by default try to expand equally in all directions from the thumbnails, but you can also position them in the center like this case. Or you can for instance specify a 200px left margin to keep your menu visible, or anchor the image to one corner of the thumbnail.
Highslide JS

With Gallery

Highslide JS
Caption for the first image.
Highslide JS
Caption for the second image.
Highslide JS
Caption for the third image.

With HTML

HTML content

Full HTML content

This example uses the htmlExpand method to display full HTML content in the expander. The width of the expanding div is set to 300px, 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.
Scrolling HTML content
Powered by Highslide JS
AJAX content
Dynamic AJAX content
Content in iframe
Close
Powered by Highslide JS
Iframe with form
Display flash
Close
You need to upgrade your Flash Player

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

Creative Commons 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?

What is a commercial website?

A commercial website is a website which purpose is generating revenue or cash flow of any type, and that isn't under a non-profit organization. So if you're selling a product, selling advertisement, selling a service or just marketing a commercial business, your site is commercial. A company website is also commercial even if it doesn't sell anything, as it's purpose is to front a commercial company.

What is a single website?

A single website is defined as a collection of web pages that serve a single entity. So for instance if you have a subdomain defined as customer.xyz.com and www.xyz.com we would consider this a single web site and you can have any number of subdomains. The only exception to this is if you are hosting a web application or websites where the subdomain is providing customer specific data. This would require a commercial unlimited license.
The unlimited permission entitles you to use all future versions of Highslide on all sites you develop in the future, for yourself or your customers, at no further charge. For any questions please contact the author.
Donate 		Buy now Buy now

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.

Implementations

These are some third party sites offering plugins and other implementations of Highslide into other systems. If you know a plugin that's not in the list, please send me an email through the "Contact" link in the main menu. Some of these implementations use old versions of Highslide, so you should upgrade to the latest version before you use them in a production environment.

System Name Comment
ASP.NET 2.0+ Highslide JS .NET Makes implementing Highslide in ASP.NET extremely easy.
BakeSale Highslide for BakeSale Highslide for shoppping chart product photos
Coppermine Highslide for Coppermine Integrates Highslide into Gallery
DotNetNuke Live Content DotNetNuke module which uses Highslide to overlay pictures, videos, flash, content (text/html), DotNetNuke modules, and external content (iframe)
metaPost Uses Highslide to easily provide stunning Web 2.0 styled effects when publishing content from MetaWeblog enabled clients such as Windows Live Writer to DotNetNuke
ImageFlow ImageFlow with Highslide JS Description for how to combine Highslide JS and the popular ImageFlow script
iWeb Highslide JS in iWeb Instructions for how to install Highslide under iWeb
Joomla Core Design Image Revolution Gallery plugin
Highslide JS for Joomla Supports most Highslide features
JA Highslide Insert all kinds of Highslide contents
JoomSlide Creates thumbnails automatically in your content using HighSlide to expand the image.
My dynamic photo gallery for Joomla Autogenerates thumbs and slides
PHP-Fusion HS Gallery Adds Highslide to the existing gallery in PHP-Fusion
Picasa Highslide Photo Gallery and Slideshow for Picasa Gallery template
SMF Highslide Image Viewer Modification for Simplemachines Forum
Typo3 Highslide Gallery Typo3 extension
vBulletin Highslide for vBulletin attachments Replaces vBulletin's popups with Highslide
Wordpress Highslide Integration Zero-click-solution to zoom images with Highslide JS
Post-Thumb revisited Thumbnail management system
Wordpress Highslide JS Plugin
ZenCart Numinix Highslide Gallery Allows Zen Cart websites to display main and additional product images with Highslide.

Installation

Note: some basic HTML knowledge is required to install Highslide.

  1. Download and extract the zip-archive from the download page.
  2. Run the file index.html, navigate to your favourite setup and view the source.
  3. 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.
  4. If you move the Highslide JS files, remember to change the graphicsDir setting in the Javascript.
For any problems in your installation, first read the FAQ, then ask in the support forum.

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) For this example, your directory structure should look like this: Highslide directory structure

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


3) This is how you mark up the thumbnail
<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>

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
Google Chrome Works
Konqueror 3.5 Works

Showcase

See how developers implemented Highslide on their own sites in this thread.

Translations

Get or share translated GUI strings in this thread.

Get Highslide

Download!

News

Viewing YouTube with Highslide and ImageFlow

Nov 26, 2008 - 8:37am
Finn Rudolph just created a slick Highslide powered application.
YouFlow is a mashup combining the JavaScript effects ImageFlow and Highslide JS with the YouTupe API. With YouFlow you can search all the YouTube videos, browse them with ImageFlow and open them with Highslide.
Comments: (3)

Reorganised CSS

Oct 31, 2008 - 10:30am
In the latest release, 4.0.8, the CSS was reorganised into one singe highslide.css file. This makes it easier for all implementing Highslide, as the relative graphic paths don't have to be updated. The downside is the increased weight, but the file is well commented so removing parts of it should be relatively easy.

The latest release also includes a very clean looking new example with the caption text overlaid on the dark page background.
Comments: (5)

Version 4.0 released

Aug 06, 2008 - 7:07pm
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.
Comments: (2)

Read older news

eXTReMe Tracker