Using the Animated Image Slideshow and Gallery

The Animated Image Slideshow & Image Gallery add-on module is made up of two separate features for displaying and managing images on your website. This feature is often used by businesses, where the presentation of the product or service is especially important. For example an architect or interior decorator might use it to showcase their portfolio.
This feature makes it easy for website users to browse the images, and also streamlines the management of these images.

Learn more about the benefits of the Image slideshow & gallery
 

Image slideshow

This feature allows the website administrator to easily upload a selection of images that will then rotate one after another on a specified page (often used on the homepage).  The system will resize and optimise the images so that they fit inside the specified area.


 

Key Features

 

• Automatically scales images to appear within the specified size
• Automatically optimises images to load quickly
• Supports an unlimited number of images
• Support for a variety of animated transitions
• Ability for Website administrator to edit delete and reorder images
• Ability for Website administrator to specify a unique link for each image in the animation
• Ability for Website administrator to set Image Tags, Title and description for each image for search engine optimisation
• Ability for Website administrator to set-up multiple Slideshows on the website

Image gallery

This feature allows the website administrator to easily upload a selection of images that will display a grid of smaller thumbnail images.  Users can then click on each image in the grid to view a larger image. Users can then use back and fwd buttons to navigate the images or close and return to the grid.

The system will resize and optimise the images so that they fit inside the specified area.

Key Features

 

• Automatically scales images for the thumbnail and the larger popup image to the specified size
• Automatically optimises images to load quickly
• Supports an unlimited number of images
• Support for a variety of animated transitions
• Ability for Website administrator to edit delete and reorder images
• Ability for Website administrator to set Image Tags, Title and description for each image for search engine optimisation
• Ability for Website administrator to set-up multiple Image galleries on the website
• Supports modal pop-ups and a variety of layouts

Please Note: The image gallery or slideshow is best used on content pages. If placed on a product or category page, it will appear on ALL product or category pages because these pages share a template.
 

Step 1 - Add the component to your page.

If the slideshow was part of your website design, then it should already be built onto your home page. If it wasn't, or you want the slideshow on a different page, you'll need to add the component.
Go into Live Edit mode and navigate to the page you want your slideshow to appear on.
Click the Add component button in the top bar.
Choose the component 'New Animated Image Slideshow/Gallery' and click Add component.



 

Step 2 - Choose if you would like to display a slideshow or a gallery.

There are three options:

• Image Slide Show/ Scrolling Banner - this is the new style slideshow 
• Image Gallery 
• Simple Slideshow - this is the basic old-style slideshow, with no arrows

 

Step 3 - Add your images.

Click the Add image button and select images from a folder. If you're just starting, you'll need to first upload images (top left button) into a folder, then click on the image and click 'Select' (bottom right). You can select multiple images at a time.



A preview of the images added will now appear in boxes. Repeat the above steps for any other images you want to add.



 

Step 4 - Adding captions and link to your images

Click on the box with the image and you can add Alt text, a headline, a caption and link the image to a page on your website.



 

Step 5 - Set the other preferences

There are a number of settings you can choose from to customise the look and function of your slideshow/gallery. Each one has help text to explain it's purpose - we encourage you to try out different options to see which you like best.

 

FAQ

 

How do I make the images sharper?

When you upload images to use in the Animated image banner the website manager will automatically  resize and optimise the images so that they load quickly. When the images are optimised they will lose some visual quality and may look a little blurry. If you would like your images to be "sharper, you will should ensure that the images you upload match the exact dimensions of the animated banner. By doing this you will bypass the optimisation function. When doing this you will need to optimise the images yourself using your own image edit software.

 

Purchase online

To learn more about this add-on product and purchase online, visit our online store.