PDA

View Full Version : multiple slideshow



mindiapolis
05-10-2008, 04:24 PM
My client wants three sets of slideshow across the bottom of a webpage like this:

slideshow set 1 slideshow set 2 slideshow set 3



I have code for the first slideshow like this:

<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- 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]=["pictures/Picture_001.jpg", "", ""];
variableslide[1]=["pictures/Picture_002.jpg", "", ""];
variableslide[2]=["pictures/Picture_003.jpg", "", ""];

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

var slidewidth='130px' //set to width of LARGEST image in your slideshow
var slideheight='120px' //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>

Now, I know nothing about javascript. I was told I need to change variable names, variable calls, functions and pointers. Could someone explain these terms and possibly give me a sample code to follow? If I could get some help, I would really appreciate it.

ddadmin
05-10-2008, 08:53 PM
This is a very old script, and ripe for a complete rewrite. Until then though, you should look at Featured Content Slider (http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm). Just set the "toc" parameter when initializing the script to manual:


toc: "manual",

and within the Pagination DIV, leave it blank to basically make it look just like Flexi Image Slideshow (control less).

mindiapolis
05-11-2008, 01:23 AM
I'm not getting this at all. Where do you put the pictures that go in the slideshow? I'm working on it on www.fountainchurch.org/test.html

ddadmin
05-11-2008, 03:55 AM
Please read the instructions on the script page (http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm). Basically all the contents are defined inline on the page as regular HTML. In your case, they would mainly be regular <IMG> tags:


<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
<img src="photo1.jpg" /><br />
Image 1 description.
</div>

<div class="contentdiv">
<a href="#"><img src="photo2.jpg" /></a>
</div>

<div class="contentdiv">
<img src="photo3.jpg" />
</div>

</div>

<div id="paginate-slider1" class="pagination">

</div>

mindiapolis
05-11-2008, 09:45 PM
What am I doing wrong? The slideshow still isn't apparing. Do the image tags go in the head or body?

mindiapolis
05-11-2008, 09:58 PM
Do I need the paginate-slider1 div or the corresponding css?

jscheuer1
05-12-2008, 12:00 AM
That could work, as could:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Which can accommodate various sized images in one or more slide shows on a page and can also be run without controls, text, etc. Maybe you will find it easier to understand. Either way, you will need to take the time to understand whatever script you want to use. Read over that (the one you choose) script's demo page thoroughly, several times if need be. Flexi cannot appear more than once on a page. You could put a second Flexi in an iframe, but a script that can do multiple shows on a page is a much better solution.

mindiapolis
05-13-2008, 03:08 AM
//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):

In this second line of this code would I put true if I want the slideshow to start automatically?

jscheuer1
05-13-2008, 04:32 AM
//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):

In this second line of this code would I put true if I want the slideshow to start automatically?

Apples and oranges. The slide show will start automatically unless you set its:


slides#.manual_start=1; //start show in manual mode (stopped)

property as was done on the demo page with the third example:


var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["1_side.jpg", "", "http://www.google.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
slides3[1] = ["2_side.jpg", ""];
slides3[2] = ["3_side.jpg", "", "http://www.dynamicdrive.com"];
slides3[3] = ["5_side.jpg", "", "http://www.msn.com", "_new"];
//optional properties for these images:
slides3.no_descriptions=1; //use for no descriptions displayed
slides3.pause=1; //use for pause onmouseover
slides3.image_controls=1; //use images for controls
slides3.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slides3.specs='width=300, height=250' //global specifications for this show's new window(s)
slides3.random=1; //set a random slide sequence on each page load
slides3.manual_start=1; //start show in manual mode (stopped)

mindiapolis
05-15-2008, 06:04 PM
I'm sorry, I really am trying but I still don't understand why the slideshows won't start automatically. /the website again is www.fountainchurch.org/test.html

jscheuer1
05-15-2008, 06:21 PM
It does. At least in some browsers. However, this image:


slides[1] = ["pictures/Picture_002.jpgp", "Seated Woman"];

is not on the server, that looks like a typo in the filename, should be:


slides[1] = ["pictures/Picture_002.jpg", "Seated Woman"];

Anyway, in IE, if an image is missing the show will not proceed, and since the second image is missing, it won't start at all.

mindiapolis
05-16-2008, 04:12 PM
I just corrected the one error but it's still not working in IE or firefox

jscheuer1
05-16-2008, 04:43 PM
You fixed the one problem but that either allowed another to surface, or more likely you introduced a new one. In any case, the current problem is here at the end of this code block (highlighted and red):


var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["pictures/Picture_007.jpg", "", "http://www.google.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
slides3[1] = ["pictures/Picture_007.jpg", ""];
slides3[2] = ["pictures/Picture_008.jpg", "", "http://www.dynamicdrive.com"];
slides3[3] = ["pictures/Picture_009.jpg", "", "http://www.msn.com", "_new"];
//optional properties for these images:
slides3.no_descriptions=1; //use for no descriptions displayed
slides3.pause=1; //use for pause onmouseover
slides3.image_controls=1; //use images for controls
slides3.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slides3.specs='width=300, height=250' //global specifications for this show's new window(s)
slides3.random=1; //set a random slide sequence on each page load
/


You can't have a single slash like that just hanging there, it makes the browser think a string value will follow, but since one doesn't, and there is no closing / mark, it breaks the script. Just get rid of it.

mindiapolis
05-16-2008, 05:46 PM
I'm making progress. The first slideshow is working but how do I get rid of the words and the play controls underneath it? Also, how do I get slideshows 2 & 3 to work like the first one?

Do I still need

}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input, div#show4 table input {
outline-style:none;
}

jscheuer1
05-17-2008, 08:11 AM
It always helps to have valid HTML code. I also cleaned up the script and got rid of code and markup that you aren't using. Now, aside from the fact that pictures/Picture_004.jpg thru pictures/Picture_009.jpg, or at least most of them aren't on the server (upload the missing images), it will a work:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fountain Church Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["pictures/Picture_001.jpg", ""];
slides[1] = ["pictures/Picture_002.jpg", ""];
slides[2] = ["pictures/Picture_003.jpg", ""];
//optional properties for these images:
slides.no_controls=1; // will set a slide show with no controls
slides.no_descriptions=1; //use for no descriptions displayed
slides.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls

var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["pictures/Picture_004.jpg", ""];
slides2[1] = ["pictures/Picture_005.jpg", ""];
slides2[2] = ["pictures/Picture_006.jpg", ""];
//optional properties for these images:
slides2.no_controls=1; // will set a slide show with no controls
slides2.no_descriptions=1; //use for no descriptions displayed
slides2.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls

var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["pictures/Picture_007.jpg", ""];
slides3[1] = ["pictures/Picture_008.jpg", ""];
slides3[2] = ["pictures/Picture_009.jpg", ""];
//optional properties for these images:
slides3.no_controls=1; // will set a slide show with no controls
slides3.no_descriptions=1; //use for no descriptions displayed
slides3.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls

</script>

<script src="swissarmy.js" type="text/javascript">

/***********************************************
* Swiss Army Image slide show script - John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>
</head>
<body>
<p>
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides)
</script>
</p>


<p>
<script type="text/javascript">
new inter_slide(slides2)
</script>
</p>


<p>
<script type="text/javascript">
new inter_slide(slides3)
</script>
</p>
<div style="width:80%;margin:0 auto;">
Here at The Fountain Community Church, not only do we concentrate on God and His plan for our lives. . . But we also develop
relationships with each other and our community. Feel free to come and dip your toes in The Fountain or just dive on in with us
some Sunday at 10:00!
</div>

</body>
</html>

mindiapolis
05-17-2008, 03:40 PM
Still, only one slideshow is showing and yes all the pictures are uploaded. In the end I need three separate slideshows between the contents and footer divs on www.fountainchurch.org

jscheuer1
05-17-2008, 05:40 PM
If the images are on the server, why do I get this (and similar):


The requested URL /pictures/Picture_004.jpg was not found on this server.

When I try to navigate directly to:


http://www.fountainchurch.org/pictures/Picture_004.jpg

and numbers 005 and up as well?

They're either not there, or the spelling is different than in your code. Remember, upper and lower case letters matter on the web.

Ah, I found them, they are:


http://www.fountainchurch.org/pictures/Picture 004.jpg

with a space, not an underscore. Fix that in your source code or rename the files. 007, 008, and 009 are huge files, reduce their dimensions and byte size.

mindiapolis
05-17-2008, 06:20 PM
It works! ! ! I know I need to adjust the sizes, just haven't gotten that far yet. How would I put the pictures horizontal, not vertical?

jscheuer1
05-17-2008, 06:46 PM
You mean put all three slide shows in a row? You could float them, but the easiest method is to use a table. Put one slide show each in a <td> of a <tr> of a table.

The bottom line on positioning these shows is that they are just divisions. So you can lay them out the same way you would any other division or paragraph element.

mindiapolis
05-17-2008, 11:15 PM
So, would the code be:


var preload_ctrl_images=false;
<table>
<tr>
<td>var slides=[]; //FIRST SLIDESHOW</td>
//configure the below images and descriptions to your own.
slides[0] = ["pictures/Picture_001.jpg", ""];
slides[1] = ["pictures/Picture_002.jpg", ""];
slides[2] = ["pictures/Picture_003.jpg", ""];
//optional properties for these images:
slides.no_controls=1; // will set a slide show with no controls
slides.no_descriptions=1; //use for no descriptions displayed
slides.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls

<td>var slides2=[]; //SECOND SLIDESHOW</td>
//configure the below images and descriptions to your own.
slides2[0] = ["pictures/Picture_004.jpg", ""];
slides2[1] = ["pictures/Picture_005.jpg", ""];
slides2[2] = ["pictures/Picture_006.jpg", ""];
//optional properties for these images:
slides2.no_controls=1; // will set a slide show with no controls
slides2.no_descriptions=1; //use for no descriptions displayed
slides2.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls

<td>var slides3=[]; //THIRD SLIDESHOW</td>
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["pictures/Picture_007.jpg", ""];
slides3[1] = ["pictures/Picture_008.jpg", ""];
slides3[2] = ["pictures/Picture_009.jpg", ""];
//optional properties for these images:
slides3.no_controls=1; // will set a slide show with no controls
slides3.no_descriptions=1; //use for no descriptions displayed
slides3.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls
</tr>
</table>
</script>

jscheuer1
05-18-2008, 12:54 AM
No. Don't mix HTML and javascript like that. You can't. That part of the code just configures the arrays and their properties. The part in the body of the page is what actually calls each instance of a slide show, you can for example do:


<td><script type="text/javascript">
new inter_slide(slides2)
</script></td>

On a side note, your page will load more efficiently if you specify width and height:


<td><script type="text/javascript">
new inter_slide(slides2, 240, 160)
</script></td>

where 240 is the actual width of the widest image in that slide show, and 160 is the actual height of the tallest image in that slide show. These (width and height) can alternatively be assigned as properties of each array, but let's not worry about that right now, as you appear to be struggling just to make this work.

But, if they (width and Height) aren't assigned at all, the browser won't know the dimensions until it loads the first image, and if that image isn't both the widest and the tallest in the show, there will probably be problems.

mindiapolis
05-18-2008, 01:17 AM
Does it matter where in the body tag I put the html code?

jscheuer1
05-18-2008, 02:33 AM
Hmm, knowing you, at least as I have come to in this thread, I'm not sure what you mean. You can put it anywhere in the body. The body tag itself should only contain attributes.

The body of a valid page is between the:


<body>

and the:


</body>

tags. The body tag itself:


<body>

can contain only attributes, not HTML, ex:


<body style="color:white;background-color:green;">

But in modern HTML the body tag generally contains no attributes, as its characteristics are modified if necessary in a stylesheet.

mindiapolis
05-19-2008, 03:19 AM
I put
<td><script type="text/javascript">
new inter_slide(slides2)
</script></td>

in the body tag but the slideshow is still vertical, not horizontal plus it added another slideshow.

jscheuer1
05-19-2008, 01:03 PM
Now you are just being dense. Make a real table:


<table>
<tr>
<td><script type="text/javascript">
new inter_slide(slides, 240, 160)
</script></td>
<td><script type="text/javascript">
new inter_slide(slides2, 240, 160)
</script></td>
<td><script type="text/javascript">
new inter_slide(slides3, 240, 160)
</script></td>
</tr>
</table>

Use it in the body instead of the layout of the slide shows that you currently have.

mindiapolis
05-19-2008, 01:17 PM
I'M NOT BEING DENSE! ! ! I thought it was odd that the table tag weren't there but since javascript was in the mix, I didn't know!



No. Don't mix HTML and javascript like that. You can't. That part of the code just configures the arrays and their properties. The part in the body of the page is what actually calls each instance of a slide show, you can for example do:


<td><script type="text/javascript">
new inter_slide(slides2)
</script></td>

On a side note, your page will load more efficiently if you specify width and height:


<td><script type="text/javascript">
new inter_slide(slides2, 240, 160)
</script></td>

where 240 is the actual width of the widest image in that slide show, and 160 is the actual height of the tallest image in that slide show. These (width and height) can alternatively be assigned as properties of each array, but let's not worry about that right now, as you appear to be struggling just to make this work.

But, if they (width and Height) aren't assigned at all, the browser won't know the dimensions until it loads the first image, and if that image isn't both the widest and the tallest in the show, there will probably be problems.

jscheuer1
05-19-2008, 01:27 PM
You should try to use a little common sense, though. What do you think would happen if you have a td with no table? And what do you think will happen if you have two calls to the same slide show in the body? Um, exactly what happened. This isn't rocket science. And, though I admit I could have been more clear before, I was merely stating that you cannot mix HTML and javascript in the head of the page like that.


That part of the code just configures the arrays and their properties. The part in the body of the page is what actually calls each instance of a slide show

It doesn't really matter to me much though, as long as you are able to take the ball and run with it at some point, and are happy with your results.

mindiapolis
05-20-2008, 01:47 AM
Thank you so much for all your help