Galleries

Gallery & Lightbox

Simple images and galleries are quickly built up in the TYPO3 system. By default, images are displayed as lightboxes when opened in the Website Base: The image is enlarged while the background is 'darkened'. Just try it out and click on one of the images. To hide the lightbox, either click anywhere next to the displayed image or use the X in the upper right corner.

Whether an image is clickable and thus can be enlarged is decided individually in the image settings in the backend.

First image for demo content: Gallery & Lightbox
Second image for demo content: Gallery & Lightbox
Third image for demo content: Gallery & Lightbox

Gallery from Folder Contents

With the gallery element you can easily display images of a folder as a gallery.

Image: Avenue of palm trees
Image: Palm trees from below with cloudy sky
Image: Mountain, forest and clouds
Image: Close-up of grass with mountain and clouds in the background
Image: Cloudy mountain peak
Image: Tree in sunlight with lake and sky in the background
Image: Sandy beach with palm trees, boats and a house
Image: Water turtle in a water basin
Image: Small, wooded island in the sea
Panoramic image: City, mountains and forest
Panoramic image: mountains and forest

Preview Images dynamically scalable

All preview images are automatically scaled down to the set size. The default size of 128 pixels can be overwritten directly in the content element.

Image: Avenue of palm trees
Image: Palm trees from below with cloudy sky
Image: Mountain, forest and clouds
Image: Close-up of grass with mountain and clouds in the background
Image: Cloudy mountain peak
Image: Tree in sunlight with lake and sky in the background
Image: Sandy beach with palm trees, boats and a house
Image: Water turtle in a water basin
Image: Small, wooded island in the sea
Panoramic image: City, mountains and forest
Panoramic image: mountains and forest

Slider

Slider as a Header

Sliders can be placed as header element (as on this page) as well as within the page. The slider in the header of this page has two sliders with a dark overlay and text. It is possible to create a slider with only one slide, in which case only one image is visible.

Slider with Auto Height and Navigation dots

First image for demo content: Slider with automatic height and navigation points
Second image for demo content: Slider with automatic height and navigation points
Third image for demo content: Slider with automatic height and navigation points

Slider with Medium Height

First image for demo content: Slider with medium height
Second image for demo content: Slider with medium height
Third image for demo content: Slider with medium height
Fourth image for demo content: Slider with medium height

Slider with Low Height

First image for demo content: Slider with low height
Second image for demo content: Slider with low height
Third image for demo content: Slider with low height
Fourth image for demo content: Slider with low height