<script language=Javascript SRC="slideshows.js">
</script>
</script>
Slideshows with Separate Pages
Elsewhere I cover details about including a slideshow in your current page with mouseover style effects. Many of the details relating to those also apply to slide shows based on i-frames. So rather than repeat all that here, I'll concentrate on the differences as they apply to i-frame slideshows. On this page I will cover techniques that involve placing slideshows so that although each slide is on its own separate page, it seems to be displayed within the page:
- Use an i-frame with advance/back in each page
- Use an i-frame with advance/back on the frame
- Use an i-frame with automatic timed advance
- Use an i-frame with page transitions (for IE users only)
Page Transitions
If you want page transitions for IE viewers, include them on the individual pages of the individual slideshow. I have made some suggestions on this here. The code setup and implementation are the same as for the previous slideshow without transitions.
If you want page transitions for IE viewers, include them on the individual pages of the individual slideshow. I have made some suggestions on this here. The code setup and implementation are the same as for the previous slideshow without transitions.
Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
images
images
images
I-frame with in-page Advance
Here is the same slide show as used for the basic slideshow, but this time it is inside an i-frame with a border.
Here is the same slide show as used for the basic slideshow, but this time it is inside an i-frame with a border.
To make this i-frame is quite easy:
- Select Import Foreign Object from the left hand toolbar
- In the dialog box that pops up, click the Page List button
- From the drop-down page list that appears, select the first page of your slideshow. For my slideshow, it is 'Slide1'.
- If you want a border around the slideshow window. check the box, Visible Control
- Click OK
- Position, then resize the i-frame to match the size of the images in your slideshow
Iframe with on-frame advance
This starts off the same way except that my slideshow this time has no Prev Next buttons. OK, I'm cheating -- I just reused the previous slideshow and made it not quite so tall and so hid the Prev and Next links in each slide page that are still there. And I didn't really like the border on the previous I-frame, so removed it this time.
The advantage of this version is that you save yourself a lot of work. You don't need to put buttons on each individual slide page and set up individual links. Here, on the main page you set up only one set of buttons and one set of links, and this is good for all images.
This starts off the same way except that my slideshow this time has no Prev Next buttons. OK, I'm cheating -- I just reused the previous slideshow and made it not quite so tall and so hid the Prev and Next links in each slide page that are still there. And I didn't really like the border on the previous I-frame, so removed it this time.
The advantage of this version is that you save yourself a lot of work. You don't need to put buttons on each individual slide page and set up individual links. Here, on the main page you set up only one set of buttons and one set of links, and this is good for all images.
<script language="Javascript">
Show1=new SlideShow('Slide1,Slide2,Slide3,Slide4');
Show1.target='SlideFrame';
</script>
Show1=new SlideShow('Slide1,Slide2,Slide3,Slide4');
Show1.target='SlideFrame';
</script>
The setup is the same as for the in-page slideshow except that instead of an object list, we now provide a page list as shown. Notice the code line that tells the name of the I-frame to target. If you have only one I-frame, you can omit this line, and the first I-frame on page will be the target. If you have more than one frame, make sure you include a line like this -- otherwise you may be changing the content of the wrong I-frame. I chose to rename the geometry of my I-frame, but it is equally correct to not rename and just use a target name like 'geo917' (as displayed in the foreign object editor image above).
The link URL commands to go back and forward are the same as for the equivalent in-page slideshow:
javascript:Show1.prevslide()
javascript:Show1.nextslide()
javascript:Show1.prevslide()
javascript:Show1.nextslide()
<script language="Javascript">
Show2=new SlideShow('Slide1,Slide2,Slide3,Slide4');
Show2.target='geo2331';
Show2.starttimer('Show2',5);
</script>
Show2=new SlideShow('Slide1,Slide2,Slide3,Slide4');
Show2.target='geo2331';
Show2.starttimer('Show2',5);
</script>
Code for the slideshow
This slideshow relies on the same external Javascript file as used by in-page slideshows. To use this file include this same code object. Use the To Back button to ensure the code publishes at the top of the page.
This slideshow relies on the same external Javascript file as used by in-page slideshows. To use this file include this same code object. Use the To Back button to ensure the code publishes at the top of the page.
Here is the code for this slideshow. Again it is very similar to what has gone before.
There is no need for any timed redirection on the individual slide show pages. All the timing is done from the timer in the Javascript file included earlier in this page.
Similarly, add this code object to set up the slide show:
Timed Slideshow
The links on the start and stop buttons are the same as before:
javascript:Show2.startTimer('Show2',5)
javascript:Show2.stopTimer()
javascript:Show2.startTimer('Show2',5)
javascript:Show2.stopTimer()
<script language="Javascript">
Show3=new SlideShow('Slide1Trans,Slide2Trans,Slide3Trans,Slide4Trans');
Show3.target='geo1014';
</script>
Show3=new SlideShow('Slide1Trans,Slide2Trans,Slide3Trans,Slide4Trans');
Show3.target='geo1014';
</script>
Above is the set-up code -- much the same as before.
Below are the links on the Prev and Next buttons -- again the same as before.
javascript:Show3.prevslide()
javascript:Show3.nextslide()
Below are the links on the Prev and Next buttons -- again the same as before.
javascript:Show3.prevslide()
javascript:Show3.nextslide()