Search the Highslide website

Events monitor

Note that writing content here slows down Highslide. This is a consequence of the reporting, not the events themselves.


"Hide covered elements" test

If the "Hide covered elements" option is not checked, this will happen:

  • Selectboxes will show through the popups in IE < 7.
  • Iframes will show through in IE 5 and Opera < 9.
  • Scrollbars will show through in Gecko < 1.8 browsers on Mac (Firefox 2, Camino). This can be seen on the Events monitor above when you enable Events.

Highslide Configurator

Not all examples work until the corresponding feature is checked on the right side and the "Update" button is clicked.

Highslide JS core

1 Highslide JS Basic
2 Highslide JS
Controlbar in custom overlay. Outlines with rounded corners.
3 Highslide JS
You can add a caption below the expanded image. Use CSS to style the borders and captions. This image has no borders except bottom-border: 1px solid white at the image and the caption.
No CSS border. Caption identified as successive "highslide-caption".
4 Highslide JS
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.
CSS class changes when another image is opened.
5 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.
No graphic outline. Center aligned (requires "Advanced positioning").
6 Highslide JS Navigation controls in the caption. Fallback to HTML page (disable JavaScript to check).
7 This is the thumbnail's alt attribute Using the thumbnail's alt attribute as caption text.
8 Highslide JS
Digitalis is a genus of about 20 species of herbaceous perennials, shrubs, and biennials that was traditionally placed in the figwort family Scrophulariaceae. Due to new genetic research, it has now been placed in the much enlarged family Plantaginaceae. The genus is native to Europe, western and central Asia, and northwestern Africa.
(From Wikipedia)
Narrow image with big caption and padToMinWidth. Requires "Autosize".
9 Highslide JS
This is the caption.
Unobtrusive, will not show unless "Unobtrusive" is checked. Successive caption.
10 Highslide JS Non existing image. Loading label keeps showing.

With Gallery

11 Melting ice
Mini gallery under one thumb, with dimming background. Requires "Slideshow" and "Transitions". See here for code.
12 Melting ice
Mini gallery under one thumb with a restraining box, with dimming background. Requires "Slideshow" and "Transitions".


13 Click

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 400px, 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.
Inline HTML content. Move and Resize handles require "Dragging" option.
14 Click Inline HTML content with fade in and out. Requires "Transitions".
15 Click

Full HTML content


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
Big HTML content adjusts to screen size (Requires "Autosize")
16 Click
AJAX loaded content
17 Click Dynamic AJAX content with reflowing of the popup. Shared contentId with the previous one.
18 Click
Resize Powered by Highslide JS
Iframe with legacy objectHeight. "Autosize" causes scrollbars if content is higher than the client height.
19 Click
You need to upgrade your Flash Player
Flash content
20 Click Unobtrusive AJAX with self rendered content wrapper. Requires "Unobtrusive" option.
21 Click Unobtrusive iframe with self rendered content wrapper. Requires "Unobtrusive" option.


Add or remove features and see how it affects the examples and the filesize.

Check all, Uncheck all

Highslide JS


HTML Extension



Warning! This only downloads the JavaScript file needed to run Highslide. In addition, you need graphics and CSS found in the zip-package.