PDA

View Full Version : Resolved flexi slideshow full documentation



mcolton
10-19-2015, 04:24 PM
I'm trying to get Flexi Slideshow to run. I copied all the code shown into my program but it doesn't run.
It says there is full documentation somewhere but I can't find it.
Thanks for any help

mlegg
10-19-2015, 05:16 PM
Where is your code or the page it's on?

mcolton
10-19-2015, 05:21 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>LOTA Photos</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<style type = "text/css">
body {
background-color: #99ffcc;
}
img {
width: 800px;
height: 600px;
}
.floated {
float: left;
width: 15%;
padding-left: 1%;
}
.headfont {
font: italic 200% arial;
color: red;
}
p {
font: italic 130% arial;
color: blue;
}
.link {
padding-left: 50%;
}
.clear {
clear: both;
}
</style>
</head>

<body>
<div>
<span class = "headfont">
LOTA Photos
</span>
<span class = "link">
<a href="index.htm">Return to Home Page</a>
</span>
</div><br /><br />


<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
variableslide[0]=["pic7.jpg", "", "LOTA USTA Men's 7.5 Combo League State Finalists"];
variableslide[1]=["pic10.jpg", "", "Are they spelling YMCA or LOTA ???"];
variableslide[2]=["pic8.jpg", "", "Mixed Doubles ???"];
variableslide[3]=["pic11.jpg", "", "Mixed Doubles #2 ???"];
variableslide[4]=["pic14.jpg", "", "Nov, 2000 Board Members"];
variableslide[5]=["pic15.jpg", "", "Nov, 2000 Mixed Doubles"];
variableslide[6]=["pic16.jpg", "", "Sept, 2009 Senior Mixed 8.0 State Finalists"];
variableslide[7]=["pic20.jpg", "", "Founder's Day - LOTA's 10th Birthday"];
variableslide[8]=["pic21.jpg", "", "LOTA USTA Ladies Adult 5.5 Finalists"];
variableslide[9]=["pic22.jpg", "", "LOTA USTA Senior Ladies 7.5 Finalists"];
variableslide[10]=["jerrycaldwell.jpg", "", "LOTA member Jerry Caldwell admitted to Southern Tennis Hall of Fame"];
variableslide[11]=["pic1.jpg", "", "St Pattys Day - Mixed Doubles"];
variableslide[12]=["pic23.jpg", "", "LOTA Board Member Marty Colton presents 5 Year Sponsor award to Rick Franks"];
variableslide[13]=["pic2.jpg", "", "Brenda Bourdage Celebration Tournament Winners"];
variableslide[14]=["lake-oconee-living2.jpg", "", "Lake Oconee Living - LOTA is the Winner"];
variableslide[15]=["lake-oconee-living.jpg", "", "Lake Oconee Living - Best Local Sports Organization"];

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='800px' //set to width of LARGEST image in your slideshow
var slideheight='600px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

</body>
</html>

molendijk
10-19-2015, 06:46 PM
The path to your images is incomplete. For instance, from this line:

variableslide[0]=["pic7.jpg", "", "LOTA USTA Men's 7.5 Combo League State Finalists"];
it is not clear where to find pic7.jpg.

mcolton
10-19-2015, 06:50 PM
My existing program to show photos uses something similar
theimage[0]=["pic7.jpg", "", "LOTA USTA Men's 7.5 Combo League State Finalists"];

and this works fine

molendijk
10-19-2015, 07:04 PM
I maintain that the path is not complete or incorrect. For instance, if you replace the first two images with this:

variableslide[0]=["http://orig15.deviantart.net/0400/f/2014/172/0/d/spaceship_warp_animation_by_nnj3de-d7ncf40.gif", "", "LOTA USTA Men's 7.5 Combo League State Finalists"];
variableslide[1]=["http://www.armyoftrolls.co.uk/website/armyoftrolls/images/random_sprites/panda.gif", "", "Are they spelling YMCA or LOTA ???"];
(full path to images on the internet) then the program works.
Of course, you may want to adapt the size of the images to your needs.

mcolton
10-19-2015, 07:15 PM
I don't know what the path is. It is in the same path as the photos.htm program is. It is on the site5 server
I've tried
http://lotatennis.com/pic7.jpg
http://lotatennis.com/home/lota/public_html/pic7.jpg
http://lotatennis.com/public_html/pic7.jpg
www.lotatennis.com/pic7.jpg
www.lotatennis.com/home/lota/public_html/pic7.jpg
and it doesn't work

molendijk
10-19-2015, 07:36 PM
Can you show me your page on the internet?

mcolton
10-19-2015, 07:39 PM
go to lotatennis.com and at the very bottom there is a "testing only" that runs the code I showed above

molendijk
10-19-2015, 07:59 PM
What you have on the test page (http://lotatennis.com/photos2.htm) is:

variableslide[0]=["http://lotatennis.com/public_html/pic7.jpg", "", "LOTA USTA Men's 7.5 Combo League State Finalists"];
That should be:

variableslide[0]=["http://lotatennis.com/pic7.jpg", "", "LOTA USTA Men's 7.5 Combo League State Finalists"];
Have a nice tennis match.

mcolton
10-19-2015, 08:16 PM
My line looks like this:
variableslide[0]=["http://lotatennis.com/pic7.jpg", "", "LOTA USTA Mens 7.5 Combo League State Finalists"];

and I see nothing but the Free DHTML scripts provided by dynamic drive

molendijk
10-19-2015, 08:39 PM
I put your page on my server here (http://mesdomaines.nu/mcolton.htm). It works fine. All you have to do is copy the source code.

mcolton
10-19-2015, 08:43 PM
I'm sorry I don't understand. Copy what source code. I already have photos2.htm online

molendijk
10-19-2015, 08:50 PM
Ok, in post #3 you put your code that didn't work. Apparently, you copied that 'from somewhere'. Replace what you have there with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>LOTA Photos</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<style type = "text/css">
body {
background-color: #99ffcc;
}
img {
width: 800px;
height: 600px;
}
.floated {
float: left;
width: 15%;
padding-left: 1%;
}
.headfont {
font: italic 200% arial;
color: red;
}
p {
font: italic 130% arial;
color: blue;
}
.link {
padding-left: 50%;
}
.clear {
clear: both;
}
</style>
</head>

<body>
<div>
<span class = "headfont">
LOTA Photos
</span>
<span class = "link">
<a href="http://lotatennis.com/index.htm">Return to Home Page</a>
</span>
</div><br /><br />


<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/



var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
variableslide[0]=["http://lotatennis.com/pic7.jpg", "", "LOTA USTA Men's 7.5 Combo League State Finalists"];
variableslide[1]=["http://lotatennis.com/pic10.jpg", "", "Are they spelling YMCA or LOTA ???"];
variableslide[2]=["http://lotatennis.com/pic8.jpg", "", "Mixed Doubles ???"];
variableslide[3]=["http://lotatennis.com/pic11.jpg", "", "Mixed Doubles #2 ???"];
variableslide[4]=["http://lotatennis.com/pic14.jpg", "", "Nov, 2000 Board Members"];
variableslide[5]=["http://lotatennis.com/pic15.jpg", "", "Nov, 2000 Mixed Doubles"];
variableslide[6]=["http://lotatennis.com/pic16.jpg", "", "Sept, 2009 Senior Mixed 8.0 State Finalists"];
variableslide[7]=["http://lotatennis.com/pic20.jpg", "", "Founder's Day - LOTA's 10th Birthday"];
variableslide[8]=["http://lotatennis.com/pic21.jpg", "", "LOTA USTA Ladies Adult 5.5 Finalists"];
variableslide[9]=["http://lotatennis.com/pic22.jpg", "", "LOTA USTA Senior Ladies 7.5 Finalists"];
variableslide[10]=["http://lotatennis.com/jerrycaldwell.jpg", "", "LOTA member Jerry Caldwell admitted to Southern Tennis Hall of Fame"];
variableslide[11]=["http://lotatennis.com/pic1.jpg", "", "St Pattys Day - Mixed Doubles"];
variableslide[12]=["http://lotatennis.com/pic23.jpg", "", "LOTA Board Member Marty Colton presents 5 Year Sponsor award to Rick Franks"];
variableslide[13]=["http://lotatennis.com/pic2.jpg", "", "Brenda Bourdage Celebration Tournament Winners"];
variableslide[14]=["http://lotatennis.com/lake-oconee-living2.jpg", "", "Lake Oconee Living - LOTA is the Winner"];
variableslide[15]=["http://lotatennis.com/lake-oconee-living.jpg", "", "Lake Oconee Living - Best Local Sports Organization"];

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='800px' //set to width of LARGEST image in your slideshow
var slideheight='600px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

</body>
</html>

mcolton
10-19-2015, 08:56 PM
Thanks. I got it to work.
Now, how do I put different sizes on different pictures

molendijk
10-19-2015, 09:10 PM
You can't to that with this script. It's a very old one.
http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm would do the job, but you must have some coding expertise to make that one work.

mcolton
10-19-2015, 09:19 PM
That's why I wanted to use Flexi Slideshow. Below is the documentation:

Description: One of the biggest complaints of regular image slideshows is that the participating images must be of the same width/height. Well, we named this script Flexi (flexible) Slideshow for its ability to accommodate images of different dimensions. A quick breakdown of its features:

•Images within the slideshow do not have to be of the same dimensions.

molendijk
10-19-2015, 09:45 PM
What I ment was that the script doesn't allow you to alter the size of the images with the help of javascript. You must have values for the width and height of the LARGEST image in your collection (var slidewidth=...; var slideheight=...) in order for all images (of different dimensions, maybe) to display correctly. You can't change that 'afterwards' using javascript.

mcolton
10-19-2015, 10:55 PM
Thanks for your help

molendijk
10-19-2015, 11:12 PM
You're welcome.