JavaScript - Slideshow Glitch In Ie7

I created a slideshow that displays the 5 images randomly. It is for a college project for a class I am in. Here is the HTML for the area that holds the images

Code:

<div id="imageBox">

                <!-- Random Images -->

                <img src="images/image1.jpg" width="200" height="200" alt="School Images" id="randImage" />

                        </div>

and here is the external .js file for it

Code:

window.onload = pics;

var thisPic = 0;

 

        var schoolImages = new Array("images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg");

 

function pics(){

 

       

        thisPic = Math.floor((Math.random() * schoolImages.length));

       

        document.getElementById('randImage').src = schoolImages[thisPic];      

       

        cycle();

       

       

}

 

function cycle(){

       

        thisPic++;

       

        if(thisPic == schoolImages.length){

                thisPic = 0;

        }

       

        document.getElementById('randImage').src = schoolImages[thisPic];

       

        setTimeout(cycle, 3 * 1000);
               
     
}

I had the slideshow working completely fine... then when i finished the rest of the site and added more pages, it is now not working for me. It just sits at the original image that is loaded when they site loads. Does anyone see any issues to what is making this not work correctly now?

hi evey one
I need a slideshow like this website .

zbiddy.com

as you can see , in the top of the page is a slide show . I just need a slideshow that change the content of each slide .

I've made my content for each slide and just need a script that change these content

I need your help very much
Thanks

Hello everybody!

first of all I must specify that I don't know almost anything about javascript... I'm trying to introduce a javascript slideshow (I found a free one) on our website and I have a problem:

As you can see here on the bottom of the page (http://www.comelity.com/en/pages/about-us.php), when the slideshow changes image, it puts a link over the image without any reason and if you click on the image it reloads the page... I would like to remove this link, but I'm not able... Does anyone know how to solve the problem? I can send the javascript slideshow if you want...

Thank you very much!

S.P.

Code:

var mySlideShow = document.getElementById("slideShow");

var imageArray=new Array(); 
imageArray[0]="url(images/Slide1.JPG)";       
imageArray[1]="url(images/Slide2.JPG)";
imageArray[2]="url(images/Slide3.JPG)";


var imageIndex = 0;

var leftArrow = document.getElementById("left");
var rightArrow = document.getElementById("right");

mySlideShow.style.backgroundImage = "url(images/Slide1.JPG";


function changeRight  () {

mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex++;


	if (imageIndex >= imageArray.length) {
	imageIndex = 1;


	
	}
	
	console.log(imageIndex);
	
}


function changeLeft  () {

mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex--;
console.log(imageIndex);
	
}




rightArrow.onclick = function() {
	
	changeRight();
	
	}
	
leftArrow.onclick = function() {
	
	changeLeft();
	
}

So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work.

Any help would be awesome.

Solved

Hi,

I desperately need a javascript slideshow that does the following:

1--shows still images with thumbnails
2--can be played manually or automatically
3--can embed youtube videos
4--audio can accompany slideshows
5--powered by javascript, not Flash so it shows up on iPad

Does anyone know where I can get such a slideshow? Thanks

I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back.

Here is the book and the case problem I am on:
http://books.google.com/books?id=BeE...page&q&f=false

Basically the images is not loading up, or anything is happening.

//EDIT : I have the function setup() onLoad in the body ( body onload="setup()" )

Here is my code:

FileName: flibrary.js

Code:

function getStyle(object, styleName) {
   if (window.getComputedStyle) {
      return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
   } else if (object.currentStyle) {
      return object.currentStyle[styleName]
   }
}

// step 3
function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
            object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
   if (object.detachEvent)
       object.detachEvent("on" + evName, fnName);
   else if (object.removeEventListener)
            object.removeEventListener(evName, fnName, cap);
}

FileName: slideshows.js
Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 6
   Case Problem 2

   Author:  
   Date:    

   Filename: slideshow.js


   Global Variables:
  
   scrollButton
      References the scrolling button in the slide show

   diffX
      Stores the horizontal distance in pixels between the
      mouse pointer when the scrolling button is clicked
      and the left edge of the scrolling button.

   Functions List:

   setup()
      Initializes the contents of the Web page. Creates
      event handlers for the mouse and keyboard events

   grabIt(e)
      "Grabs" the scrolling button to set up the
       horizontal scrolling of the slide show

   moveIt(e)
      Moves the scrolling button horizontally through
      the scrollbar

   showSlide(x)
      Shows the image corresponding the to the x coordinate
      on the scrollbar

   dropIt(e)
      Drops the scrolling button after the user releases the
      mouse button

   keyShow(e)
      Uses the left and right arrow keys to move the scrolling
      button through the scrollbar

*/

var scrollButton;
var diffX;
// step 7
function setup(){
	scrollButton = document.getElementById("button");
	scrollButton.style.top = getStyle(scrollButton,"top");
	scrollButton.style.left = getStyle(scrollButton,"left");
	scrollButton.style.cursor = "pointer";
	addEvent(scrollButton, "mousedown", grabIt, false);
	addEvent(document, "keydown", keyShow, false);
}	
// step 8
function grabIt(e){
	var evt = e || window.event;
	var mouseX = evt.clientX;
	diffX = parseInt(scrollButton.style.left)- mouseX;
	addEvent(scrollButton, "mousemove", moveIt, false);
	addEvent(scrollButton, "mouseup", dropIt, false);
}
// step 9
function moveIt(e){
	var evt = e || window.event;
	var mouseX = evt.clientX;
	var buttonPosX = mouseX - diffX;
	showSlide();
}
// step 10
function showSlide(x){
	if(x<20){
		x = 20;
	}
	if(x>299){
		x = 299;
	}
	scrollButton.style.left = x;
	var i = Math.floor((x-20)/31);
	document.getElementById("photo").src = image[i];
}
// step 11
function dropIt(e){
	removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
	var evt = e || window.event;
	var key = event.keyCode;
	var buttonPosX = scrollButton.style.left;
	if(key == 37) buttonPosX -= 31;
	if(key == 39) buttonPosX += 31;
	showSlide(buttonPosX);
}

Hey im looking to get 3 slide shows on 1 website (coded in php).

I need the slide shows to all show different images however all change images at the exact same time and have the exact same layout... how can i do this?

Hi, i'm not a Javascript programmer but have adapted this slideshow from an open source online and i need some help in adding some touches and finishing it off.

www.sixtydegreedays.com

I want to add timings to the main images so they scroll through at a set interval, as well as being able to be clicked through as they are now, can someone help with this?

Also, i cannot figure out where the first image (horsebox) goes once i have clicked through the other links - if i click back to horsebox, the image disappears!

These are the two most important things, but it would also be helpful if someone could help me pre-load the images to cut down on load time.

Hopefully these are quick fixes and someone can take the time to help.

Cheers

http://visualslideshow.com/

I want the code for the pictures slideshow that is used in the above link. Help me out!

I used the tutorial here to create a slideshow but would like to add captions... could anyone help me with the code? Below is part of the script I used... (there are 27 images so I cut it short...

head code:<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/pic_1.jpg"
var image2=new Image()
image2.src="images/pic_2.jpg"
var image3=new Image()
image3.src="images/pic_3.jpg"

body code: <img src="images/pic_1.jpg" name="slide" width=180 height=150>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<27)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}

slideit()
//-->
</script>


I would really appreciate any help as I am a newbie to this...

Hi everyone,

I'm pretty new to JS and I was wondering if anyone could put me on the right track to developing a slideshow which you can flip between the images manually or let it run through itself (and preferably contain links to other pages).

Basically, like the one at the top of the Valve website:
http://www.valvesoftware.com/index.html

Thanks all

I found the code for how to create a basic slideshow on javascript kit. It tells you the code for 3 images. I am adding more images to my slide show, but when I go to preview it, it loops through the first 3 pictures only. Is there something else I need to change in order to get it to loop through all my pictures?

Here is the code I got from the site:
<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<img src="firstcar.gif" name="slide" width="100" height="56" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html>

My code looks like this:

<!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" />
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="Model01.jpg"
var image2=new Image()
image2.src="Model02.jpg"
var image3=new Image()
image3.src="Model03.jpg"
var image4=new Image()
image4.src="Model04.jpg"
var image5=new Image()
image5.src="Model05.jpg"
var image6=new Image()
image6.src="Model06.jpg"
var image7=new Image()
image7.src="Model07.jpg"
var image8=new Image()
image8.src="Model08.jpg"
var image9=new Image()
image9.src="Model09.jpg"
var image10=new Image()
image10.src="Model10.jpg"
var image11=new Image()
image11.src="Model11.jpg"
var image12=new Image()
image12.src="Model12.jpg"
var image13=new Image()
image13.src="Model13.jpg"
var image14=new Image()
image14.src="Model14.jpg"
var image15=new Image()
image15.src="Model15.jpg"
var image16=new Image()
image16.src="Model16.jpg"
var image17=new Image()
image17.src="Model17.jpg"
var image18=new Image()
image18.src="Model18.jpg"
var image19=new Image()
image19.src="Model19.jpg"
var image20=new Image()
image20.src="Model20.jpg"
//-->
</script>

<title>Untitled Document</title>
</head>

<body>
<img src="file:///K|/Michaels Homes Web/Images/Model01.jpg" name="slide" width=500 height=375>
<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 3.0 seconds
setTimeout("slideit()",3000)
}
slideit()
//-->
</script>
</body>
</html>

This is just the code for the slideshow, not any of the code from the rest of my website. It does the same thing when I test it either the code only or the whole webpage.

If I am missing something in the steps, please let me know.
Thanks

Hello all, I'm having problems with Javascript coding, and was hoping someone could help me out. I have a site using prestashop -

http://www.dipsydaisy.co.uk

The slider at the top, I am having problems with..at the moment, it is scrolling auto, but randomly. I need to have this scrolling through images 1-3, then back to the beginning, and on a continuing loop. Also I would like to apply a fade effect on each slide, but being a total novice, not sure if this can be done?...Here is the coding I have applied to get autoscroll:

Code:

 intervalID = setInterval(makeScroll, 4000);
function makeScroll()
{
    var rand_no = Math.floor(11*Math.random());
    if (rand_no < 5)
        {
            $('#slides > .next > a').click();
        }
    else
        {
            $('#slides > .back > a').click();
        }

Hope someone can help! Many thanks.