FadeSlideshow not working in IE 7

[WaltonCreative]

1) Script Title:
FadeSlideshow


2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm


3) Describe problem:
Script works fine in Safari and IE 9, but the large images do not show in IE 7.
this is the URL of the faulty page:
http://www.waltoncreative.com/Photos_Ragged-Rose2.php

[jscheuer1]

No trailing comma (highlighted red in the below) allowed after the last item in the imagearray:

	imagearray: [   // "source", "URL", "target", "text"
		["Images/enlarged/RaggedRose/01.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/02.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/03.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/04.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/05.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/06.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/07.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/08.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/09.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/10.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/11.jpg", "", "", ""],
		["Images/enlarged/RaggedRose/12.jpg", "", "", ""],
				
	],

Other browsers error correct that, not IE less than 9. Get rid of it and it should be fine.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[WaltonCreative]

Oh how clever! thanks. Will give that a go.

Thank you!

[WaltonCreative]

My problem now is that the list of image files is generated using PHP, so the comma is part of the repeating script:

var mygallery=new fadeSlideShow({
wrapperid: "centralImage", // ID of blank DIV on page to house Slideshow
dimensions: [400, 600], // width,height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [ // "source", "URL", "target", "text"
<?php foreach(glob("Images/enlarged/RaggedRose/*.jpg") as $sumLarge)
{ ?>
["<?php echo $sumLarge; ?>", "", "", ""],
<?php } ?>

],

So I need to find a way to remove the last comma using PHP perhaps?

[jscheuer1]

You shouldn't be putting it there in the first place. And you don't need all those empty fields:

["<?php echo $sumLarge; ?>", "", "", ""],

So, something like (untested, but I know this idea works):

var mygallery=new fadeSlideShow({
 wrapperid: "centralImage", // ID of blank DIV on page to house Slideshow
 dimensions: [400, 600], // width,height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [ // "source", "URL", "target", "text"
 <?php foreach(glob("Images/enlarged/RaggedRose/*.jpg") as $sumLarge) {
 	$files[] = '["' . $sumLarge . '"]';
 }
 echo implode(",\n", $files);
 ?>
 ],

Edit: I just tried this out and it produces the required array, as does the more efficient and well formatted:

var mygallery=new fadeSlideShow({
 wrapperid: "centralImage", // ID of blank DIV on page to house Slideshow
 dimensions: [400, 600], // width,height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [ // "source", "URL", "target", "text"
<?php echo "\t['" . implode("'],\n\t['", glob("Images/enlarged/RaggedRose/*.jpg")) . "']\n"; ?>
 ],

[WaltonCreative]

Wow that's clever!

I was trying to do it with str_replace() which didn't work.

I thought glob() needed a foreach() for it to work?

[jscheuer1]

glob produces an array. implode changes an array into a string while optionally inserting characters between each element of the array. So, if you're going to write out many strings, yes you would have to iterate over the glob array with foreach or some other iterative function. But since the goal is simply to produce the code that comprises the javascript array, this may be done in one step with implode.

To make it a little easier on the human eye, I rewrote it again like so, showing just the PHP part now:

<?php
    $pattern = "*.jpg";
    $arrayinnercontent = implode("'],\n\t['", glob($pattern));
    echo "\t['$arrayinnercontent']\n";
?>

Notice the $pattern variable. For your setup it would be:

$pattern = "Images/enlarged/RaggedRose/*.jpg"; 

In my test folder this outputted:

	['02_lrg.jpg'],
	['03_lrg.jpg'],
	['04_lrg.jpg'],
	['05_lrg.jpg'],
	['06_lrg.jpg'],
	['07_lrg.jpg'],
	['09_lrg.jpg'],
	['12_lrg.jpg'],
	['21_lrg.jpg'],
	['image_01.jpg'],
	['image_01_tbn.jpg'],
	['image_02.jpg'],
	['image_03.jpg'],
	['image_04.jpg'],
	['image_04_tbn.jpg'],
	['image_05.jpg'],
	['image_05_tbn.jpg'],
	['image_06.jpg'],
	['image_06_tbn.jpg'],
	['image_07.jpg'],
	['image_07_tbn.jpg'],
	['image_08_tbn.jpg'],
	['image_09.jpg'],
	['image_10_tbn.jpg'],
	['image_12.jpg'],
	['image_21.jpg']

The highlighted parts at the beginning and the end are from the highlighted parts in this line:

echo "\t['$arrayinnercontent']\n";

The rest comes from the implosion.

[Kkooey]

Slideshow not showing up in IE but works in other browsers. http://societeskincare.com/index.html Please help!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Société Clinical Skincare</title>
<link rel="stylesheet" type="text/css" href="tabcontent.css" />

<script type="text/javascript" src="tabcontent.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [800, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["banners_home1.jpg", "", "", ""],
["banners_home2.jpg", "", "", ""],
["banners_home3.jpg", "", "", ""],
["banners_home4.jpg", "", "", ""],
["banners_home5.jpg", "", "", ""],
["banners_home6.jpg", "", "", ""], //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

[jscheuer1]

Slideshow not showing up in IE but works in other browsers. http://societeskincare.com/index.html Please help!

 . . . Show({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [800, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["banners_home1.jpg", "", "", ""],
		["banners_home2.jpg", "", "", ""],
		["banners_home3.jpg", "", "", ""],
		["banners_home4.jpg", "", "", ""],
		["banners_home5.jpg", "", "", ""],
		["banners_home6.jpg", "", "", ""], //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: fal . . .

See that red comma? Get rid of it.