Image Gallery - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

The image gallery is a great way to give visitors one-click access to several graphical images – all neatly presented on the page. It’s ideal for presenting photo-albums, product photo-galleries, image portfolios and more.

 

Due to the ease with which you can edit the script settings (simply by right-clicking and selecting “script properties”) you can easily add more images at a later date, underlining the usefulness of this script as an image album tool.

 

example_image_gallery

 

 

To create your Image Gallery you need to perform two actions to set up this script:

 

1.

Select your images

2.

Change the font settings

 

 

Selecting this script from the list of scripts (how), and clicking the button_widget_wizard_edit_settings button loads the following screen. Note: The images listed here are by way of an example - your list will be empty the first time you load it.

 

window_image_gallery

 

 

Selecting Images

 

Click the button_image_gallery_add_image button to add your first image. This will load the following screen:

 

window_image_gallery_add

 

 

In this screen you need to provide three pieces of information:

 

Select an image file - Browse to your graphic file by clicking the button_application_image_browse button, and then by locating your file and selecting it (by double-clicking). This is of course one of the images that you plan to show in your gallery.

 

 

Image Title – This title will appear when a visitor ‘hovers’ their mouse over the image in the thumbnail gallery, and will also be displayed immediately above the corresponding enlarged image while it is being displayed on screen (i.e. while it is ‘selected’ within the gallery).

 

 

Image Description – This will also be displayed immediately below the corresponding image while it is ‘selected’ within the gallery.

 

 

Having specified your first gallery image, now repeat the image selection process for each of the images you wish to feature in your gallery.

 

Please note, this gallery script displays images at their full size. Therefore, care should be taken to ensure that the width of any image(s) you are using in your page does not exceed the width of the panel into which you are inserting this script. For example, if you add a 1000 pixel wide image to your script, within a main panel only 400 pixels wide, you are likely to experience page layout problems when viewing the image gallery on that page.

 

 

Editing / Deleting entries in the images list - To edit or delete entries in the list of graphics, simply click the “edit” or “delete” links respectively.

 

 

Font Settings

 

With all your chosen images added to the image gallery list, you should now edit your font settings by clicking the button_image_gallery_settings button.

 

The screen that appears will look like this:

 

window_image_gallery_settings

 

 

In this screen you need to set the following six values - If you would prefer, you can of course leave these four values set to the default values.

 

Title Text Font – Select the desired font to be used for your title text from the drop-down list.

 

 

Title Text Font Size – Select the desired font size for your title text from the drop-down list.

 

 

Title Text Color – Click the button_application_image_browse button to launch the color-picker tool from which you can choose the font color for the title text displayed above images when they are selected.

 

 

Description Text Font – Select the desired font to be used for your description text from the drop-down list.

 

 

Description Text Font Size – Select the desired font size for your description text from the drop-down list.

 

 

Description Text Color – Click the button_application_image_browse button to launch the color-picker tool from which you can choose the font color for the description text displayed below images when they are selected.

 

 

Once you have added all of your desired images, and confirmed your font settings, simply click the button_image_gallery_insertbutton to insert the script into your Web page at the cursor-point.

Home  Previous  Next