Swissarmy Slideshow Script Dynamic array values

**Ceeege** · 11-21-2008, 03:10 PM

1) Script Title: Swissarmy Slideshow

2) Script URL (on DD): Swissarmy Slideshow

Hi folks,

I’m posting again in the hope that someone can help me iron out a few javascript vs php issues I’m having. I’m trying to get the cool swissarmy slideshow working within my website and when I give it static values it works perfectly. What I’m trying to do is get the images from a MySQL database and assign the values into the Javascript slides array from a php array.

The code I have currently is on this link and is working but I only have static values for the images as follows

Code:

slides[0] = ["http://www.ceeege.com/images/Birds/12Auks/Puffin/2008-07-14_Puffin_06.jpg", "Puffin", "http://www.ceeege.com/Birds/Birds_Auks_Puffin.php"];
slides[1] = ["http://www.ceeege.com/images/Birds/05Ducks/Red_Breasted_Merganser/2008-03-30_Red_Breasted_Merganser_03.jpg", "Red-Breasted Merganser", "http://www.ceeege.com/Birds/Birds_Ducks_Red_Breasted_Merganser.php"];
slides[2] = ["http://www.ceeege.com/images/Birds/25Finches/Siskin/2008-03-29_Siskin_02.jpg", "Siskin", "http://www.ceeege.com/Birds/Birds_FinchesBuntings_Siskin.php"];
slides[3] = ["http://www.ceeege.com/images/Birds/18ChatsWrensAccentors/Wheatear/2008-05-14_Wheatear_03.jpg", "Wheatear", "http://www.ceeege.com/Birds/Birds_CWA_Wheatear.php"];
slides[4] = ["http://www.ceeege.com/images/Birds/01DiversGrebes/Black-Necked_Grebe/2008-10-17_Black-Necked_Grebe_08.jpg", "Black-Necked Grebe", "http://www.ceeege.com/Birds/Birds_DiversGrebes_Black-Necked_Grebe.php"];
slides[5] = ["http://www.ceeege.com/images/Birds/04HSG/Cattle_Egret/2008-03-09_Cattle_Egret_01.jpg", "Cattle Egret", "http://www.ceeege.com/Birds/Birds_HSG_Cattle_Egret.php"];

Underneath the slide show is the result of this php code

PHP Code:


<?php

for ( $counter = 0; $counter < $dbCount; $counter += 1) {



    echo "<br>slides[$counter] = $array[$counter];";



}

?>

Which outputs this

Code:

slides[0] = ["http://www.ceeege.com/images/Birds/18ChatsWrensAccentors/Wheatear/2008-05-14_Wheatear_01.jpg", "Wheatear", "http://www.ceeege.com/Birds/Birds_CWA_Wheatear.php"];
slides[1] = ["http://www.ceeege.com/images/Birds/18ChatsWrensAccentors/Wheatear/2008-04-27_Wheatear_01.jpg", "Wheatear", "http://www.ceeege.com/Birds/Birds_CWA_Wheatear.php"];
slides[2] = ["http://www.ceeege.com/images/Birds/18ChatsWrensAccentors/Wheatear/2008-05-14_Wheatear_03.jpg", "Wheatear", "http://www.ceeege.com/Birds/Birds_CWA_Wheatear.php"];
slides[3] = ["http://www.ceeege.com/images/Birds/18ChatsWrensAccentors/Wheatear/2008-05-14_Wheatear_02.jpg", "Wheatear", "http://www.ceeege.com/Birds/Birds_CWA_Wheatear.php"];
slides[4] = ["http://www.ceeege.com/images/Birds/18ChatsWrensAccentors/Wheatear/2008-04-27_Wheatear_02.jpg", "Wheatear", "http://www.ceeege.com/Birds/Birds_CWA_Wheatear.php"];

This looks pretty good to me and is in exactly the same format as the preset JavaScript slides array above.

So I figured if I put this inside the <script> part of the <head> section of my page, replacing the static slides values, it would work but alas no, it doesn’t output a thing and the slideshow doesn’t even start.

The whole script definition is below which is virtually the same as the original code, except for size customisation, options etc. You can see where the php loop is commented and in the position where I assumed it would work.

Code:

<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.

//<?php
//for ( $counter = 0; $counter < $dbCount; $counter += 1) {
//	echo "<br>slides[$counter] = $array[$counter];<br>";
//	}
//?>

slides[0] = ["http://www.ceeege.com/images/Birds/12Auks/Puffin/2008-07-14_Puffin_06.jpg", "Puffin", "http://www.ceeege.com/Birds/Birds_Auks_Puffin.php"];
slides[1] = ["http://www.ceeege.com/images/Birds/05Ducks/Red_Breasted_Merganser/2008-03-30_Red_Breasted_Merganser_03.jpg", "Red-Breasted Merganser", "http://www.ceeege.com/Birds/Birds_Ducks_Red_Breasted_Merganser.php"];
slides[2] = ["http://www.ceeege.com/images/Birds/25Finches/Siskin/2008-03-29_Siskin_02.jpg", "Siskin", "http://www.ceeege.com/Birds/Birds_FinchesBuntings_Siskin.php"];
slides[3] = ["http://www.ceeege.com/images/Birds/18ChatsWrensAccentors/Wheatear/2008-05-14_Wheatear_03.jpg", "Wheatear", "http://www.ceeege.com/Birds/Birds_CWA_Wheatear.php"];
slides[4] = ["http://www.ceeege.com/images/Birds/01DiversGrebes/Black-Necked_Grebe/2008-10-17_Black-Necked_Grebe_08.jpg", "Black-Necked Grebe", "http://www.ceeege.com/Birds/Birds_DiversGrebes_Black-Necked_Grebe.php"];
slides[5] = ["http://www.ceeege.com/images/Birds/04HSG/Cattle_Egret/2008-03-09_Cattle_Egret_01.jpg", "Cattle Egret", "http://www.ceeege.com/Birds/Birds_HSG_Cattle_Egret.php"];

// document.write(slides + "<br />");



// slides.nofade=1; //use for no fade-in, fade-out effect for this show
slides.delay=5000;
slides.desc_prefix='<b>Description:<\/b> '; //string prefix for image descriptions display
slides.counter=1; //use to show image count
slides.border=5; //set border width for images
slides.border_color='lightblue'; //set border color for images
slides.width=820; //use to set width of widest image if dimensions vary
slides.height=820; //use to set height of tallest image if dimensions vary
slides.pause=1; //use for pause onmouseover
slides.use_alt=1; //use for descriptions as images alt attributes
slides.use_title=1; //use for descriptions as images title attributes
slides.fadecolor='black';
slides.random='true';
//above slide show uses only the defaults

//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls

//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

</script>




<script src="http://www.ceeege.com/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>

…

In the <body> section the slideshow is called as standard

Code:

<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>

I’d really love some help on this as I’m getting close to what I want it to do and really like the slideshow but just stumbling at the final hurdle.

My other plea for help on this is here

Thanks in advance,

Chris.

**jscheuer1** · 11-21-2008, 05:01 PM

The <br> tag doesn't belong in script code, you want a linebreak, in PHP I think that's the same as in javascript:

PHP Code:


<?php 

for ( $counter = 0; $counter < $dbCount; $counter += 1) { 



    echo "\nslides[$counter] = $array[$counter];"; 



} 

?>

But aren't you supposed to:

PHP Code:


<?php 

for ( $counter = 0; $counter < $dbCount; $counter += 1) { 



    echo "\nslides[" . $counter . "] = " . $array[$counter] . ";";



} 

?>

In any case, you can see just exactly what sort of an array your PHP code is outputting by using your browser's 'view source' to examine the source code of the page. This will show you how it was served.

**Ceeege** · 11-21-2008, 08:20 PM

Thanks!

That seems to be doing the trick by removing the <br> I guessed it needed to look like you read it but using the view source it all becomes clear.

I'll try and tidy up the code when I get a chance over the weekend and then have a go at implementing the form too but that is just what I needed. Thanks again!

Thread: Swissarmy Slideshow Script Dynamic array values

Thread Tools

Search Thread

Swissarmy Slideshow Script Dynamic array values

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions