JavaScript - Flexible Image Slideshow Script

Hi All, I am very new at this and do not have any script editing skills.

I have been building my website with webeasy 8 and downloaded one of the free scripts from JavaScriptKit website and I edited the parts that i think it were suppose to be edited.

However, my problem is that the script is not working and i don't know where to begin ..... When i preview the site it shows broken link icon where the picture suppose to load.

The pictures URL is correct, thus my dilemma! I don't know what else to do....

Copy of script bellow

<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_01.jpg']
ultimateshow[1]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_02.jpg']
ultimateshow[2]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_03.jpg']
ultimateshow[3]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_04.jpg']
ultimateshow[4]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_05.jpg']

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

var slidewidth="540px" //set to width of LARGEST image in your slideshow
var slideheight="412px" //set to height of LARGEST iamge in your slideshow
var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//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
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" rel="nofollow" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
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") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>

Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below.

The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks!
<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

I have a slideshow of quotes based on the "Ultimate Fade-in slideshow (v2.1)" at Dynamic Drive: http://www.dynamicdrive.com/dynamici...nslideshow.htm

This is right under my navigation bar, and the drop-down menu items are hidden behind the javascript slideshow. You can see it he http://brookenelson.com/upticon/draft3/index.html

Some background: The reason I did it this way because I first started out with a Flash banner with quotes fading in and out, and I ran into the problem with the drop-down menu items hiding behind the Flash... of course I Googled that and found the solution ( see he http://brookenelson.com/upticon/draft3/index2.html )

But in the meantime I played with the javascript slideshow and it worked better for me because it was easier to add new quotes just within the html, without having to go back and edit the Flash item.

Anyway, so is there a solution to the drop-downs being hidden behind the .js slideshow? Or should I go back to the Flash? Or is there some other sort of solution or script that would fit my needs better?

Many many many thanks in advance.

p.s. I personally do not like the little quote slideshow I am using, in either form, but the client is insisting on it!!

Hello everyone,

I'm trying to add a 5th image to this pre-fabricated script:

http://www.javascriptkit.com/script/...tionshow.shtml

I added another line similar to ["autumn.jpg", "", "", "Ah the cool breeze of autumn."]

for my 5th image but the slideshow doesn't load at all. Once I delete the added line, it loads properly with no problems.

I'm guessing there's a stipulation somewhere in the .js file but I can't seem to find what's preventing it from loading 5 images.

Please help. Thank you very much.

Hi, Does anybody know how to create an Image Slideshow like the ones on the main page of http://www.game.co.uk and http://www.burton.co.uk????

Hey guys, I hope this is the right place to ask. I have searched the internet high and low for a script that does what I need, but I cant find anything! I would think it would be pretty easy to build, but I am not sure.

I need it to do a couple things:
-Be able the click the photo to advance to the next one
-Fade into the next photo
-When it reaches the end, restart with the first photo
-Have a counter in text somewhere not on the photo, for example (2 of 3) underneath

So does anyone know of anything? I can find tons of scripts but none of them do all these things, theres always something missing. Any advice?

Hi,

I'm working on an image slideshow for a website (please see the codes below). So far I've got the big images to change whenever I scroll to a thumbnail. There are two more things/functions I'd like to add to it, 1) make the big images clickable and each links to a webpage and 2) make the big images rotating (from first to last image continuously), but still maintain the ability to view other big images when scrolling over to the thumbnails.

Here are the codes:
Code:

 
<html>
<head>
<title>Image Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
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];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

</head>

<body>
<table height="15" border="0" cellpadding="0" cellspacing="0">
	<tr>
    		<td><img src="../images/image_thumb01.jpg" alt="" name="thumb01" width="15" height="12" id="thumb01" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110812/m_cookbooks65.jpg',1)"></td>
        	<td><img src="../images/image_thumb02.jpg" alt="" name="thumb02" width="15" height="12" id="thumb02" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110812/m_jingdian.jpg',1)"></td>
		<td><img src="../images/image_thumb03.jpg" alt="" name="thumb03" width="15" height="12" id="thumb03" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110812/m_summerend.jpg',1)"></td>
		<td> <img src="../images/image_thumb04.jpg" alt="" name="thumb04" width="15" height="12" id="thumb04" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110805/m_weichuan.jpg',1)"></td>
        	<td><img src="../images/image_thumb05.jpg" alt="" name="thumb05" width="15" height="12" id="thumb05" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110805/m_music.jpg',1)"></td>
		<td><img src="../images/image_thumb06_off.jpg" width="15" height="12" alt=""></td>
	</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td><img src="http://www.chinesebookonline.com/images/Books_T/110812/m_cookbooks65.jpg" alt="" name="image" id="image" border=""></td>
	</tr>
</table>
</body>

</html>

Thanks!!!

Hello I'm trying to setup and image slideshow with captions. I can't it to work so far. Can someone help me. Here is a code snippet:

Javascript

var crossFadeDuration = 3

var Pic = new Array()

Pic[0] = '1.gif'
Pic[1] = '2.gif'


var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}


Html

<body topmargin="5" leftmargin="0" marginheight="0" marginwidth="0" onload="runSlideShow()">

<img id="picture" name="SlideShow" src="1.gif" alt="" width="350" height="195" border="0" align="middle" />

Forgive me if this is in the wrong forum as I am unsure as to whether this should be PHP or Java, or a WP plugin. Basically I need to have a slideshow that picks images from a folder without the need to use arrays as there will be a large amount of images and I need to literally be able to drop images in a folder and they appear in a random order within the slideshow. As you can appreciate with a large amount of images, the code needs to call them as and when needed rather than loading them in at the beginning.

I have been using Wordpress's nextgen gallery and have been hacking away at a few plugins etc, and the closest I have come is to make WP select a different post with gallery each time creating the illusion that the images are in a different order, however this isn't going to be ideal as its not truly random, and breeds duplicates. If I have to stay away from WP that's fine, uploading to an ftp would be ok.

Hope someone can point me in the right direction!

Thank You

A

This is a image background slideshow im trying to incorp into a DIV instead of the <body>. Ive tried getElementById. But im still having trouble getting it to work. Also the crossfade only works in Internet explorer, i looked up the code to try and fix it for Firefox but i think it only works with CSS3. Any input would be great, i dont know a lot about Javascript most of this is self taut with a little experience using C++.


Code:

<script language="JavaScript">
    <!----------------------------------------------------------------------------
	var speed = 3000;
	var crossFadeDuration = 3;
	var Pic = new Array();

	Pic[0] = 'drawing1.jpg';
	Pic[1] = 'drawing2.jpg';
	Pic[2] = 'drawing1.jpg';
	Pic[3] = 'drawing2.jpg';
	Pic[4] = 'drawing1.jpg';
	Pic[5] = 'drawing2.jpg';

	var t;
	var j = 0;
	var p = Pic.length;
	var preLoad = new Array();
	for (i = 0; i < p; i++)
	{
       preLoad[i] = new Image();
       preLoad[i].src = Pic[i];
    }
	function runSlideShow()
	{
		if (document.MozOpacity!=null) 
		{  
			 /*trying to fix crossfade for Firefox*/
			 obj.style.MozOpacity = (opacity/100) - .001;
		}
	    else if (document.all)
	    {
	         document.body.style.filter="blendTrans(duration=crossFadeDuration)";
             document.body.filters.blendTrans.Apply();
             document.body.filters.blendTrans.Play();
			 
	    } 
	    if (document.body)
	    {
             document.body.background = Pic[j];    
             j = j + 1
             if (j > (p-1)) j=0
             t = setTimeout('runSlideShow()', speed)
	    }    
	}
   //--------------------------------------------------------------------------------
   </script>
   </head>
   
   <body onload="runSlideShow()" bgcolor="#000000">

I created a php and some javascript from code I found on this site. The problem is, I am not getting a slide show - only the first picture. I need to be able to slideshow everything in the Images folder - without detailing image names....
Here's what I have - I think I'm missing something simple:
In the Images folder I have getimages.php:
Code:

<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

In my page, I put these in the <head> section:
Code:

<script src="Images/getimages.php"></script>
<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "Images/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>



Then, in the body where I want the slideshow I have:
<div style="width: 170px; height: 160px">
<img id="slideshow" src="Images/beer.jpg" />
</div>

http://www.javascriptkit.com/script/...2/3slide.shtml

Hi i have the above image slideshow script running fine on a webpage

can anybody tell me how i can get it to run a second time to show a second different slideshow on the same page?

Ive tried editing variables but i cant work it out. would be much appreciated

Ta

Alrighty so here's what I have.
Live example:
http://www.thestrikeforum.com/ex/

It's a image slideshow that dynamically gets all the images (via php) in the current directory and puts them into the slideshow array. The array then randomly displays the images in the slideshow (via javascript).

There are 5 images in the folder rotateimage which also has the php script getimages.php in it.

Currently only the first image fades in however I want all the images to fade in as the first one does.

Codes:

Php script that gets all the images for the array:
PHP Code:
<?

//PHP SCRIPT: getimages.php

Header("content-type: application/x-javascript");



//This function gets the file names of all images in the current directory

//and ouputs them as a JavaScript array

function returnimages($dirname=".") {

$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions

$files = array();

$curimage=0;

if($handle = opendir($dirname)) {

while(false !== ($file = readdir($handle))){

if(eregi($pattern, $file)){ //if this file is a valid image

//Output it as a JavaScript array element

echo 'galleryarray['.$curimage.']="'.$file .'";';

$curimage++;

}

}



closedir($handle);

}

return($files);

}



echo 'var galleryarray=new Array();'; //Define array in JavaScript

returnimages() //Output the array elements containing the image file names

?>



Main html page with the javascript:


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}



function initImage() {

  imageId = 'slideshow';

  image = document.getElementById(imageId);

  setOpacity(image, 0);

  image.style.visibility = 'visible';

  fadeIn(imageId,0);

}



function setOpacity(obj, opacity) {

  opacity = (opacity == 100)?99.999:opacity;

  

  // IE/Win

  obj.style.filter = "alpha(opacity:"+opacity+")";

  

  // Safari<1.2, Konqueror

  obj.style.KHTMLOpacity = opacity/100;

  

  // Older Mozilla and Firefox

  obj.style.MozOpacity = opacity/100;

  

  // Safari 1.2, newer Firefox and Mozilla, CSS3

  obj.style.opacity = opacity/100;

}



function fadeIn(objId,opacity) {

  if (document.getElementById) {

    obj = document.getElementById(objId);

    if (opacity <= 100) {

      setOpacity(obj, opacity);

      opacity += 10;

      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);

    }

  }

}



window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

If anyone could assist me in doing so or can help me find a better way to do the fading images for the slideshow feel free to share.. here's the main page code WITHOUT the fading code:




Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}






window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

Hi, I am using a slideshow and want to basically have an 'image loading' whilst all the images load before the slideshow. Is there a way to do this? So far I have figured the best way around this is to have a GIF as a background image that says the loading message, and then once the slideshow loads over the top its fine, however im guessing this is'nt the right way to do this. I am using this slideshow set to just loop:

http://www.dynamicdrive.com/dynamici...lslideshow.htm

I am open to using other similar slideshows if there is one more suited.

Thanks

Here is a simple slideshow with an on-off button. The images (7 defined) are numbered 01-07.jpg and in the same folder.

My question. How to call the images from a different folder with the script.

I can change the <img scr> HTML tag to include a directory where the images are but how do I tell the script?

Thanks in advance!


---page code below---

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<script type="text/javascript">
var Start = 1
var Timer3
function SlideShow()
{
if (document.all.ShowButton.value == "Stop Show") {
clearInterval(Timer3)
document.all.ShowButton.value = "Start Show"
} else {
document.all.ShowButton.value = "Stop Show"
Timer3 = setInterval("NextPic()" ,3000)
}
}
function NextPic()
{
Start += 1
if (Start > 7) {
Start = 1
}
document.all.Pic.src = "0" + Start + ".jpg"
}
</script>

<body>
<img id="Pic" src="01.jpg"></p>
<input id="ShowButton" type="button" value="Start Show" style="font-size:9pt"
onclick="SlideShow()"/><br>
</body>

</html>