Levente Hunyadi

Test suite

Slider engines

A great addition to fixed layout is that it opens up the possibility to using sliders. In sigplus, the concept of slider is broad: it ranges from a conventional slider that arranges images on a sliding ribbon through a carousel (or, in other words rotator) where the ribbon is joined at the ends to image transitions where fancy effects can be used to blend one image into the other. The examples illustrate the merits of each of the different engines.

The conventional boxplus slider is the most straightforward slider implementation. Images are arranged in a row or column on a long ribbon and navigation controls let you scroll to the next set of images. With the parameter slider:step, you can control whether navigation buttons Previous and Next slide an entire page or a single preview image at a time. Compare the following two different kinds of usage:

{gallery slider=boxplus.slider rows=1 cols=3}sigplus/sonnabend{/gallery}
{gallery slider=boxplus.slider rows=1 cols=3 slider:step=single}sigplus/sonnabend{/gallery}

The boxplus carousel or rotator engine differs from the conventional slider in two major respects. First, images are not aligned in precomputed box sizes but are arranged compactly next to one another. Second, there is no such notion as first or last image, you can keep clicking the Next control button and return to an image after a while. Notice the difference in positioning: the current image can be positioned to either side or centered within the slider. Finally, slider:edges=blurred makes images fade into the background at the left and/or right edges.

{gallery slider=boxplus.carousel slider:positioning=side slider:edges=blurred}sigplus/sonnabend{/gallery}
{gallery slider=boxplus.carousel slider:positioning=center slider:edges=blurred}sigplus/sonnabend{/gallery}

Combined with the animation parameter, this setup can serve as an eye-catching presentation for a front page.

{gallery animation=4000 slider=boxplus.carousel slider:positioning=center slider:edges=blurred}sigplus/sonnabend{/gallery}

The blur effect near the edges relies on the background color of the innermost container that wraps the gallery activation tag. Here, we artificially apply a background color different from the page's own:

<div style="background-color:black;">
{gallery slider=boxplus.carousel slider:positioning=center slider:edges=blurred}sigplus/sonnabend{/gallery}
</div>

This approach can be used to rectify those cases when sigplus fails to correctly identify the dominant background color (e.g. if only a background image but no background color is set).

Donations in EUR
Donations in USD

This website uses cookies to manage authentication, navigation, and other functions. By using our website, you agree that we can place these types of cookies on your device.

View e-Privacy Directive Documents

You have declined cookies. This decision can be reversed.

You have allowed cookies to be placed on your computer. This decision can be reversed.