Skip to site navigation

Images: Add carousel slideshow


Description

This code sources allows you to create a carousel of images, with or without thumbnail images to the top, right, left or bottom of the main images.

A description of the image will be taken from the title you have given the image.

Layout Compatibility: UCL Corporate Identity v1.0

Browser Compatibility: IE7+, Webkit (Chrome, Safari) and Firefox

Method

  1. Create a Silva Folder containing all the Silva Images for the slideshow
    NB
    all images should have the same dimensions and be either all portrait or all landscape
  2. Create a Silva Document into which you'd like pull: 'Images: Add carousel slideshow'
  3. Open the Silva Document and place the cursor where you wish to display the slideshow
  4. Select 'Images: Add carousel slideshow' from the external sources and click 'add external source' to show:

    Carousel slideshow code source
  5. Click 'get reference...' to browse for the folder of Silva Images you created in the first step above
  6. Add a number '1' in the Filmstrip frame gap
  7. You may now skip all of the other parameters and jump to click 'add external source' and the gallery will display with the default options
  8. However, if you want to use the advanced configuration parameters see below

Advanced Modifications - please read

To control what text gets shown for each image caption, go into the image's 'properties' section, and enter the relevant text into the 'description' field. This text will be shown in the gallery for that image.

Advanced parameters:

Slideshow width: the width of the images

Slideshow height: the height of the images

Filmstrip thumbnail height & width: The filmstrip is the set of thumbnail images appearing alongside or beneath the main gallery, so you can set set the dimensions for these thumbnails here.

Filmstrip position: Where you want these thumbnails to appear in relation to the main image

Filmstrip frame gap: The gap between thumbnails in the filmstrip

Show captions: You can set the title of the image, the name of the editor who uploaded it, and a link to the image alone by setting this to yes. This will appear over the main gallery image.

Title overlay position; Overlay opacity; Show Overlay: Further settings for the main overlay which contains the captions and other image details.

Transition speed: Milliseconds to change an image

Transition interval: Milliseconds of time before an image changes

Navigation theme: The colour of the thumbnail's navigating arrows

Fade panels: Set to choose whether the main image 'panels' fade or simply switch between transitions.

Pause on hover: Choose whether the transitions will pause when the visitor hovers over the main image panel.

Show the panels: You can choose to not show the main panels, and therefore only display the thumbnail images.

Display the filmstrip: Similarly you can choose to not show the main filmstrip thumbnail section.

Frame number to start: Select the number of the image you wish to start the carousel with. Note, this will obviously only work if you give it a valid number that relates to one of your images.

Scale the main images; Scale the filmstrip images: If an image is too big for the main slideshow panel, you can set it to be cropped in order to fit.

New Features for V2:

To activate the new features of the carousel component check the "Custom Descriptions" box and add Silva Documents with image descriptions to the same folder where you keep the images you want the carousel to display - one silva document per image. 

The document id has to be the same as its corresponding image id and suffixed with .description (e.g. image: image01 -> document: image1.description).

Carousel with links

NB Any image without an accompanying description document will be rendered correctly and the overlay will be hidden.

NB' If you would like a link on the image, create the link in the text in the Silva document xxx.description, like in the example

Hide Image Link: Check this box to hide links to the full size image.

Custom Descriptions: Check this box to add custom descriptions to the slides. (See note above).

Overlay Starting Point: Set the position of the overlay in pixels.

Overlay Width: Set the width of the overlay in pixels.

Overlay height: Set the height of the overlay in pixels.

CSS Enhancements:

The overlay panel height is controlled with this CSS rule:

.panel .panel-overlay, .panel .overlay-background {
  height: 60px;
  padding: 0 1em;
}

The height field of the code source overrides any CSS as it follows the GalleryView's convention of injecting style information directly into an HTML element (i.e. its style attribute).


Original jQuery Gallery view code by John Anderson III

Page last modified on 13 aug 13 14:13