jQuery XPOSE Gallery Documentation

How to integrate a jQuery Gallery in Wordpress

Step 1 - Create the gallery in dreamweaver in an empty html page

Before using the gallery inside Wordpress you must first create it inside Dreamweaver.
Insert a gallery in a page (preferably empty 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 and add your own pictures. All settings will be carried over in Wordpress (this will be shown on a later step).

Step 3 - Move the html code to wordpress

Once you've done editing select the entire HTML code for the gallery and paste it in your Wordpress post or page. You can select the entire gallery by either choosing "Photo gallery" from the inspector or by moving in code view and selecting the code manually.

jQuery Gallery code

After the code is selected simply press CTRL+C (Command+C for MAC) to copy it and CTRL + V (COMMAND + V for MAC) to paste in your Wordpress editor.

Wordpress Edit

Step 4 - Add the script and css links to the code or inside the template

The HTML code won't work on it's own. The Gallery needs to load additional resources in order to function. You can find the necessary linkages in the "head" tag of the document. In order to select and copy the necessary tags you must open code view. Select the lines like in the picture:

Wordpress Edit

Copy the lines to your Wordpress editor, just like the other HTML.

IMPORTANT NOTES :

  • it is important that you insert the new code above the previously copied HTML code;

  • you must add "/" ahead of all the links that you copy, just like in the picture. For example: includes/jQueryGallery/gallery.extend.js becomes /includes/jQueryGallery/gallery.extend.js

  • make sure you don't copy any additional tags that might break the layout of your page;

Wordpress Edit Gallery Files

Step 5 - Copy the Includes folder

The last step is to copy all the dependent files on your server. The XPOSE Gallery keeps all the necessary files inside one single folder called "includes/jQueryGallery". You can find it in the root folder of your Dreamweaver site (the one where you inserted your gallery). Copy the entire "includes" folder inside the root folder of your website.

Wordpress Edit Includes Folder
 
 
 
 

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