Highslide JS API Reference

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

Object: hs

Variables

Name Requires Type Default Inline Short description Example
align positioning string Yes Position of the full image in the client, either 'auto' or 'center'. More... Example
allowHeightReduction html, autosize boolean true Yes See hs.allowWidthReduction.
allowMultipleInstances multiple boolean true Allow more than one popup expander to be open at the same time. More... Example
allowSimultaneousLoading boolean false Allow multiple popups to be opened at the same time More... Example
allowSizeReduction autosize boolean true Yes Allow the image to shrink to fit a small viewport. More... Example
allowWidthReduction html, autosize boolean false Yes Allow HTML popups to shrink to fit the width of the browser window. More... Example
anchor positioning string Yes Which corner or side of the thumbnail the popup should be anchored to. More... Example
autoplay slideshow boolean null Yes Inline option to start running a slideshow from a thumbnail. Example
blockRightClick boolean false Block right clicking and context menu on the full size image. More... Example
cacheAjax ajax boolean true Yes Cache the contents of AJAX popup for instant display. More... Example
captionEval overlays string null Yes An expression to be evaluated into the caption text. More... Example
captionId overlays string null Yes The id of the element to be cloned to an image caption. More... Example
captionOverlay overlays object Yes Overlay options for the caption, as listed under hs.registerOverlay. More... Example
captionText overlays string null A text to use in the caption. More... Example
contentId html string null Yes The id of the HTML element containing the content for HTML popups. More... Example
creditsHref overlays string The hyperlink reference for the credits label.
creditsPosition overlays string top left Yes The position of the credits relative to the popup. More...
creditsTarget string _self The target of the credits link More...
dimmingDuration transitions integer 50 The duration in milliseconds of the fading in and out of the background dimming effect. More... Example
dimmingGeckoFix transitions boolean false Fix Gecko/Mac bug that causes problems with dimming and Flash. More... Example
dimmingOpacity transitions float 0 Yes A float between 0 and 1 defining the opacity of a dimmed page background More... Example
dragByHeading overlays boolean true Yes Allow the image or HTML popup to be dragged by it's heading. Example
dragSensitivity dragging int 5 How many pixels to drag the full image before it starts moving. More... Example
dynamicallyUpdateAnchors slideshow true Allow Highslide to update the anchors collection automatically after the DOM has changed. More...
easing string easeInQuad Yes Sets the style of the expand/contract effect. More... Example
easingClose string inherited from hs.easing Yes The easing when closing the expander. See hs.easing.
enableKeyListener navigation boolean true Listen for keystrokes like left and right arrow to control Highslide. More... Example
expandCursor string 'zoomin.cur' The filename of the cursor that indicates zoom in on the thumbnails. More...
expandDuration integer 250 Defines in milliseconds how long the zoom in effect should take.
fadeInOut boolean false Yes Add a fading effect to the regular expand/contract effect. Example
flushImgSize boolean false Flush IE's cashed image width and height after an image is physically resized. More... Example
forceAjaxReload ajax boolean false IE-specific option to force Ajax-loaded content to be reloaded from the server on each popup opening More...
fullExpandOpacity overlays, autosize float 1 A float between 0 and 1 giving the opacity of the full expand label
fullExpandPosition overlays, autosize string bottom right The position of the full expand label relative to the image. More...
graphicsDir string The path to the directory where your graphics are. More... Example
headingEval overlays string null Yes An expression to be evaluated into the heading text. More... Example
headingId overlays string null Yes The id of the element to be cloned to an image heading. More... Example
headingOverlay overlays object Yes Overlay options for the heading, as listed under hs.registerOverlay. More... Example
headingText overlays string null Yes A text to use in the heading. More... Example
height html integer undefined Yes Sets the pixel height of the HTML expander. More...
lang object The object containing language strings for localisation. More... Example
loadingOpacity float 0.75 The opacity of the loading label.
maincontentEval inline string null Yes An expression to be evaluated into the main content while using self rendering content wrapper. More... Example
maincontentId inline string null Yes The id of an element to open in a HTML expander using self rendering content wrapper. More... Example
maincontentText inline string null Yes A text to use in a HTML popup when using self rendering content wrapper. More... Example
marginBottom integer 15 See hs.marginLeft.
marginLeft integer 15 The expanded image or HTML content never exceeds this left margin on the page. More... Example
marginRight integer 15 See hs.marginLeft.
marginTop integer 15 See hs.marginLeft.
maxHeight integer null Yes Pixel value for the maximum height of the expanded content, see hs.maxWidth.
maxWidth integer null Yes Pixel width for the maximum width of the expanded image. More... Example
minHeight integer 200 Yes Pixel value for the minimum height of the expanded content, see hs.minWidth.
minWidth integer 200 Yes Pixel value for the minimum width of the expanded image. More... Example
numberOfImagesToPreload preloading integer 5 Highslide by default preloads the first 5 images in your page. More... Example
numberPosition overlays, slideshow string null Yes Where to inject a text showing the number of the current image in a sequence. More... Example
objectHeight html integer null Yes Specifies the height of an included iframe or Flash movie. More... Example
objectLoadTime html string Yes Display an iframe or Flash object before or after the animation. More... Example
objectType html string null Yes One of 'ajax', 'iframe' or 'swf'. Defines how you want to display the link target. More... Example
objectWidth html integer null Yes The width of extended content like Flash. More...
openerTagNames navigation, preloading or ajax array ["a"] Which elements should Highslide iterate to look for thumbnail openers. More... Example
outlinesDir outlines string outlines/ The directory within the hs.graphicsDir where the outline pngs are found. More... Example
outlineStartOffset outlines integer 3 When hs.outlineWhileAnimating is true, this defines the starting pixel offset. More...
outlineType outlines string Yes Defines a graphic outline to display around the expanded content. More... Example
outlineWhileAnimating outlines boolean 2 Yes Show the graphic outline during the expansion and contraction of the popup. More... Example
overrides array Defines which settings of the hs object that will be inherited by the single hs.Expander. More... Example
padToMinWidth autosize boolean false On narrow images, pad the width of the expander to the minWidth to make room for the caption. More... Example
pageOrigin Object null Yes An object containing x and y values for the page coordinates where the animation should begin. More... Example
preserveContent html boolean true Yes Preserve changes made to the content and position of HTML content. More...
restoreCursor string 'zoomout.cur' The filename of the cursor that indicates zoom out on the expanded image. More...
restoreDuration integer 250 Equivalent to hs.expandDuration but applies to the closing of the expander.
showCredits overlays boolean true Whether to show a "Powered by..." label in the upper left corner. More... Example
skin html or slideshow object A collection of HTML to be inserted automatically. More... Example
slideshowGroup mixed null Yes Places your popups into groups for Next and Previous navigation. More... Example
src string undefined Yes An alternative way to define the URL of the image or HTML content. More... Example
swfOptions flash object Yes Advanced options when showing Flash content using hs.contentType = "swf". More... Example
targetX positioning string null Yes Positions the expanded image or HTML content exactly above a given element on your page. More... Example
targetY positioning string null Yes See hs.targetX.
thumbnailId string null Defines the id of a graphic to expand the image from More... Example
transitionDuration transitions integer 500 Defines in milliseconds how long the transition effect should take. More...
transitions transitions array [] Yes Define transitions other than the default zoom in and out More... Example
useBox autosize boolean false Yes Use a constraining box so that the borders, captions etc. don't change size from image to image. More... Example
width html integer undefined Yes Sets the pixel width of the HTML expander, or the width of the constraining box for images. More... Example
wrapperClassName string null Yes A specific CSS class for the wrapping div to enhance CSS control. More... Example
zIndexCounter integer 1001 Adjust the z-index to other elements on your page. More...

Functions

Name Requires Returns Default Inline Short description Example
addSlideshow slideshow void Add a slideshow where images are grouped and given a common control bar. More... Example
close boolean Close an expander given by a containing element. More... Example
closeId Deprecated alias of hs.close.
expand boolean The function used to open an image popup inline. More... Example
getExpander hs.Expander Get a hs.Expander object by id, by a DOM element or get the active expander. More... Example
htmlExpand html boolean Open a HTML expander from the onclick attribute of an element. More...
isUnobtrusiveAnchor unobtrusive string Determine whether the given element is an unobtrusively marked up Highslide anchor. More... Example
next navigation boolean Displays the next image or HTML content. More... Example
previous navigation boolean Displays the previous image or HTML content. More...
registerOverlay overlays void Apply custom overlays to image or HTML expanders. More... Example
stripItemFormatter slideshow, thumbstrip string Allows specific formatting of each item in a thumbstrip. More... Example
updateAnchors object Update the internal array of opening anchors. More...

Events

Name Requires Returns Default Inline Short description Example
onActivate events void Fires after the hs.container has been generated More... Example
onDimmerClick events, transitions boolean Fires when the user clicks the dimmed background. More... Example
onKeyDown navigation, events bool Fires when at least one expander is open and a key is pressed. More... Example
onSetClickEvent events, unobtrusive boolean Fires when the onclick event is set on an element in unobtrusive mode. More... Example

Object: hs.Expander

Variables

Name Requires Type Default Inline Short description Example
a DOMElement The anchor that opened the expander. More... Example
caption overlays DOMElement A reference to the div containing the caption. More... Example
custom mixed undefined A custom object that is passed to the hs.Expander from the hs.expander function. More... Example
heading overlays DOMElement A reference to the div containing the heading. More... Example
thumb DOMElement The thumbnail image, if any, that was clicked to open the expander. More... Example

Functions

Name Requires Returns Default Inline Short description Example
close void Close the current hs.Expander. More... Example
createOverlay overlays void Create a custom overlay for a single expander instance More... Example
focus void Brings the current expander to the front. Example
moveTo dragging void Moves the popup to a given page position More...
reflow html, autosize, positioning void Reflows and recalculates the size of a HTML expander after the content is changed dynamically. More... Example
resizeTo dragging void Resizes the popup to a given width and height. More...

Events

Name Requires Returns Default Inline Short description Example
onAfterClose events void Fires after the expander has closed, right before the hs.Expander object is deleted.
onAfterExpand events void Fires after the image or HTML has fully expanded and the optional caption is in place.
onAfterGetCaption events, overlays void Fires after the caption is grabbed. More... Example
onAfterGetContent events, html void Fires after the HTML content is grabbed. More... Example
onAfterGetHeading events, overlays void Fires after the heading is grabbed. More...
onBeforeClose events boolean Fires before the expander closes. More... Example
onBeforeExpand events void Fires just before the epanding animation starts. More...
onBeforeGetCaption events, overlays boolean Fires before the caption is grabbed. More...
onBeforeGetContent events, html boolean Fires before the HTML content is grabbed. More...
onBeforeGetHeading events, overlays boolean Fires before the heading is grabbed. More...
onBlur events, multiple void Fires when another expander is brought to the front and the current expander looses focus.
onCreateFullExpand events, overlays, autosize boolean Fires after the full-expand label is created, but before it is made visible. More...
onCreateOverlay events, overlays bool Fires before the overlay is added to a single hs.Expander obect. More... Example
onDoFullExpand events, overlays, autosize boolean Fires after the full-expand icon is clicked, but before any actions are taken. More...
onDrag events, dragging boolean Fires repeatedly during move and resize. More... Example
onDrop events, dragging boolean Fires after move or resize. More...
onFocus events void Fires when an expander is brought to the front.
onHideLoading events void Fires when the loading label is hidden. More...
onImageClick events boolean Fires when the user clicks the full size image. More... Example
onInit events boolean Fires when the thumbnail is clicked and the primary properties of the expander are set. More... Example
onMouseOut events void Fires when the mouse cursor leaves the image or HMTL popup. Example
onMouseOver events void Fires when the mouse cursor enters the image or HMTL popup. Example
onShowLoading events boolean Fires after the loading label is created, but before it is made visible. More...
New