Image Galleries

Overview

Live Delivery Platform's (LDP) Image Gallery Assets feature allows users to easily create and manage image galleries in the OU Campus system. Users can drag images to upload them into the gallery and for each image, provide a title, caption, description, and link. At any time, images can be deleted, added, the information about them edited, and can be dragged into a new order. OU Campus automatically generates thumbnails based on user-defined settings. This type of asset is available among sites within an account unless Lock to Site is selected. By default, users Level 4 and above can create assets, and all user levels have the inherent ability to view the Assets screen and insert an asset on a page.

LDP is an optional module in the OU Campus platform and must be enabled before the Image Gallery and LDP Form assets can be utilized. Once purchased and enabled, the features include the functionality to easily create, edit, and use image galleries and forms as well as the management tools. 

For more information about LDP settings, visit the Assets & LDP page.

With the LDP Image Gallery feature, the XSL and templates will need to be modifed in order to use the XML output of the image gallery and render it properly within the page as the supporting filescripts determine the visual details for the image gallery. Image galleries are provided within an editable region frequently as a page header, but can also be included on a page. Some implementations will include an editable region that only allows for the selection of an asset and some might include options with the new page creation or in page parameters that allow for switching between the styling of one or more image galleries. 

Examples of Image Galleries

Several types of image galleries can be implemented. Below is a brief overview of a few options and keep in mind that each type has various configurable options such as the size of the images, the speed of the transition, the opacity of the shadow, and so on.

Flex Slider

A flex slider image gallery provides an initial large image, such as one that might be seen in a banner or page header, and includes an automated slide show functionality in a carousel fashion to cycle through a series of images. This type of image gallery provides a modern visual effect and can include various navigation elements for the slides and HTML can be included. Options include being able to slide horizontally or vertically, speed, initial delay, pause/play with text, mobile/swipe support, and many others. A linked title is provided below the image, by default. 

For an example of a flex slider type image gallery, visit the Flex Slider page.

Flex Slider Example

Nivo Slider

The nivo-type image gallery includes transistional effects for the presentation such as wipes, fades, box-rain-in, left/right/top/bottom directional-ins, grow-in, CSS theming, etc. 

For an example of a nivo slider image gallery, visit the Nivo Slider page.

Nivo Image Gallery Example

 

PrettyPhoto Thumbnails

A prettyphoto image gallery includes options for embedded media such as video, QuickTime, Flash, YouTube, and iframes. Thumbnails images are included on a page and clickable to a larger image in a lightbox-type format. A mini-slideshow can be included as a navigational element as well as video controls for media, and image links to post social media outlets can be added. 

For an example of an orbit slider image gallery, visit the PrettyPhoto Thumbnails page.

 Pretty Photo Example

FancyBox

A fancybox image gallery provides a series of linked thumbnail images on-page. When clicked, the corresponding larger image of the selected thumbnail is displayed prominently in the center of a screen with the rest of the window in a dimmed, shadow view. This allows a designer to maximize the on-page real estate by including many small thumbnails on a page, without cluttering the page or conflicting with the page layout and design. This also allows for an image to be selected and viewed in much greater detail, and the larger view includes navigational arrows on hover of the image, so the images may be viewed in a slideshow fashion. The title is displayed under the image and the image can be dismissed with the close icon.

For an example of a fancybox image gallery, visit the Fancybox page.

 Fancybox Illustration

BX Slider

The BX Slider is responsive; that is, if the browser is resized, so are the slider images. The slider adapts to any device platform and includes tap/swipe controls. It can use horizontal, vertical, or fade slides. The slides can include images, video, or HTML. Other options include speed settings, start delay, news ticker mode, the inclusion of previous/next controls, among others.

BX Slider

Magnific Popup

The Magnific Popup is a single image responsive lightbox and dialog script. The caption can be aligned and contain HTML. This might include a row of image thumbnail or single image thumbnails, which when selected is provided in a larger view with the shadowed background. In OU Campus, multiple image galleries can be included on the same page, and even in a sidebar region. 

For an example of multiple galleries on the same page, visit the Multiple Galleries page.