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
SlideshowV5
Popop Gallery
Popup Dynamic (modal)
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
| Name | Use | Value | Help |
|---|
| 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
| Name | Type | Help |
|---|
| 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
Sample
wpSlideshowV2Image
This is the image (slide) which is contained in wpImageList used in the SlideshowV5.
Inherits from:
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| 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:
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.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|
| title | default | | This is an optional field. If this text exists it will appear centered 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
| Name | Type | Help |
|---|
| 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
| Name | Type | Help |
|---|
| 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
| Name | Use | Value | Help |
|---|
| 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) |
