Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
images
images
images
To use the js file, include this code object (same as before). Use the To Back button to ensure the code publishes at the top of the page:
Slideshows with I-frames
In-Page Slideshows covers creating a slideshow in a 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 separate, it seems to be displayed within the page:
- In-frame advance: Previous and next buttons on each page in the i-frame
- Main page advance: Previous and next buttons on the main page
- Automatic timed advance: Automatically change pages or images
- Page transitions from on slide to the next -- for IE users only
- Images only: No need to place images on pages
In-frame 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. I put the first page of my show, Slide1.html into an i-frame as described in How-to basics,
Main page advance
To have the Prev and Next buttons on the main page, instead of inside the i-frame, start off the same way. OK, I'm cheating -- I just reused the previous slideshow and made it not quite so tall and so hide the old Prev and Next links. 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.
To have the Prev and Next buttons on the main page, instead of inside the i-frame, start off the same way. OK, I'm cheating -- I just reused the previous slideshow and made it not quite so tall and so hide the old Prev and Next links. 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.
Code for the slideshows
The "Main page advance" and remaining slideshows on this page all rely on the same external Javascript file used by in-page slideshows. If you haven't already done so, download it here: slideshows.js. If you need them, detailed download and set-up instructions are in Slideshows.js include file.
Compared to the the earlier V1.1 version, the latest version of this file, V1.3 of 06 Oct 2005 has the following improvements:
The "Main page advance" and remaining slideshows on this page all rely on the same external Javascript file used by in-page slideshows. If you haven't already done so, download it here: slideshows.js. If you need them, detailed download and set-up instructions are in Slideshows.js include file.
Compared to the the earlier V1.1 version, the latest version of this file, V1.3 of 06 Oct 2005 has the following improvements:
- Does not upset the window history
- Allows images to be placed directly in i-frames
<script type="text/javascript" SRC="slideshows.js">
</script>
</script>
Turn CSS positioning off. Similarly, add this code object to set up the slide show: Don't place this one at the back -- you can have only one object at the back 
<script type="text/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, you now provide a page list. Notice the code line that tells the name of the I-frame to target. If you have only one i-frame, 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 changr the content of the wrong I-frame. I chose to rename the geometry of my i-frame, to SlideFrame, but it is equally correct to not rename and just use a target name like geo917.
The link URLs to go back and forward, entered with one of the link editors, are the same as for the equivalent in-page slideshow. See Links for the Prev and Next commands
javascript:Show1.prevslide()
javascript:Show1.nextslide()
javascript:Show1.prevslide()
javascript:Show1.nextslide()
Timed Slideshow
Here is the code for this slideshow. It is very similar to the previous.
<script type="text/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>
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 include file slideshows.js
The links on the start and stop buttons are much the same as before:
javascript:Show2.startTimer('Show2',5)
javascript:Show2.stopTimer()
javascript:Show2.startTimer('Show2',5)
javascript:Show2.stopTimer()
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 in Basic Slideshows. The code setup and implementation are the same as for the previous slideshow.
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 in Basic Slideshows. The code setup and implementation are the same as for the previous slideshow.
<script type="text/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()
Images only
Images in an i-frame describes how to display images directly in an i-frame without first placing the images on a page. This means much less work in setting up a slideshow, as you don't have to create a lot of extra pages, one for each slide.
This will work only for those occasions where you want just the image in the i-frame and nothing else. In turn, this means that all controls for the slideshow must be on the main page.
Images in an i-frame describes how to display images directly in an i-frame without first placing the images on a page. This means much less work in setting up a slideshow, as you don't have to create a lot of extra pages, one for each slide.
This will work only for those occasions where you want just the image in the i-frame and nothing else. In turn, this means that all controls for the slideshow must be on the main page.
Timed Slideshow
This is very similar to the earlier slideshows. Because you are placing images directly in the i-frame, you may wish to set the i-frame internal margins. See I-frame parameters.
The only other change is in the code object that sets up the slideshow.
The only other change is in the code object that sets up the slideshow.
<script type="text/javascript">
Show4=new SlideShow('images/DendrobiumSmall.jpg,
AppleBlossom,CymbidiumSmall,Iris');
Show4.target='geo1747';
</script>
Show4=new SlideShow('images/DendrobiumSmall.jpg,
AppleBlossom,CymbidiumSmall,Iris');
Show4.target='geo1747';
</script>
The first slide in the show sets the folder where all the images are to be found, in my case, /images, and also the file extension which applies to all the images -- jpg. So for this slide show, the following images are in my /images folder:AppleBlossom.jpg
CymbidiumSmall.jpg
Iris.jpg
The folder name can be the name of a path relative to the current page like:
image/ or
../myOtherProject/image/
Or it can be the full URL of the folder containing the files -- like my one
http://bruceee.com/SS/images/
If you use a full URL like this, be aware that some sites do not allow you to access images and pages via i-frames in this way. My URL above does allow access, so feel free to access my images there if you want to test your project.
image/ or
../myOtherProject/image/
Or it can be the full URL of the folder containing the files -- like my one
http://bruceee.com/SS/images/
If you use a full URL like this, be aware that some sites do not allow you to access images and pages via i-frames in this way. My URL above does allow access, so feel free to access my images there if you want to test your project.
If you don't specify a folder with the first file, the code in slideshows.js assumes the same folder as the main page.
If you don't specify a file extension with the first file, the code assumes the html extension.
If you don't specify a file extension with the first file, the code assumes the html extension.
There is a similar slideshow under OnLoad event example2 with the addition of a secondary frame.
Although I have considered only images here, you could use the same techniques for files of other types.
Although I have considered only images here, you could use the same techniques for files of other types.
Final thoughts
If you want a slideshow with only a single image in the frame, consider an Images-only slideshow. This does not require the images to be placed on their own pages, so saves a lot of work and extra files. This would be my choice.
Some 'free' websites insist in putting ads into pages for i-frames, and can screw things up so badly that i-frames are unusable. Using images-only may solve that problem.
If you want multiple images or text as well in a frame consider a main page advance slideshow. It uses only one set of buttons -- on the main page, so avoids duplicating buttons on individual pages.
If you want a slideshow with only a single image in the frame, consider an Images-only slideshow. This does not require the images to be placed on their own pages, so saves a lot of work and extra files. This would be my choice.
Some 'free' websites insist in putting ads into pages for i-frames, and can screw things up so badly that i-frames are unusable. Using images-only may solve that problem.
If you want multiple images or text as well in a frame consider a main page advance slideshow. It uses only one set of buttons -- on the main page, so avoids duplicating buttons on individual pages.
