jQuery XPOSE Gallery Documentation

How to modify the jQuery XPOSE Gallery images dynamically

Step 1 - Add a new gallery in your website

Before editing the gallery images, you must first create it inside Dreamweaver.
Insert a gallery in your page. If you don't know how follow the steps from here.

Step 2 - Customize the gallery the way you want it

Once inserted in a page, make it look the way you want. Find out here how to customize your XPOSE Gallery.

Step 3 - Open photo gallery inspector

Open the inspector and select "photo gallery" from the editing combo-box (if not selected already). Go to dynamic tab and enable dynamic support by pressing on the dynamic tab and select the 'use dynamic XML' checkbox.

jQuery Gallery Dynamic Tab

Add your own xml file or modify the default one. A link to the sample XML file it's inserted automatically in the textfield. You can find the sample XML in your website inside "includes/jQueryGallery/" folder. It's named after the name you gave to your gallery. You can add in the text field the path to your own XML file. The XML is loaded using AJAX so you'll have to keep in mind any cross-domain restrictions when trying to use XML files from other domains.

Step 4 - The XML structure

The jQuery XPOSE Gallery extension uses the following XML structure for loading images:

" <albums imagesFolder="includes/jQueryGallery/images/jQueryGallery3/">
<album name="Album 1" folder="Album1" description="" thumbnail="albums/1.jpg">
<image src="1.jpg" title="Title 1" description="" url="#" target="_blank" thumbnail="thumb/1.jpg" fullscreen="" tooltip="" lightbox="" />
</album />
</albums>"

The jQuery Gallery XML Structure

Each album tag defines a new album and each image tag defines a new image of an album.

IMPORTANT NOTES :

  • there must be a single "albums" tag per XML document. This tag contains all the albums of the current gallery;

  • the attributes for the albums tag are:

    • name : title of the album;
    • folder : the folder name where the images for this specific album are placed; (the folder must be inside the folder specified at "imagesFolder" attribute of the gallery)
    • description : a small description of the album;
    • thumbnail : path to the image used as thumbnail inside the albums list.
  • the image tag attributes are :

    • src : filename of the image. the image file has to be inside its album folder. Example: image.jpg, image.png;
    • title : image title used by the "caption" component;
    • description : image description used by the "subcaption" component;
    • url : browser navigates to the specified URL when the image is clicked
    • target : specifies the target for the URL;
    • thumbnail : path to the thumbnail image that will be used by the 'thumbgrid' component. If attribute is missing the path specified at 'src' will be used instead;
    • fullscreen : path to the image that will be used by the 'fullscreen' component. If attribute is missing the path specified at 'src' will be used instead;
    • tooltip : path to the image used by the 'tooltip' component. If attribute is missing the path specified at 'src' will be used instead;
    • lightbox : path to the image used by the 'lightbox' component. If attribute is missing the path specified at 'src' will be used instead;

You can add as many image and album tags as you want and you can also modify the xml from PHP.

 
 
 
 

Download JQuery XPOSE Gallery Trial
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6
  • Adobe Dreamweaver CS6

Buy standard Version

JQuery Gallery

$59.99

Buy Pro Version
(with web image management)

JQuery Gallery

$79.99

Get a better dealOffer
Output Compatibility
JQuery SlideShowPlus compatibility