Highslide JS .NET
Highslide JS .NET is a .NET control to encapsulate the functionality of Torstein Honsi’s Highslide JS library. This is an example of it in action (see below for how little code was needed to create this demo page):
Important: Highslide JS is free for non-commercial use. However, if you implement this commercially there is a license fee per domain. More details are available on the official Highslide JS page. If you use this commercially, please don’t forget to support the author!
<%@ Register Assembly="HighslideImage" Namespace="Encosia" TagPrefix="encosia" %>
<encosia:HighslideManager runat="server" OutlineType="RoundedWhite" />
<encosia:HighslideImage runat="server" Caption="Image One"
ImageUrl="Thumbnail-1.jpg" FullImageUrl="Image-1.jpg" />
<encosia:HighslideImage runat="server" Caption="Image Two"
ImageUrl="Thumbnail-2.jpg" FullImageUrl="Image-2.jpg" />
AnchorPosition: Allows you to specify which point on the enlargement will be anchored to the thumbnail. See hs.anchor for more information.
CenterEnlargements: When true, enlargements will be centered within the browser window instead of centered over their thumbnails. Defaults to false.
ControlBar: Enables or disables the control bar on zoomed images. Default control bar images and CSS are embedded in the control. Optionally, the control bar can be customized via CSS, by overriding the controlbar class.
ControlBarPostition: A ControlBarPositionType property, which allows you to specify where the control bar is overlaid on the enlargement. The options are BottomLeft, BottomRight, TopLeft, and TopRight.
ExpandEvent: Allows the enlargement to be triggered by events other than onclick, specifically onmouseover. The default is Click. MouseOver is also valid.
FadeInOut: A boolean which enables a fade effect while the image resizes.
IncludeDefaultCSS: A boolean allowing you to prevent the control from registering any of its default CSS styling. This is useful if you want to provide your own CSS rules to style the Highslide elements. Defaults to true.
MarginLeft: An integer specifying a minimum margin (in pixels) between the left side of an enlargement and the edge of the browser. For more information, see the Highslide JS documentation for hs.marginLeft.
MarginTop: See MarginLeft.
MarginRight: See MarginLeft.
MarginBottom: See MarginLeft.
NumberOfImagesToPreload: An integer value which allows you to control how many full size images the script automatically preloads after a thumbnail is enlarged. Setting this property to 0 will disable preloading.
OutlineType: An OutlineType that determines the outline graphic style for all of the images on the page. Defaults to "RoundedWhite" if not specified.
RenderScriptInPlace: A boolean allowing you to control where the Highslide JS script include is rendered. If true, the script include will be placed exactly where the HighslideManager control is located in your document. If false, the script will be included in the head of the document, as usual.
ShowFullExpandButton: When the full size image is too large to display in the available browser viewport, an enlargement icon normally displays in the bottom right corner. Setting this property to false will cause that icon to have an opacity of 0, effectively hiding it.
HighslideImage extends System.Web.UI.WebControls.Image. All of its standard properties (e.g. ImageURL, Height, Width, etc) remain unchanged and apply to the thumbnail image.
AlternateText: A string specifying the text used for the image’s alt attribute. If this is omitted, then "Thumbnail image for FullImageURL" is used by default.
Caption: A string specifying text to use as a caption on the zoomed image. You can style this with CSS via the .highslide-caption CSS class.
Disabled: When true, no Highslide functionality will be attached to the image. Good for imperatively disabling thumbnails from code-behind.
FullImageURL: A string specifying the URL of the "full" size image that will be displayed when the user clicks to zoom in.
TitleText: A string specifying the text to use for the image’s title attribute.
When using Highslide JS .NET in a content page, the master page’s <head> element must include the runat=”server” attribute. Otherwise, the control is unable to access it to include Highslide’s CSS.
- Updated embedded Highslide version to 4.1.12, which includes several compatibility fixes.
- Updated the base Highslide JS library to v4.1.5.
- Updated the embedded CSS to the latest version bundled with Highslide JS. This fixes the issue with the transparent/blank bar during enlargement if a caption is set.
- A few internal improvements that should make it work more reliably in some situations.
- Added: Support for onmouseover triggering, through a new property called ExpandEvent. Options are Click and MouseOver.
- Added: CenterEnlargements. When true, enlargements will be centered in the browser instead of centered over the thumbnail.
- Added: MarginTop, MarginLeft, MarginBottom, and MarginRight, which mirror the functionality of Highslide’s similarly named settings. For more information, see the documentation for hs.marginLeft.
- Added: AnchorPosition. This property allows you to specify which point on the enlargement will be anchored to the thumbnail. See hs.anchor for more information.
- Added: ShowFullExpandButton. When the full size image is too large to display in the available browser viewport, an enlargement icon normally displays in the bottom right corner. Setting this property to false will cause that icon to have an opacity of 0, effectively hiding it.
- Added: Disabled property. When set to true, no Highslide functionality will be attached to the image. Good for imperatively disabling thumbnails from code-behind.
- Updated embedded Highslide JS script version to 4.1.4.
- Added ControlBarPosition property to the HighslideManager, which allows you to position the enlargement’s control bar in any corner of the image.
- Added several properties (ControlBarPreviousTitle, ControlBarNextTitle, ControlBarMoveTitle, and ControlBarCloseTitle) to control title attributes of links rendered in the control bar. Useful for localization.
- Added IncludeDefaultCSS feature.
- Updated embedded Highslide version to 4.0.7.
- A more descriptive exception is now thrown when the <head> is inaccessible.
- Updated embedded Highslide version to 3.3.17.
- Improved caption rendering, using inline caption divs, instead of using the onclick parameter. This should result in more semantic markup, pairing your captions with your images.
- Added HighslideManager property: NumberOfImagesToPreload. This allows you to control how many images are automatically preloaded.
- Added HighslideManager property: FadeInOut. When true, this fades the enlargement in and out as it’s resizing.
- Added HighslideManager property: RenderScriptInPlace. This allows you to control where on the page the Highslide JS script is inserted in your page.
- Updated download to include a sample site, to make it a little easier to get up and running quickly.
- Updated embedded Highslide version to 3.3.6.
- Cleaned up Alt and Title attribute handling.
- Added TitleText property to HighslideImage.
- Added LinkTarget property to HighslideImage.
- Updated embedded Highslide version to 3.2.10.
- Embedded outlines in the control .dll (you can delete your GraphicsPath!).
- Removed the GraphicsPath property.
- Added support for the control bar.
- Updated embedded Highslide version to 3.1.10.
- Added support for replacing ~ with the current context’s application path in FullImageURL and GraphicsPath.
- Added support for captions on zoomed images, using the Caption property.
- Initial release