All project content is available for reading, but you need to be a member of the project for Subversion checkout of source code, or to create/modify any information.
Login if you are a member. Apply here to request membership (open to all).

EPiImageGallery Viewer

EPiImageGallery Viewer is a sample user control for rendering EPiImageGallery properties as a slider. It uses jQuery Tools to create the smooth sliding of the thumbnails.

This is a sample user control how to use a EPiImageGallery Property on a page. It uses jQuery Tools to create the slider. Please note that this just one way to use the EPiImageGallery Property. The property provides the images as an image collection so it is easy to show the images the way you want (e.g. as a list, a slideshow etc.). Another example is the EPiImageGalleryGrid user control.

What does it do?

The gallery shows 4 thumbnails and a big view of the first thumbnail. If you click any of the thumbnails the big image will be replaced by the thumbnail being clicked. If you have added an image description, it will be shown below the big image.

If you have more then 4 images in the gallery, you will get a next arrow that lets you scroll to the next 4 thumbnails and so on.

The slide functionality is built using jQuery Tools and is based on this jQuery Tools demo:

Scrollable demo 1 / 11 : Minimal setup for scrollable


Register the user control on the page:

<%@ Register TagPrefix="EPiImage" 
Then add this tag with the PropertyName set to the name of the EPiImageGallery property we want to render:

    runat="server" />