11. Introduction. Introduction

Slideshows are a great way of showcasing yourimages in a stylish and professional way. Byautomatically moving from one image to another,users can see a variety of your work without havingto do anything. Our system couples some excellentslideshow designs with easy-to-use and flexiblefunctionality. In this guide we show you how to:

Convert the main image panel on your homepage into a slideshow. Understand the different styles of slideshowavailable. Create a new section just for a slideshow. Add a slideshow to just about anywhere onyour website. Adjust your slideshow settings, such as thespeed the images move from one to the other orwhether to show the images in a random order, etc.

2. Con2. Convverting the main images on yerting the main images on your home page to a slideshoour home page to a slideshoww

If you would like the main images on your Home page to work as a slideshow, it’s easy to set one up. Firstly,you must ensure that you have more than one image assigned to your home page. This is done in therespective image record by selecting Home pageHome page under the Image setsImage sets field. Tip:Tip: Use similarly shaped imageson your home page, preferably landscapes with virtually identical image sizes. A combination of portraits andlandscapes can really mess the layout up.

Now go to your Home pageHome page section, namely: ContentContent SectionsSections Click editedit against your Home pageHome page record(the pencil icon at the end) Scroll down until you see the fields below Select the Image displaImage display modey mode youwould like, usually HHTML5 (no flash)TML5 (no flash), see 3. below for more information Select an Image stImage style scyle schemeheme SSAAVEVE and then PPrerevievieww.

3. T3. The difhe diffferent Slideshoerent Slideshow stw stylesyles

Image displaImage display modey mode is the type of slideshow you can have. Image stImage style scyle schemeheme is the different styles withinthat type of slideshow. The four Image displaImage display modesy modes are as follows:

StStandard.andard. Ignore this, as it is not really a slideshow in that it randomly changes the main home pageimage each time the user clicks on it or reloads it.

HHTML5 (no flash) slideshoTML5 (no flash) slideshoww. This is the one we generally recommend because it can be viewed onmobile devices such as tablets and mobile phones, see note below. It can also integrate with anyecommerce you may have set up. Select this and then have a look at the different styles available.

SpacegallerSpacegalleryy. This is a slightly different style where the user clicks through a ‘queue’ of imagespresented in a quirky but stylish way. There are no different style options for this.

Flash slideshoFlash slideshoww. The good news is that these are the fanciest and most stylish slideshows which havebeen designed in Adobe Flash. The bad news is that they can’t be viewed on portable devices such as

B3 SLIDESHB3 SLIDESHOOWSWS «cliktips guidecliktips guide»

Great wGreat websites made easyebsites made easy

B3 SlideshoB3 SlideshowswsPPageage 11

tablets or phones. So only use a Flash slideshoFlash slideshoww if you’re sure about this. Also, there is no ecommercefunctionality available with Flash slideshows. See also note below.

Note:Note: For various technical reasons between Apple and Adobe, systems designed in AAdobe Flashdobe Flash do not workon Apple phones/tablets and some other mobile products (portable computers are fine). HHTML5TML5 is the namegiven to the website programming language that is compatible with mobile products.

4. Creating a section just to sho4. Creating a section just to show slideshow slideshowsws

You can also have a dedicated section with its own slideshow. This canbe a really effective way of showcasing your best work and is easy toset up. There are four stages.

StStage I: Create an Image setage I: Create an Image setSo that the system knows which images to apply to your slideshow,you need to set up an Image setImage set. Go to Images/GalleriesImages/Galleries Image setsImage sets Click on NeNeww Enter a name for your own reference, eg Sectionslideshow SSAAVEVE.

StStage II: Aage II: Assign some images to the Image setssign some images to the Image setNow you need to tell the system which images you would like in the slideshow by assigning them to theImage setImage set you have just set up. This is done by going to the respective ImageImage record There is a field calledImage setImage set Click on the blank box and a list of image sets appears Click on your Slideshow image set SSAAVEVE. It may be worth adding a few at this stage and coming back to it later to add some more.

StStage III: Creating the Sectionage III: Creating the SectionYou can have a slideshow just about anywhere in your website (something we cover in the next section), butfor a dedicated slideshow section it is probably best to use a Single pageSingle page section. So go to ContentContent SectionsSections Click on AAdd nedd new sectionw section Select type Single pageSingle page Name it something snappy such as SlideshoSlideshoww andadd some text for the introduction if you want.

StStaavve IVe IV: Creating the slidesho: Creating the slideshow and adding it to the Sectionw and adding it to the SectionTo create the slideshow itself, go to ContentContent Other contentOther content Clickon AAdd content itemdd content item Select type Image / slideshoImage / slideshoww Name it foryour own reference Click on ADD CONTENT IADD CONTENT ITEMTEM At the nextscreen, these are the following fields you need to complete.

Apply to sections.Apply to sections. Select Only shoOnly show on the sections selectedw on the sections selected. SectionsSections. Click on the field and select the Section you have just

set up. PPositionosition. Select the position Main column (botMain column (bottom)tom). You can try

other positions but this is the one we have found to work best inthis context.

Images to displaImages to displayy. Select Image setImage set. Image setImage set. Select the Image setImage set you created for the slideshow. Image modeImage mode and StStyle scyle schemeheme. Select what type of slideshow

you would like, see 3. above. ShoShow slideshow slideshow panels.w panels. You can optionally add/remove any text

you may have entered against the image. ShoShow slideshow slideshow controlsw controls. Likewise for the forward/back controls. SSAAVEVE and PPrerevievieww.

B3 SLIDESHB3 SLIDESHOOWSWS «cliktips guidecliktips guide»

Great wGreat websites made easyebsites made easy

B3 SlideshoB3 SlideshowswsPPageage 22

5. Ha5. Having a slideshoving a slideshow on just about anw on just about any part of yy part of your siteour site

It is also possible to have a slideshow on just about any part of your site. Just follow the same procedures in4. above and select whatever section and position you would like it to appear on. Exact positioning can varyaccording to what type of section you are in and the position chosen, so it’s worth trying out a few. We coverthis in more detail in Cliktips Guide A1 Other ContentCliktips Guide A1 Other Content.

6. A6. Adjusting ydjusting your slideshoour slideshow setw settingstings

6.1 Ho6.1 How to find yw to find your setour settings menutings menu

Using PUsing Prerevieview editw editProbably the easiest way of finding the slideshow settings is by clicking on PPrerevievieww Go to the slideshow inyour preview Click on the grey EditEdit button in the top left corner Click anywhere on your slideshow Apop-up box will appear. Click on Edit other setEdit other settingstings in the bottom right corner This will open up your adminsystem again. Click on the StStylingyling tab at the top Tick on the small box next to Animation optionsAnimation options and you willsee a screen similar to the one below We explain what these do in 6.2 below.

6.2 Amending y6.2 Amending your setour settingstings

Animation timeout.Animation timeout. The time to wait before the imagestarts moving to the next one. To change this, click on editeditand enter a figure in mili-seconds, ms (there are 1,000msto a second).

Animation initial delaAnimation initial delayy.. This relates to your first image only.Here you can set it to last a bit longer than the others.

Animation transition time.Animation transition time. How long the transition takesonce the live image starts to change to the next one.

Stop on hoStop on hovverer.. If you select YYeses then the slideshow willstop when your users hover their mouse over the imagethat is being displayed.

Use kUse keeyboard controls.yboard controls. If you select YYeses then instead ofthe slideshow automatically moving from one image to thenext, your users can use the Left and Right arrow buttonson their keyboard to scroll through them.

RRandomise first image.andomise first image. Randomises the image whichappears first in the slideshow, then proceeds in the sameorder.

RRandomise all imagesandomise all images. Always starts with the same image and then randomises the remainder. Use the SortSortorderorder field in the respective image record to specify the sort order.

B3 SLIDESHB3 SLIDESHOOWSWS «cliktips guidecliktips guide»

Great wGreat websites made easyebsites made easy

B3 SlideshoB3 SlideshowswsPPageage 33