This page highlights some features sigplus has to offer. For a more comprehensive demonstration of sigplus features, you can take a look at the test suite.
Looking for responsive layout? Searching for a way to insert the activation tag using a dialog box? Want more control over captions? Help us release the next major version of sigplus by evaluating sigplus 1.5.x beta and sending feedback (including bugs you find) to our This email address is being protected from spambots. You need JavaScript enabled to view it..
Usage examples
Simple image gallery without captions
This example uses the syntax {gallery}birds1{/gallery}. It has no corresponding labels.txt file.
Image gallery with captions
This example uses multilingual labeling, compare how the captions change when switching the site language. The image caption overlay that displays when the mouse hovers over the image can be turned on or off in the administration panel. The example uses the syntax {gallery}birds2{/gallery} and has two labels file, labels.hu-HU.txt for Hungarian and labels.txt for the default language (English in this case).
Simple image gallery with slider
This example uses the syntax {gallery}birds1{/gallery} with the number of columns set to 3. Navigation buttons are shown to let you scroll to images number 4 and 5. You can show or hide small navigation icons at the bottom, navigation buttons that overlay the images as well as text links and page counter text. The gallery has no corresponding labels.txt file.
Image gallery without image cropping
When thumbnail width-to-height ratio does not match image aspect ratio, sigplus normally centers and crops the image before reducing it to thumbnail size. However, it is also possible to show the entire image in the thumbnail without any part being cropped, as illustrated by the following example:
Gallery shown in image carousel
The example below demonstrates how the image carousel engine can accommodate images of various dimensions and loops ad infinitum when the navigation controls Previous or Next are clicked repeatedly. Substitute myfolder with your source folder in the following activation code:
{gallery slider=boxplus.carousel}myfolder{/gallery}
Image gallery with flow layout
Galleries can be shown either with fixed layout using a slider, or with the flexible flow layout. Try resizing the browser window and the images below will wrap into multiple lines just as normal text would.
Image gallery with border
The following example illustrates how to apply custom styling to thumbnails. The gallery activation code is wrapped inside a div element with CSS class example. The CSS class example expands as follows:
div.example ul > li img {
border:thin solid gray !important;
margin:4px !important;
padding:4px !important;
}
If you prefer not to use CSS, you can change border width, style and color, as well as margin and padding directly in the administration back-end.
Image gallery with setting overrides
With configuration setting overrides, it is possible to create an image gallery that differs slightly in appearance from whatever is set in the administration back-end. This example uses the gallery instruction {gallery count=1 width=200 height=250 counter=1 links=0 alignment=right navigation=both orientation=vertical}birds2{/gallery}.
A single image
If you put a relative path to an image file w.r.t. the image base folder in between the activation start and end tags instead of a path to a folder with images inside, you will be shown a single image instead of a gallery of several images. The example used here reads
{gallery width=100 height=100}sigplus/birds2/IMG_0496.jpg{/gallery}
Image gallery on front page
[≥ 1.3] To seize the attention of visitors, you can place an image gallery with transition animation on the site front page. When the visitors move the mouse pointer over the image, the animation stops. The following activation code creates a simple gallery with image transition:
{gallery slider=boxplus.transition animation=3000}images{/gallery}
All photographs in the examples are courtesy of Dániel Péterfi.