Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
images
images
images
Basic Slideshow
A basic slideshow requires one image (slide) on each page. You can keep each image in the same relative place on each page, or you can move them between pages. As well, you can add items such as a caption and navigation links. On this page are:
- Basic slideshow
- Basic slideshow with page transitions
- Work-around for an IE6 bug
Template
A better way to get precise alignment of everything is to designate a template page -- say your first slide page. On your template page, go through each object with the Object Editor > Components tab > Page Copy Method and set the status for each object -- include or clone. Copy is the default, and private is useful too -- applying it to text objects will ensure that the text is not copied to new pages. Leave the image as copy, but set the buttons as clones. If you have a banner, background or border, they should probably be includes.
Once you have the template page set to your liking:
Then you should only need to:
A better way to get precise alignment of everything is to designate a template page -- say your first slide page. On your template page, go through each object with the Object Editor > Components tab > Page Copy Method and set the status for each object -- include or clone. Copy is the default, and private is useful too -- applying it to text objects will ensure that the text is not copied to new pages. Leave the image as copy, but set the buttons as clones. If you have a banner, background or border, they should probably be includes.
Once you have the template page set to your liking:
- Open the template page
- Select Page Copy (top toolbar icon)
- Select Paste/Include Page (top toolbar icon)
Then you should only need to:
- rename each page (desirable, but not essential)
- go to the image on each page, open the Geometry Editor Options tab and set a new Image File Path
- go to each button and set a new link (to next or previous page)
Page Transitions
For viewers with Internet Explorer, you can also use page transitions (dissolves, wipes and the like) between pages. (Page Editor > Special Effects tab). Although they work only on Internet Explorer, such is the popularity of IE that 80% of your visitors will see them. Unfortunate users of other browsers will get just the basic show without the transitions -- they suffer no harm.
You can have a transition when the image is first displayed (the In transition) or you can have the transition when the image disappears (the Out transition). As well as that, you can control the duration of each transition. Use transitions cautiously though, as excessive use will annoy your visitors. Pick one effect, use it throughout your show, and keep the duration of the effect as short as you can. There are a large numbers of effects you can use -- experiment until you find one you like. Having chosen an effect, apply it in the same manner to all pages of your slideshow.
There are other effects you can apply with a custom header -- I've picked one of those, a short duration fade, for my modified slide show. This is one I quite like, but is not available on the Special Effects tab. A search on the web will reveal some more of the same category. Google on "filters meta tag".
To incorporate this fade, firstly add this code as a custom header. Or add it to the head of a copy of an existing header.
For viewers with Internet Explorer, you can also use page transitions (dissolves, wipes and the like) between pages. (Page Editor > Special Effects tab). Although they work only on Internet Explorer, such is the popularity of IE that 80% of your visitors will see them. Unfortunate users of other browsers will get just the basic show without the transitions -- they suffer no harm.
You can have a transition when the image is first displayed (the In transition) or you can have the transition when the image disappears (the Out transition). As well as that, you can control the duration of each transition. Use transitions cautiously though, as excessive use will annoy your visitors. Pick one effect, use it throughout your show, and keep the duration of the effect as short as you can. There are a large numbers of effects you can use -- experiment until you find one you like. Having chosen an effect, apply it in the same manner to all pages of your slideshow.
There are other effects you can apply with a custom header -- I've picked one of those, a short duration fade, for my modified slide show. This is one I quite like, but is not available on the Special Effects tab. A search on the web will reveal some more of the same category. Google on "filters meta tag".
To incorporate this fade, firstly add this code as a custom header. Or add it to the head of a copy of an existing header.
Creation
If you include objects like Prev/Next buttons which have links, the links are part of the package. So therefore, you should clone across pages. If you are using button images from an external source (e.g. your local disk), your project will only use one copy of each, regardless of whether you include, clone or copy.
If you are using buttons that you have created from within SiteSpinner, then cloning those buttons will ensure that your project uses only one copy of each. The links will be independent.
If you are are already using copied buttons, you can turn those into clones by changing the geometry for each to be the same (Quick Editor > Outline tab)
If you include objects like Prev/Next buttons which have links, the links are part of the package. So therefore, you should clone across pages. If you are using button images from an external source (e.g. your local disk), your project will only use one copy of each, regardless of whether you include, clone or copy.
If you are using buttons that you have created from within SiteSpinner, then cloning those buttons will ensure that your project uses only one copy of each. The links will be independent.
If you are are already using copied buttons, you can turn those into clones by changing the geometry for each to be the same (Quick Editor > Outline tab)
Alignment
To get the alignment exactly right (and I failed at first in the example above) you can use the snap to grid feature. Or set some tab stops on your workpage, and use the built-in align feature to align the buttons to those tabs.
To get the alignment exactly right (and I failed at first in the example above) you can use the snap to grid feature. Or set some tab stops on your workpage, and use the built-in align feature to align the buttons to those tabs.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Beware of browser crashing bug
There is a bug in IE6 which with page transitions and using certain security conditions will crash the browser. This bug exists in IE6 SP1, but I believe it may have been fixed in SP2. To make it worse, you don't see it in preview -- only when the page is on-line!
A browser crash means that your visitor will likely not return to your site -- and you will get the blame!. Fortunately the fix is simple when you know about it. If you use a page transition of any sort, set the Page Editor > Title, Meta Tags tab and set the Character Set to ANSI. This sets the character set to ANSI for the whole project. This seems to have no disadvantages at all -- it does not increase the size of your pages. If this causes problems, you can instead set the character set via a custom header (Page Editor> Header tab) for any particular page. Pick from either of these lines -- the first one is ANSI, the second is the SiteSpinner default:
There is a bug in IE6 which with page transitions and using certain security conditions will crash the browser. This bug exists in IE6 SP1, but I believe it may have been fixed in SP2. To make it worse, you don't see it in preview -- only when the page is on-line!
A browser crash means that your visitor will likely not return to your site -- and you will get the blame!. Fortunately the fix is simple when you know about it. If you use a page transition of any sort, set the Page Editor > Title, Meta Tags tab and set the Character Set to ANSI. This sets the character set to ANSI for the whole project. This seems to have no disadvantages at all -- it does not increase the size of your pages. If this causes problems, you can instead set the character set via a custom header (Page Editor> Header tab) for any particular page. Pick from either of these lines -- the first one is ANSI, the second is the SiteSpinner default:
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.fade(duration=0.5)">
Secondly set the character set to ANSI. without this change, the header will not work. More details on this setting are in the next section.
Here is a demonstration of the finished slide show with transitions.
Here is a demonstration of the finished slide show with transitions.
What Next?
This basic show is very ordinary. The next step is to place it in an i-frame and it will look a lot better.
The advantage of this technique is that a slide loads only if your viewer wants to see it. So where there are more than about ten slides in a show, this technique is preferable to the mouseovers for the in-page slide shows. The opening page does not need to load a lot of images the viewer may not want to see.
This basic show is very ordinary. The next step is to place it in an i-frame and it will look a lot better.
The advantage of this technique is that a slide loads only if your viewer wants to see it. So where there are more than about ten slides in a show, this technique is preferable to the mouseovers for the in-page slide shows. The opening page does not need to load a lot of images the viewer may not want to see.
Basic slide show
Here is a simple working slideshow with just four slides.
Just by carefully viewing the slideshow you should be able to see what is involved:
Here is a simple working slideshow with just four slides.
Just by carefully viewing the slideshow you should be able to see what is involved:
- A sequence of images, all the same size, and each in the same relative position on each page
- Previous and Next buttons, each with a link to the previous or next page. Mine are text links, but you could just as easily use graphics buttons
- The first page Prev button can loop to the last page or can be a non-link as I have done.
- The last page Next button can loop back to page 1 or can be a non-link as I have done.
- A caption for each image