Slideshow Gallery Not Working In Safari or Chrome

Get Started
1

Hi there - found a great slideshow/gallery here:
Apple Style Slideshow

But I’ve noticed on the two instances that it’s implemented - it’s not working properly (not advancing at all, and links to slides do not work) on Safari, Chrome.

I read on the thread of comments it might be related to nested DIvs inside a table. IN both my cases where it’s being used - they are nested in the markup of an e-commerce HTML table-based template.

Here’s the site:

Oransi Air Purifiers

There is a stylesheet, the HTML, and a javascript or two associated with it.

The slideshow works beautifully for IE, Mozilla, -

I am sure it’s something simple that I’ve missed otherwise it wouldn’t be so popular - (the slideshow).

Thanks in advance for any help!!

Kari

2

the code you using for slide show that may be didn’t work you may try this

Script:

var imgpreload=new Array()
for (i=0;i<pictures.length;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=pictures[i].src
}

var picturewidth;
var pictureheight;
var i_loop=0;
var i_picture=0;
var width_slice;
var cliptop=0;
var clipbottom;
var i_clipright=1;
var content=“”;
pause=pause*1000;
var slideshow_height=slideshow_height+message_height;

function initiate() {
getcontent();
for (i=0;i<=x_slices;i++) {
var thisinners=document.getElementById(“s”+i);
thisinners.innerHTML=content;
var thiss = document.getElementById(‘s’ + i).style;
// var thiss=eval(“document.getElementById('s”+i+“').style”);
thiss.left=0;
thiss.top=0;
}
var thisspan=eval(“document.getElementById(‘s0’)”);
width_slice=Math.ceil(slideshow_width/x_slices);
clipbottom=slideshow_height;
var elWholeStyle = document.getElementById(“whole”).style;
elWholeStyle.left = elWholeStyle.top = ‘0px’;
i_picture++;
openlamellar();
}

function openlamellar() {
clipleft=-width_slice;
clipright=0;
if (i_clipright<=width_slice) {
for (i=0;i<=x_slices;i++) {
var thiss = document.getElementById(‘s’ + i).style;
thiss.clip =“rect(”+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+“px)”;
clipleft+=width_slice;
clipright=clipleft+i_clipright;
}
i_clipright++;
var timer=setTimeout(“openlamellar()”,20);
}
else {
clearTimeout(timer);
document.getElementById(‘whole’).innerHTML=content;
var timer=setTimeout(“changepicture()”,pause);
}
}

function getcontent() {
content=“<a href='”+pictures[i_picture].url+“’ target='”+target_url+“'>”;
content+=“<img src=”+pictures[i_picture].src+" border=0>“;
content+=”</a><div class=‘messagestyle’ style=‘width:"+slideshow_width+“px;height:”+message_height+"px;’>“+pictures[i_picture].msg+”</div>";
}

function changepicture(){
i_clipright = 0;
clipleft = 0;
clipright = 0;
for (i = 0; i <= x_slices; i++) {
var thiss = document.getElementById(‘s’ + i).style;
thiss.clip = “rect(” + cliptop + "px " + clipright + "px " + clipbottom + "px " + clipleft + “px)”;
}
if (i_picture >= pictures.length) {
i_picture = 0;
}
getcontent();

for (i = 0; i &lt;= x_slices; i++) {
    var thisinners=document.getElementById("s"+i);
    thisinners.innerHTML = content;
}
i_picture++;
openlamellar();

}

document.write(“<div style='position:relative;width:”+slideshow_width+“px;height:”+slideshow_height+“px;'>”);
document.write(“<div id=‘whole’ style=‘position:absolute;top:0px;left:0px’></div>”);
for (i=0;i<=x_slices;i++) {
document.write(“<div id='s”+i+“’ style=‘position:absolute;top:0px;left:0px’></div>”);
}
document.write(“</div>”);
document.close();
window.onload=initiate;

Html For this Script:

<html>
<head>
<title>Slideshow with lamellar effect</title>
</head>
<body>
<h1>Slideshow with lamellar effect</h1>
<style>
.messagestyle{
font-family:Arial;
font-size:11px;
color:white;
background-color:#888888;
text-align:center;
position:absolute;
bottom:0px;
vertical-align:middle;
margin:0px;
line-height:15px;
height:17px;
}

</style>
<script>

// IMPORTANT:
// If you add this script to a script-library or script-archive

// where this script will be running.

// CONFIGURATION:

// with step-by-step instructions and copy-and-paste installation.

// your pictures. Add as many pictures a you like. In this case the pictures are in the same directory as the HTML-file.

var pictures = [
{ src : ‘images/image1_big.jpg’,
msg : ‘Picture from a Norwegian island’,
url : ‘http://www.dhtmlgoodies.com’
},
{ src : ‘images/image2_big.jpg’,
msg : ‘Gokart is fun’,
url : ‘http://www.dhtmlgoodies.com’
},
{ src : ‘images/image3_big.jpg’,
msg : ‘Gokart is fun’,
url : ‘http://www.dhtmlgoodies.com’
},
{ src : ‘images/image4_big.jpg’,
msg : ‘Me at the keyboard’,
url : ‘http://www.dhtmlgoodies.com’
},
{ src : ‘images/image6_big.jpg’,
msg : ‘My chess set’,
url : ‘#’
}
];

// target of the picture-links (“_blank”, “_top”, “_self”, “_parent” or “nameOfYourFrame”)
var target_url=“_blank”

// number of lamellas.
var x_slices=8

// width of slideshow
var slideshow_width=400

// height of slideshow
var slideshow_height=300

// height of messagebox
var message_height=17

// pause beween the pictures (seconds)
var pause=1
// - End of JavaScript - –>
</script>
<script src=“js/slideshow-lamellar.js”></script>
</body>
</html>

<snip />