highslide.com Open in urlscan Pro
79.170.80.214  Public Scan

Form analysis
1 forms found in the DOM

http://highslide.com/search.php

<form action="http://highslide.com/search.php" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="007503335131654211227:eq7-xetvple">
    <input type="hidden" name="cof" value="FORID:9">
    <input type="hidden" name="ie" value="UTF-8">
    <input type="text" name="q" size="20" placeholder="" style="background: url(&quot;https://www.google.com/cse/static/images/1x/en/branding.png&quot;) left 9px top 50% no-repeat rgb(255, 255, 255);">
    <input type="submit" name="sa" value="OK">
  </div>
  <input name="siteurl" value="highslide.com/" type="hidden"><input name="ref" value="" type="hidden"><input name="ss" value="" type="hidden">
</form>

Text Content

Search the Highslide website

 * Examples
 * License
 * Implementations
 * Installation
 * Compatibility
 * Download
 * Editor
 * Configurator
 * Barebones samples
 * Changelog
 * Support
 * Tutorial
 * Reference
 * About the author
 * Highcharts





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.
Highslide JS Gallery is a unique way of modern presentation of any kind of
products' pictures. It allows the whole content of web site to be more
attractive and user friendly. Highslide JS is incomparably better alternative to
other well known and rather common lightbox scripts. We recommend Highslide JS
for anyone who wants to shine!
okinet interactive group
The Highslide Editor is freaking outrageous. Just plain awesome. THE best editor
for js libraries I've ever seen (and used). Beats everything. The whole concept
and outlining is so well thought-out. And the fact that the preview is updated
instantaneously is simply outstanding. Given the complexity of Highslide itself
this must have been a tremendous amount of work.
Joachim Scheffer, Germany


WHAT IS HIGHSLIDE JS?

Highslide JS is an image, media and gallery viewer written in JavaScript. These
are some of its advantages:

TIP!

Use the visual Highslide Editor to set up your Highslide installation without
writing code.

 * Quick and elegant looking.
 * No plugins like Flash or Java required.
 * Popup blockers are no problem. The content opens 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.
 * Lots of configuration options and scalability without compromizing on
   simplicity. A component system lets you strip away unused features down to a
   filesize of 10kB.
 * Outstanding, unconditional and free user support for both commercial and
   non-commercial users.
 * Compatibility and safe degrading. If the user has disabled JavaScript or is
   using an old browser, the browser redirects directly to the image itself or
   to a given HTML page.
 * Source code included.




EXAMPLES

HIGHSLIDE JS CORE


This instance uses graphic outlines to create a rounded border with a drop
shadow. Full HTML captions can be assigned to each image.
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.

CAPTION ON THE RIGHT

You can open more than one image at a time, and arrange them on your screen by
dragging them around. The captions can be positioned anywhere relative to the
image.
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.
Previous
left arrow key Next
right arrow key Close Move

WITH GALLERY

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

WITH HTML

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


HTML CONTENT THAT EXCEEDS THE SIZE OF THE PAGE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo
quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium
mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed
enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt
vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus.
Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque
nonummy pretium tellus.

Cras interdum accumsan diam. Nam neque neque, feugiat sed, blandit quis, feugiat
et, magna. Etiam ornare cursus eros. Duis gravida. Integer bibendum. Nulla
nonummy ante eu est. Mauris dapibus quam eget orci. Praesent nec metus eget
mauris sagittis consequat. Cras rutrum. Etiam dictum. Cras placerat orci non
quam. Suspendisse nec nulla sit amet enim ultricies malesuada. Nullam lobortis.
Ut gravida. Morbi hendrerit. Integer pretium euismod mauris. Duis condimentum
sagittis arcu. Integer est. Nulla ante ligula, auctor sit amet, vulputate in,
aliquet in, sem.

Nam auctor elementum dolor. Donec euismod, justo sed convallis blandit, ipsum
erat mattis lectus, vel pharetra neque enim tristique risus. Ut consequat nisi
vel justo. Curabitur in orci vel enim congue cursus. Nam condimentum aliquet
libero. Maecenas nonummy pulvinar est. Suspendisse potenti. Mauris interdum
cursus sem. Integer adipiscing arcu sit amet nunc. Vivamus in est. Praesent
vitae justo. Nullam congue justo eget orci. Pellentesque quam. Etiam dolor. Nunc
ut mi at ante porta dapibus. Sed mi orci, elementum nec, feugiat sed, feugiat
quis, eros. Quisque tincidunt risus et enim. Vestibulum gravida sem at sem
bibendum vehicula. Sed et leo.

Fusce a diam. Morbi non nisl a urna consectetuer tempor. Etiam mollis, lorem vel
luctus malesuada, libero mauris viverra massa, vulputate elementum nunc urna non
felis. Phasellus sed metus. Mauris dapibus eros vitae tortor. Donec rutrum odio.
Nunc ac quam. Suspendisse sapien. Ut mattis tortor eu felis. Ut at ipsum.
Pellentesque varius, ligula vitae sagittis vestibulum, metus mi condimentum
diam, a tincidunt neque nisi eget augue. Nulla facilisi. Mauris bibendum turpis
et elit. Cras vulputate, ligula vitae adipiscing faucibus, est lorem laoreet
diam, non sagittis arcu nisi quis elit. Curabitur commodo arcu vel enim mollis
consequat. Nulla pharetra tortor vel arcu. In rhoncus fermentum ipsum. Nullam
convallis tellus a lacus. Mauris turpis sem, lacinia eu, adipiscing in, tempor
sit amet, lorem.

Donec leo sem, commodo in, bibendum iaculis, euismod vitae, risus. Suspendisse a
erat id urna dapibus varius. Proin facilisis, nisi eget rutrum rutrum, sapien
arcu molestie sem, eget gravida sapien nisi in ante. Aenean sapien. Suspendisse
lobortis, nulla rhoncus scelerisque cursus, neque nunc bibendum nibh, non tempus
eros neque at pede. Ut sapien erat, dignissim ac, auctor in, pellentesque at,
odio. Suspendisse malesuada. Sed turpis. Praesent fermentum odio. Morbi
sagittis, purus eu vestibulum facilisis, dolor enim lacinia dui, vulputate
dapibus lacus tortor at elit. Integer neque. Aenean molestie mollis sapien.
Morbi scelerisque pellentesque nulla. Duis blandit, nunc sed porttitor congue,
eros nisl consectetuer purus, quis elementum leo risus pharetra quam. Nulla
posuere. Morbi et nisi in augue accumsan imperdiet. Cras eget ante ac leo
pretium mollis. Duis convallis rutrum leo.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Morbi augue felis, sollicitudin auctor, pulvinar in, sollicitudin
tincidunt, neque. Vivamus eu mauris. Phasellus interdum sapien nec tortor.
Pellentesque at augue nec diam lacinia egestas. Phasellus bibendum placerat
neque. Fusce at est a purus tincidunt tempor. Vestibulum posuere pretium lectus.
Donec mi ligula, sollicitudin sit amet, tincidunt lobortis, pellentesque eget,
eros. Donec egestas.

Phasellus ullamcorper. Morbi volutpat. Vivamus nonummy condimentum augue. Sed
aliquam sollicitudin odio. Mauris varius magna eu mauris. Nam ut dui. Nullam
mollis, nulla nonummy commodo commodo, enim risus tincidunt tortor, sed
pellentesque massa ante a tortor. Aliquam vitae nulla. Cras convallis urna id
urna. Pellentesque nec orci a metus posuere tempus. Nulla molestie pretium
purus. Maecenas lacinia ante ut erat. In et metus. Ut in nulla dignissim erat
faucibus nonummy. Nullam at velit. Aenean tortor nibh, laoreet in, volutpat eu,
eleifend vitae, ante. Etiam eu neque vitae nisi rutrum tempus.

Vivamus quam arcu, volutpat eu, imperdiet ac, ultrices eu, lacus. Sed non libero
id felis egestas pulvinar. Quisque orci ipsum, fringilla eget, dapibus a,
nonummy sed, purus. Morbi eros. Nunc eget orci. Pellentesque interdum. Maecenas
consectetuer euismod mauris. Aliquam rutrum suscipit quam. Suspendisse vel
metus. Pellentesque enim nibh, volutpat eu, lobortis eu, tristique quis, est.
Aliquam lacinia purus at sem. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Ut purus. Duis auctor sem eget quam.

Morbi pulvinar nisi venenatis lectus. Sed nonummy, dolor ac laoreet mollis,
risus mauris scelerisque urna, eu fermentum tortor risus quis sapien. Sed mattis
molestie mauris. Sed vel nisl. Nullam eu magna. Fusce ligula. Aliquam pede nisi,
nonummy sit amet, lobortis ac, sodales eu, est. Duis at lectus non neque
ultrices porttitor. Cras ipsum sem, iaculis ut, sodales ut, accumsan lacinia,
nunc. Nunc ligula. Curabitur ultrices velit at nibh. Duis in enim. Sed sit amet
arcu ut quam porttitor hendrerit.

Vestibulum id erat eget justo sodales suscipit. Integer viverra dui vitae neque.
Sed vitae sapien. Ut quis enim. Sed pretium posuere erat. Sed eget diam. Nullam
vel enim sit amet est elementum ultrices. Etiam mattis varius nibh. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nullam feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse potenti. Etiam elementum laoreet mauris. Ut rutrum feugiat neque.
Suspendisse viverra gravida nulla. Duis sed enim vitae metus nonummy venenatis.
Curabitur semper rutrum sapien.

Mauris luctus. Aenean elit turpis, volutpat id, facilisis eget, mollis a, est.
Nulla eget elit pellentesque enim hendrerit venenatis. Praesent nunc tellus,
laoreet sit amet, viverra sed, dictum semper, odio. Nunc malesuada. Ut lacinia
euismod nunc. Mauris velit. Maecenas aliquam condimentum tortor. Ut aliquam
velit iaculis velit. Nunc pharetra leo.

Etiam ac massa. Nam condimentum arcu vulputate mauris. Quisque mollis. Maecenas
massa. Phasellus lorem ligula, porttitor quis, auctor et, malesuada vel, nulla.
Aenean eget orci nec odio tristique suscipit. Suspendisse rutrum ipsum mattis
justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Nullam tristique hendrerit velit. Donec magna. Pellentesque
ultricies sagittis eros. Sed convallis posuere orci. Duis sit amet magna luctus
quam hendrerit condimentum. Phasellus fringilla suscipit orci. Fusce urna odio,
luctus at, euismod sed, tempus et, arcu. Praesent tortor dui, suscipit tempus,
faucibus in, imperdiet sed, justo. Nulla auctor imperdiet ligula. Etiam in
mauris. Aenean cursus malesuada nunc. Suspendisse blandit magna non enim.

Phasellus lorem erat, pulvinar eu, auctor in, nonummy quis, risus. Phasellus
dignissim. Sed in est id tellus pellentesque cursus. Vestibulum ac elit. Cras
vel tellus sit amet sem gravida congue. In elementum. Proin accumsan gravida
enim. Duis placerat. Fusce cursus leo id ante. Pellentesque lorem eros,
fermentum id, dictum eget, pretium ut, justo. Phasellus bibendum, diam ut
rhoncus semper, libero metus consequat tortor, sed egestas libero est vitae
diam. Vestibulum vitae est. Nam feugiat fringilla elit. Sed lobortis, justo et
fermentum cursus, ante sapien porttitor tellus, sit amet convallis nisi erat et
ante. Etiam mollis mattis felis. Aliquam sapien. Nam a urna sed ligula luctus
vehicula. In sit amet augue. Vivamus et enim quis ante mattis fermentum.

Aenean molestie molestie sem. Duis consectetuer ullamcorper leo. Duis diam est,
congue ut, interdum vel, vulputate id, mauris. Ut sapien mauris, convallis et,
laoreet non, viverra sit amet, nibh. Etiam pede enim, faucibus rutrum, venenatis
sed, egestas ut, sem. Integer arcu. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Sed iaculis lorem quis mi.
Integer elementum tincidunt metus. Donec rhoncus tristique odio. Curabitur et
diam. Nulla sed felis sit amet massa tempus nonummy. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas
fermentum. Cras vel tortor. Nam at pede ac ligula cursus hendrerit. Phasellus ut
est.

Etiam eget dui. Ut in tortor. Curabitur vel urna quis ipsum euismod imperdiet.
Integer iaculis, tellus vel consectetuer cursus, risus dolor aliquam turpis, ac
bibendum dolor dui eu tortor. Vivamus venenatis. Suspendisse ut lectus. Cras
commodo metus venenatis velit. Proin dictum, risus nec cursus laoreet, metus
urna porttitor sem, eu commodo lacus eros sit amet massa. Ut sit amet erat non
massa molestie suscipit. Vivamus magna turpis, rhoncus et, cursus a, egestas
eget, erat. Curabitur est. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nunc non ipsum nec purus fermentum eleifend.
Fusce sit amet tortor.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Ut leo ipsum, mollis vel, tincidunt et, accumsan in, odio.
Pellentesque risus felis, bibendum sit amet, suscipit a, mollis a, neque. Nulla
porttitor, enim vitae tempus tincidunt, sapien risus suscipit dui, id volutpat
lacus metus vitae pede. Donec euismod. Aliquam elementum dapibus eros. Curabitur
at quam at purus interdum pharetra. Fusce eget quam ut ipsum tincidunt suscipit.
Duis dapibus aliquam arcu. Aenean vel magna luctus nisi fermentum interdum.
Praesent eget pede vitae dui ultrices sodales. Donec quis tellus. Etiam eros
lectus, venenatis at, auctor ac, aliquam ut, urna. In hac habitasse platea
dictumst. Sed magna. Integer blandit malesuada diam. Ut dolor arcu, mollis eu,
fringilla at, placerat non, purus. Proin a elit in ligula varius adipiscing.

Ut consectetuer, tellus sit amet porttitor ultrices, felis turpis faucibus
justo, ut placerat magna pede at metus. Donec eget neque id tellus congue
molestie. In hac habitasse platea dictumst. Etiam venenatis, justo nec cursus
mollis, mi massa tincidunt orci, et rhoncus orci est a neque. Nam eu neque sed
enim ultricies elementum. Fusce eros justo, tempor rhoncus, pellentesque sit
amet, convallis eu, quam. Nullam purus arcu, tempor at, dapibus at, nonummy in,
ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Proin aliquam quam at eros. Phasellus sodales nulla vestibulum
dui.

Nulla malesuada augue non tortor. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec placerat, ligula non dapibus sodales, mauris purus
molestie enim, porttitor cursus augue augue ac arcu. In libero. Morbi quis
lorem. Nulla ac eros. Vivamus vitae diam rutrum tellus gravida dictum. Nullam
mattis, dolor quis malesuada congue, odio orci scelerisque libero, quis aliquet
augue eros vitae sapien. Praesent tempus nisi vitae eros. Morbi tempus dignissim
risus. Nulla placerat risus id ligula. Fusce nec eros. Sed iaculis fermentum
tortor.

Duis vitae purus. Nunc lobortis arcu. Nunc placerat faucibus augue. Mauris non
justo. Cras tristique odio faucibus dolor. Nullam vestibulum semper risus.
Aenean rutrum ultrices est. Ut tempus ipsum. Cras auctor, ante at luctus
dignissim, nunc lacus congue tortor, porttitor sagittis elit ipsum at eros.
Donec suscipit.

Morbi ultrices fringilla lorem. Cras lectus. Ut rutrum felis id enim. Etiam
dapibus dictum purus. Phasellus sed tellus ut dolor imperdiet hendrerit.
Vestibulum ut mi. Nulla porttitor iaculis odio. In adipiscing libero rhoncus
augue. Nulla facilisi. Curabitur elit quam, commodo placerat, consectetuer
vitae, suscipit non, arcu. Curabitur ut massa eu elit bibendum scelerisque. In
turpis mauris, elementum non, adipiscing at, fringilla quis, lorem. Aliquam erat
risus, porta eget, ullamcorper eu, pharetra eu, turpis.

Powered by Highslide JS
AJAX content
Dynamic AJAX content
Iframe content
Iframe with form
Display flash
YouTube w/fade effect


MORE EXAMPLES

 * The Barebones 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 by the MIT-license. This means that you can download
and use our software for free, both commercial or non-commercial, as long as
you’ve included the MIT-license in all copies or substantial portions of the
software





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 Adobe Lightroom The Turning Gate Highslide Gallery Use
Highslide to present your Lightroom galleries. ASP.NET 2.0+ Highslide JS .NET
Makes implementing Highslide in ASP.NET extremely easy. Blogger Using Highslide
in Blogger Tutorial for including Highslide in Blogger Coppermine Highslide for
Coppermine Integrates Highslide into Gallery Drupal Drupal Highslide module A
Drupal module for Highslide Invision Power Board Highslide for IP.Board Jalbum
Jalbum skins Several Jalbum skins use Highslide JS, including Boxer, Matrix,
Profiler and Siteli. Joomla Core Design Image Revolution Gallery plugin
Highslide JS for Joomla Supports most Highslide features JoomSlide Creates
thumbnails automatically in your content using HighSlide to expand the image.
Magento How to install Highslide in Magento Step by step tutorial MaxSite CMS
Highslide for MaxSite CMS MaxSite CMS is popular in Russia, Ukraine and other
countries OpenCart Highslide thumbnail for OpenCart PHPBB PHPBB Attatchment
Zoom/Slideshow Mod Use Highsldie zooming and slideshow functionality for
displaying attachments. 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




INSTALLATION

Note: some basic HTML knowledge is required to install Highslide. For any
problems in your installation, see Highslide support.


ALT. 1: INSTALLATION USING THE EDITOR

The Highslide Editor is a visual tool that lets you configure most of the
numerous Highslide options without writing code, and upload the results directly
to your web server. This is not only a great help for non-developers, it also
saves time for professionals who don't have to read through the API
documentation to get things done. Go to the Editor.


ALT. 2: MANUAL INSTALLATION

 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.


EXAMPLE OF A MANUAL INSTALLATION

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:

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>



EXTRA:

A step by step tutorial for installing under Dreamweaver is available here.






COMPATIBILITY - TESTED WITH:

IE 5.5 - 9.0 Works IE 4.0 Falls back nicely Firefox 1.5+ Works Opera 8.5+ Works
Netscape 7.2 Works Netscape 4.79 Falls back nicely Safari 2.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!







Loading...