|
JavaScript - Image Slideshow With Crossfade In Div
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">
Similar TutorialsI am working on a simple image crossfade for my website, and i downloaded a good file folder with a javascript code that works well. it's exactly what i'm trying to achieve. yet, when i put in the code into my webpage index it doesn't fade like it should. the images fade out but don't cross-fade into each other. I tried testing the original file/script with alternate images/jpgs to see if my images were messing things up but it was fine, yet when i use MY webpage in MY root folder it doesn't work. so is there something wrong with my rootfolder that is messing up the javascript? i'm pulling my hair out because the code looks fine to me. please help! thanks!! jason Code: I am trying to get the following image fade code to work but can't seem to figure out what the problem is. The images appear quickly (don't fade one to the other) in Firefox and Google and in IE8 when the image fades, even though the images are the same size, the new image starts out smaller and grows to the final size. Any suggestions are greatly appreciated.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 2500;
// Specify the image files
var Pic = new Array();
Pic[0] = 'images/Monsanto.gif'
Pic[1] = 'images/Test2.jpg'
Pic[2] = 'images/Test3.jpg'
Pic[3] = 'images/Test4.jpg'
Pic[4] = 'images/Test5.jpg'
Pic[5] = 'images/Test1.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];
}
preLoad.sort(function() {return 0.5 - Math.random()});
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);
}
// End -->
</script>
I am trying to persuade the javascript to fade from one image into the next, but I'm only succeeding at fading into nothing, and then making the next image appear. The effect can be seen he http://userpages.bright.net/~toddw/orbit/aheader0.html The effect that I am trying to achieve is he http://userpages.bright.net/~toddw/orbit/aheader9.html the problem with the second example is that I can't figure out how to add the navigation controls,… so I thought it would be easier to address the crossfade with the first example. Code: var openBtn2 = "images/Button_open.gif";
var solidBtn2 = "images/Button_solid.gif";
var intervalID2;
var showing2 = 1;
var truckArray = new Array("","truck1","truck2","truck3","truck4");
var truckbtnArray = new Array("","truckBtn1","truckBtn2","truckBtn3","truckBtn4");
var inProgress2 = false;
function swapTruck(next) {
if (inProgress2) return;
inProgress2 = true;
if (next == 0) { next = showing2 + 1; } //if swapTruck is not called from a button
if (next == 5) { next = 1; } ***//if its the last news item
new Effect.Fade(truckArray[showing2], { duration: 0.3});
setTimeout(function() {
$(truckbtnArray[showing2]).src = openBtn2
$(truckbtnArray[showing2]).style.cursor = "pointer"
$(truckbtnArray[next]).src = solidBtn2
$(truckbtnArray[next]).style.cursor = "default"
new Effect.Appear(truckArray[next], { duration: 0.3})
showing2 = next
inProgress2 = false
}, 300);
clearInterval(intervalID2);
intervalID2 = setInterval("swapTruck(0)", 25000);
}
Event.observe(window, 'load', function() { //this binds the function() to the event window.onload
intervalID2 = setInterval("swapTruck(0)", 25000);
$("truckBtn1").src = solidBtn2;
$("truckBtn2").src = openBtn2;
$("truckBtn2").style.cursor = "pointer";
$("truckBtn3").src = openBtn2;
$("truckBtn3").style.cursor = "pointer";
$("truckBtn4").src = openBtn2;
$("truckBtn4").style.cursor = "pointer";
});
My html looks like this: <!-- define images for fading into each other --> <div id="slider"> <div id="truck1"><img src="c5_app_2.jpg" title="" /></div> <div id="truck2" style="display:none;"><img src="infolink_main.jpg" title="" /></div> <div id="truck3" style="display:none;"><img src="rr5700_app_2.jpg" title="" /></div> <div id="truck4" style="display:none;"><img src="c5_app_1.jpg" title="" /></div> </div> <!-- navigational buttons for image fade --> <div class="truck_buttons"> <img src="(EmptyReference!)" onClick="swapTruck(1)" id="truckBtn1"> <img src="(EmptyReference!)" onClick="swapTruck(2)" id="truckBtn2"> <img src="(EmptyReference!)" onClick="swapTruck(3)" id="truckBtn3"> <img src="(EmptyReference!)" onClick="swapTruck(4)" id="truckBtn4"> </div> Hi there, for a site I'm working on I needed an interactive crossfading slideshow (one that doesn't just run automatically, but with 'previous' and 'next' links) and noticed that all the solutions I stumbled upon fall into one of two categories: 1.) the ones that in some way or other break if the user clicks too fast through the images (i.e. fast enough that the previous crossfade is not completely finished when triggering the next one) 2.) the ones that block any user interactions until the last crossfade is finished Obviously neither is very useful, so I wrote my own. I'm just wondering now, does anyone of you know of any good reusable crossfading slideshow that not only works as it should, but does so without blocking user interaction while fading? As a user, I don't have the patience for those time wasters any more. If there's nothing good out there, I'm tempted to make it a jQuery plugin, but I wouldn't much like to find out later that there has been a perfectly good plugin out there all along. So, if you know of one or have any other helpful suggestions, please tell me. 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? 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, 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!!! 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????
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>
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 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 Hi, Im using the following javascript to cycle through 3 images on my website header. http://www.dynamicdrive.com/dynamici...nslideshow.htm However, I have put it in a div layer and it works fine, except in Internet explorer, if you load the page in a small window and then maximise, it moves out of position. Similarly if you open the page maximised, and then make the page smaller, it again moves out of position. My page layout is centered on the web page. is there anyone who could help me? I have a jQuery Slideshow script that i'm using and it's all done in 6 lines. Code: $(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css. Code: .fadein {
position:relative;
width:100%;
height:300px;
background-color:#000;
overflow:hidden
}
.fadein img {
position:relative;
left:300px;
width:auto;
text-align:center;
top:0px;
}
jonathaneiger.com I have used the script I downloaded from here. I have 3 images to run through. Its all works, BUT! My images are 3072 x 2034 in size, and thats what comes up on the page when loaded. I set the var slideheight and width entries in the code for 500 and 500. It seems to not read the var statement. I would like to leave the orogical images as is, so when clicked on they load full size. Any ideas would be great. 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> hi im creating a simple slide show and i was wondering how to add multiple sets of image. heres my current code Code:
<html>
<head>
<script type="text/javascript">
var Images = new Array
('images/up.jpg','images/right.jpg','images/down.jpg','images/left.jpg');
//my second group of images...
//('images/bottemleft.jpg','images/topleft.jpg','images/centerstep.jpg','images/topleft.jpg','images/bottemright.jpg');
var thisPic = 0;
function initLinks() {
document.getElementById("nextLink").onclick = processNext;
document.getElementById("backlink").onclick = processBack;
document.getElementById("fplaylink").onclick = processfplay;
document.getElementById("bplaylink").onclick = processbplay;
document.getElementById("stoplink").onclick = processstop;
}
function processNext() {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processBack() {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
var stop = 0
function processfplay() {
if (stop == 1) {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
setTimeout("processfplay()", 200);
}
else {
stop = 1 ;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processbplay() {
if (stop == 2) {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
setTimeout("processbplay()", 200);
}
else {
stop = 2;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processstop (){
(stop = 0)
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
</script>
</head>
<body onload=initLinks() >
<h2 align= center>Images used in the slideshow below</h2>
<table align= center>
<tr><td><img src= "images/left.jpg"></td><td><img src= "images/down.jpg"></td>
<td><img src= "images/up.jpg"></td><td><img src= "images/right.jpg"></td></tr>
</table>
<table align= center>
<td><img src= "images/bottemleft.jpg"></td><td><img src= "images/topleft.jpg"></td>
<td><img src= "images/centerstep.jpg"></td>
<td><img src= "images/topright.jpg"></td><td><img src= "images/bottemright.jpg"></td>
</table>
<div align="center">
<h2>The Slidshow</h2>
<img src="images/ddrlogo.jpg" id="myPicture" alt="Slideshow" />
<h2>
<a href="any_old.html" id="nextLink">Next >></a><br/>
<a href="any_old.html" id="backlink">Back <<</a><br/>
<a href="any_old.html" id="fplaylink">Forward Play <<</a><br/>
<a href="any_old.html" id="bplaylink">backward Play <<</a><br/>
<a href="any_old.html" id="stoplink">Stop <<</a><br/>
</h2>
</div>
</body>
</html>
thanx in advance 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 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>
Hello there - I have been trying all morning to put a basic slideshow into my site from the below link http://www.javascriptkit.com/script/...bleslide.shtml I am pretty new to this and having to host my images on Photobucket as I use Big Cartel. I cannot figure out where to put the image links and do they need - <a href=" " ></a> or just direct links? I would greatly appreciate any help as my eyes are now hurting!!! Thanks Alice |
|||||||