Project:HighslideGallery

HighslideGallery

This extension makes use of Highslide JS to create image galleries and youtube video links in the Wiki. Image galleries are enabled by specifying syntax in the caption field of an image link. All images with Highslide enabled are displayed on the page as processed by MediaWiki, with the exception that clicking on the image will open it in a Highslide gallery instead of redirecting to the image informational page. Youtube video links are also supported with the wiki syntax <hsyoutube>, which will display a link to youtube that will open the video in Highslide.

For further information on syntax for images, refer to the MediaWiki Images documentation.

The HighslideGallery/Sandbox page is also available for testing.

Syntax

Image Galleries

There are two ways to enable an image to be a part of a Highslide gallery. The simplest form is to add highslide: to the beginning of the caption field. This will open the image in a Highslide gallery when clicked in page, and will be the only image in its own gallery. To handle this, a custom gallery ID is used to keep the image separate from other Highslide galleries on the page.

Examples:

[[File:image.png|200px|highslide:]]
[[File:image.png|200px|highslide:My recent image]]

The second form is to add multiple images to the same gallery which allows a user to cycle through images. This requires a common gallery ID amongst all of the images which can be done by adding highslide=ID: to the beginning of the caption field. The ID must only contain letters and numbers.

Examples:

[[File::image001.png|200px|left|highslide=50:My first image]]
[[File::image002.png|200px|left|highslide=50:My second image]]
[[File::image003.png|200px|left|highslide=50:My third image]]

Adding additional, seperate galleries just requires a new gallery ID. The main distinction between single images versus multiple images in a gallery is the caption image numbers and PREV and NEXT links for cycling to the next image. Highslide also supports the use of left and right arrow keys to cycle images.

External Images

Images on external sites can be included in a Highslide gallery as well.

Syntax:

{{#hsimg:<id>|<width>|<title>|<url>}}

The parameters are described below.

• id (optional) - Specifies a gallery ID. If this matches an ID used by an internal image, they will all share the same gallery. If this is not set, the image gets a unique ID and is contained within its own gallery.
• width (optional) - Specifies the width to show the image in page. If not defined, the image will be displayed full size.
• title (optional) - Specifies a title for the image to be used in the Highslide caption, as well as the image alt attribute. If this is empty, the caption will revert to the url.
• url (required) - Specifies the URL to the image.

YouTube Links

YouTube videos can also be added and displayed in their own Highslide gallery. Instead of displaying the embedded video player in the page, a link is created to the YouTube video which opens in a Highslide gallery when clicked.

Syntax:

<hsyoutube title="Link text" caption="Caption for the video" autoplay>https://www.youtube.com/watch?v=aHjpOzsQ9YI</hsyoutube>

The URL to the YouTube video can be copied directly from the address bar in the browser. The three options title, caption, and autoplay are optional. If title is set, it becomes the link text. If this attribute is not specified, the default link text "YouTube Video" is used. If autoplay is defined, auto play for the video is enabled (default is disabled).

This is an example sentence to show YouTube links in action. First, check out Lindsey Stirling. Once you are done spending hours following related videos, come back and check out this YouTube Video

Skyrim Video

.