Concrete5 Whale Galleria
Whale Galleria is a JavaScript image gallery based on JQuery Galleria that simplifies the process of creating image galleries.
Whale Galleria features and options cover most of the gallery customizations you will need for each implementation. Below you will find a summary of all options available.
Features and Options:
- Gallery generator at Dashboard
- Drag & Drop sorting images
- Multiple galleries on a page (see sample here)
- Show Title: Show image title from file Title attribute.
- Show Description: Show image description from file Description attribute.
- Add Link: Add link from image Link attribute
- Thumb Size: Width and Height
- Gallery Size: Width and Height
- Gallery Bg Color
- Image Margin: Since images are scaled to fit the stage container, there might be occations when you need to apply a margin between the image and stage border. This is what this option is for.
- Image Position: Positions the main image inside the stage container. Works like the CSS background-position property, f.ex ‘top right’ or ‘20% 100%’. You can use keywords, percents or pixels. The first value is the horizontal position and the second is the vertical.
- Initial Transition: Defines a different transition to show on the first image. F.ex, if you are using a slide transition, you might want the first image to fade. You can then set this option to ‘fade’.
- Layer Follow: By default, the layer follows the image size on the stage, even if crop is set. This means that the HTML layer will stretch according to the active image. If you want the layer to fill the stage regardless of cropping settings, set this to false.
- Max Scale Ratio: Sets the maximum scale ratio for images. F.ex, if you don’t want Galleria to upscale any images, set this to 1.
- Popup Links: Setting this to true will open any image links in a new window. You can add image links using the longdesc attribute (default) or customize it using data_config
- Preload: Defines how many images Galleria should preload in advance. Please note that this only applies when you are using separate thumbnail files. Galleria always cache all preloaded images. 2: preloads the next 2 images in line, ‘all’: forces Galleria to start preloading all images. This may slow down client. 0: will not preload any images
- Queue: Galleria queues all activation clicks (next/prev & thumbnails). You can see this effect when f.ex clicking “next” fast many times. If you don’t want Galleria to queue, set this to 0. This will make Galleria stall during animations.
- Pause On Interaction: During playback, Galleria will stop the playback if the user presses thumbnails or any other navigational links. If you dont want this behaviour, set this option to false.
- Responsive: This option sets thew Gallery in responsive mode. That means that it will resize the entire container if your CSS is dynamic. In other words, you can add media queries or dynamic proportions in your CSS and the gallery will follow these proportions as the window resizes.
- Show: This defines what image index to show at first.
- show Counter: Set this to false if you do not wish to display the counter.
- Show Info: Set this to false if you do not wish to display the caption.
- Show Imagenav: Set this to false if you do not wish to display the image navigation (next/prev arrows).
- Swipe: Enables a swipe movement for flicking through images on touch devices.
- Thumb Display Order: This defines if the gallery should display the loaded thumbnails in order. All thumbnails are loaded async regardless of this setting, but if you set this to false, it will pop up the thumbnails whenever they are ready, regardless of order.
- Thumb Margin: Same as imageMargin but for thumbnails.
- Transition: The transition that is used when displaying the images.
- Transition Speed: The milliseconds used in the animation when applying the transition. The higher number, the slower transition.
- Wait: Sets how long Galleria should wait when trying to extract measurements, before throwing an error. Set this to true for infinity.