Node Package: Image Galleries


A useful component in a variety of situations, the WebPal image gallery node package contains two (2) core gallery nodes with multiple rendering options.

Screen Shots

SldieshowV5 

SldieshowV5
 

SlideshowV5 

SlideshowV5
 

Popop Gallery 

Popop Gallery
 

Popup Dynamic (modal) 

Popup Dynamic (modal)
 

Popup Static 

Popup Static
 



wpSlideshowV5

This is a carousel style slideshow with fixed width thumbnails and an optional auto-play feature.

Where to use this node

Attributes

NameUseValueHelp
name required This unique name is used to identify the slideshow in javascript and html code.
show-auto-play oneof no, yes If set to "yes" images will fade in/out on a timer. In addition controls will appear at the bottom right of the gallery.
width optional Set the width in pixels of all the full size images.
height optional Set the height in pixels of all the full size images.
film-strip-height optional This option will determine the height of the thumbnail images in pixels.
display-timer-ms default 5000 If auto-play is enabled this will determine the interval to fade in/out images. 5000ms = 5 seconds

Sub Nodes

NameTypeHelp
image-list wpImageList A container for all the slides.

Sample

wpImageList

This is a container for all the images (slides) used in Slideshow V5, eventually all gallery nodes will have this image-list node so images can be easily transferred.

Where to use this node

Sub Nodes

NameTypeHelp
slide wpSlideshowV2Image The node to add an image to the slideshow

Sample

wpSlideshowV2Image

This is the image (slide) which is contained in wpImageList used in the SlideshowV5.

Inherits from:

Where to use this node

Attributes

NameUseValueHelp
title optional The caption that will appear under the image.

Sample

wpPopupGallery

This gallery is a tabular thumbnail gallery, meaning it has a series of rows and columns with variable height pictures. On-click a pop-up window appears in 1 of 2 styles:

  1. Static - This is a small pane which has next and previous links at the bottom. The pane is draggable to any visible area on the screen.
  2. Dynamic - This is a modal window with sleek next and previous buttons which appear on hover.

 

Where to use this node

Attributes

NameUseValueHelp
title default This is an optional field. If this text exists it will appear centred above the table of images.
number-of-rows oneof 3, 1, 2, 4, 5 Based on how many images you have you can set the number of rows and columns.
number-of-columns oneof 3, 1, 2, 4, 5 Based on how many images you have you can set the number of rows and columns.
thumb-size default 100 This sets the maximum width of the thumbnail images in pixels.
picture-size default 400 This sets the maximum width of the full-size images in pixels.
popup-style oneof static, dynamic Static - This is a small pane which has next and previous links at the bottom. The pane is draggable to any visible area on the screen. Dynamic - This is a modal window with sleek next and previous buttons which appear on hover.
controls-layout oneof below-image, above-image, both Determines where the links are displayed for moving next and previous (only for static gallery)

Sub Nodes

NameTypeHelp
picture wpPicture The node to add an image to the gallery.

Sample

wpPicture

This is a child node of the Pop-up Gallery node, used to create pictures for your gallery.

Where to use this node

Sub Nodes

NameTypeHelp
title wpStringL A title for the image which appears below the image in the pop-up.
image wpImage The actual image.

Sample

wpImage

The base definition of all images used by Webpal.

Where to use this node

Attributes

NameUseValueHelp
lang oneof any, en, fr, de, es Determines the language of this node
src hide The location and name of the image (not displayed in client)
width hide The width of the image (not displayed in client)
height hide The height of the image (not displayed in client)

More Information

Quick Navigation

| More

 

Search Site