Closed Thread Icon

Topic awaiting preservation: Slide Show Script Mod Help. Pages that link to <a href="https://ozoneasylum.com/backlink?for=8914" title="Pages that link to Topic awaiting preservation: Slide Show Script Mod Help." rel="nofollow" >Topic awaiting preservation: Slide Show Script Mod Help.\

 
Author Thread
kindredtnc
Obsessive-Compulsive (I) Inmate

From:
Insane since: Oct 2003

posted posted 10-18-2003 19:59

Hello,I am using a slide show script on one of my sites. I like most of it except that it preloads every image before it lets you start scrolling the images. I get alot of complaints from Dial Up users because of this. Ill be using around 15 images a week that are around 12k a piece and at 300x225.

I like the fading effect,but id sacrifice that in order to have a faster load time.
Is there any way to modify this script so the preloading is only for the first 2 or 3 images or is there another script out there that is better for non broadband. Basically Id like to remove the fade effect if need be and the preload if i have no other options...thanks for any help.

script example: http://www.codelifter.com/main/javascript/slideshow4.html

<!--
PushButton SlideShow with Captions and Cross-Fade
Copyright 2003 by CodeLifter.com
Author: etLux

Shows images and accompanying captions.
Browsers: NS4-7,IE4-6
Fade effect only in IE; degrades gracefully.
NS4 shows default caption only.

INSTRUCTIONS:

Copy this entire script into a completely blank
page. Follow the commented instructions within.
//-->

<html>

<head>

<title>PushButton SlideShow</title>

<!--
Set up the caption font in the following style.
Also set the styles for the controls.
Place the style script in the head of the page.
//-->

<style>
.Caption {
font-family: Arial;
font-weight: normal;
font-size: 12pt;
color: #FF3300; }

A.Controls:link { color:#666666;
text-decoration:none;
font-family: Arial;
font-size: 14pt;
font-weight: bold; }
A.Controls:visited { color:#666666; text-decoration:none;
font-family: Arial;
font-size: 14pt;
font-weight: bold; }
A.Controls:active { color:#666666; text-decoration:none;
font-family: Arial;
font-size: 14pt;
font-weight: bold; }
A.Controls:hover { color:#00FF00; text-decoration:none;
font-family: Arial;
font-size: 14pt;
font-weight: bold; }

</style>

<!--
Place the following script in the head of the page.
Follow the set-up instructions within the script.
//-->

<script>

// (C) 2003 by CodeLifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 2;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var showHot = false; // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1] = 'Nebula01.jpg';
Picture[2] = 'Nebula02.jpg';
Picture[3] = 'Nebula03.jpg';
Picture[4] = 'Nebula04.jpg';
Picture[5] = 'Nebula05.jpg';
Picture[6] = 'Nebula06.jpg';
Picture[7] = 'Nebula07.jpg';
Picture[8] = 'Nebula08.jpg';
Picture[9] = 'Nebula09.jpg';
Picture[10] = 'Nebula10.jpg';

// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

Caption[1] = "This is the first caption.";
Caption[2] = "This is the second caption.";
Caption[3] = "This is the third caption.";
Caption[4] = "This is the fourth caption.";
Caption[5] = "This is the fifth caption.";
Caption[6] = "This is the sixth caption.";
Caption[7] = "This is the seventh caption.";
Caption[8] = "This is the eighth caption.";
Caption[9] = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";

// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 0;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}

</script>

</head>

<!--
Add onload='showHot=true;' to the body tag. This is
needed to prevent false object calls while the page
is loading. Optional: If you are using this in a
popup, as in this demo, adding self.focus() to the
onload event in the body tag will bring the popup
to the front each time it is loaded [recommended].
//-->

<body onload='showHot=true;self.focus();' bgcolor=#000000 link="#FF0000" vlink="#FF0000" alink="#FF0000">

<!--
The following table holds the images, captions, and controls.
Place the table in your page where you want the slideshow
to appear. Follow the instructions for each table cell.
//-->

<div align="center">
<center>

<table border=0 cellpadding=10 cellspacing=0>
<tr>
<!--
The next table cell holds the images.
Set cell and image width and height the same.
The img src must have name=PictureBox in its
tag. Often, the first image in the Picture
array in the script is used here; but you
may also use a different, introductory image
as we have here, since this image is shown
only on start-up.
//-->
<td width=350 height=280 colspan="3">
<img src=Nebula00.gif name=PictureBox width=350 height=280>
</td>
</tr>
<tr>
<!--
The next table cell holds the captions.
This table cell must have id=CaptionBox and
class=Caption in its tag. The default caption
shows whilst loading in all browsers; NS4
will show only the default caption, throughout.
//-->
<td id=CaptionBox class=Caption align=center colspan="3">
This is the default caption.
</td>
</tr>
<!--
The following three cells contain the controls.
Each of the control a href's must contain class=
Controls, to attach the styles (see top of script).
To dress this up a bit, you can of course substitute
<img src> images for the text in the links.
//-->
<tr>
<td align="center">
<a class=Controls href="#" onClick="javascript:control('B');">< <</a>
</td>
<td align="center">
<a class=Controls href="#" onClick="javascript:control('H');">

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

posted posted 10-20-2003 11:01

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

« BackwardsOnwards »

Show Forum Drop Down Menu