|
|
 |
Rollover Thumbnails
The Rollover Thumbnails module enables you to publish a large image and a series of smaller thumbnail images within the content of a web page. When you rollover the thumbnails, a larger version of the image appears on the page. The images and thumbnails can be set up to suit the style of your website and can appear anywhere on the page.
To add rollover thumbnails to your content page, you first need to add your images in the admin module and then add the content function to your page.
To acces Rollover Thumbnails, go to your website to login
Click on Launch the Admin module
Hover over the Web Pages tab and click on 'Rollover Thumbnails'
Overview of Rollover Thumbnails
 |
|
Group Name:
This is the name for your group of images. This should be relevant to your content. For example, if the images are to appear on a page titled "Test Images", the group name should be TestImages.
Note: The group name should not contain any spaces.
|
|
Image Path:
The location of your images. See using images for information on how to add images. |
|
Sequence:
The order the thumbnail images will appear on the site. For example, a sequence of 10 will appear before a sequence of 20. |
|
Adding new Rollover Thumbnail images
 Click on Add New to add a new thumbnail image.
 Enter the details for your rollover thumbnail.
 |
|
Group Name:
This is the name for your group of images. This should be relevant to your content. For example, if the images are to appear on a page titled "Test Images", the group name should be TestImages.
Note: The group name should not contain any spaces. |
Image Path:
The location of your images. See
using images for information on how to add images. |
|
Sequence:
The order the thumbnail images will appear on the site. For example, a sequence of 10 will appear before a sequence of 20. |
|
 Select Add to add your new Rollover Thumbnail.
Your rollover thumbnail images are now in the admin module. The next step is to add the content function to your page.
Adding the rollover thumbnails to your content page
|
|
Create a page (skip this step if page is already created).
See the
Creating pages section for details.
|
|
|
Add the code for the rollover thumbnail images. The code to display the rollover thumbnails on the page is:
RollOverThumbnails_GroupName_ThumbnailWidth_UseDefaultStyle.
|
RollOverThumbnails:
This is the content function for adding the rollover thumbnails to the page. |
|
GroupName:
Replace this with the name you called your group. For example, TestImages. |
|
ThumbnailWidth:
This is the dimensions of your thumbnail images in pixel size. A pixel size of 80 is recommended. |
|
UseDefaultStyle:
This variable is set to either true or false. If you would like to use the default image styles set up on your website, then set this to true or leave this variable blank
.
Note: This will automatically default to "true" if you do not add this variable. If you would like to use a different style and this is defined in the style sheet of your website, then set this variable to false. This is for more advanced users who familiar with changing and updating style sheets. |
If your group name is TestImage, the thumbnail to be 80x80 pixels, and you are using the default styles for the page, the content function would be:
RollOverThumbnails_TestImage_80 .
Note: You will need to remove the spaces before and after the curly brackets (see example above) for the function to work.
|
|
|
Position the rollover thumbnail code on your page.
If you would like the rollover thumbnails to appear in the middle of the page, you would need to justify the code in the centre of your content. If you would like the rollover thumbnails to appear on the right-hand side of your content, you will need to justify the content function to the right.
Here's an example of how the code would appear if you would like it in the centre of the page:
This is sample content that is to be displayed above the rollover thumbnails function on the page. This could be a paragraph or two of content explaining the images or perhaps as part of a news article on the site.
RollOverThumbnails_TestImage_80
This content is to appear below the rollover thumbnail images. This content could be the rest of your article or more information on the images that are displayed.
To have the Rollover Thumbnails have a Film Strip effect which let you scroll through the thumbnail images witha slide bar please use this code instead of the code listed above.
RollOverFilmStrip_TestImage_80
|
|
|
(Rev: 24/05/2010)
|
