JavaScript - Creating Customized Slideshow?

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.

I worked a lot with a friend to change the code, and it's almost there. The next and last buttons still work. The Start buttons is titled 'wri' and the latest button is titled 'end'. The end button does not work. Before I added the end button, the start button worked, but now it sends you to the image alt. Any ideas on what went wrong?

Code:

window.onload = initLinks;

var myPix = new Array("comic/Issue1_Page00.gif","comic/Issue1_Page01.gif","comic/Issue1_Page02.gif");
var thisPic = 0;

function initLinks() {
	document.getElementById("prevLink").onclick = processPrevious;
	document.getElementById("nextLink").onclick = processNext;

}



function processPrevious() {
	if (thisPic == 0) {
		thisPic = myPix.length;
	}
	thisPic--;
	document.getElementById("myPicture").src = myPix[thisPic];
	return false;
}

function processNext() {
	thisPic++;
	if (thisPic == myPix.length) {
		thisPic = 0;
	}
	document.getElementById("myPicture").src = myPix[thisPic];
	return false;
}

// Load Images
if (document.images) {  

  writeImg = new Image();      
  writeImg.src = (comic/Issue1_Page03.gif);
  
}

function imgOn(imgName) {
  if (imgName == 'end') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}

  return false;
}


// Load Images
if (document.images) {  

  writeImg = new Image();      
  writeImg.src = (comic/Issue1_Page00.gif);
  
}

function imgOn(imgName) {
  if (imgName == 'wri') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}

  return false;
}

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

Solved

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.

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

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?

This slideshow has a drop down menu that lets you go from one picture to another.

Can someone help me modify it so that instead of a dropdown menu i have a list of numbers (horizontally,not vertically)?

I know absolutley nothing about javascript. sorry.

Thanks programmers!

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();

theimage[0]=["url", "", "1"];
theimage[1]=["url", "", "2"];
theimage[2]=["url", "", "3"];

//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//"jump to" box
for (y=0;y<theimage.length;y++) {
document.slideshow.imgComboBox[y]=new Option(theimage[y][2]);
}

//set the first slide
SetSlide(0);

}

//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;

//switch the image
document.images.imgslide.src=theimage[i][0];

//if drop down box
if(document.slideshow.imgComboBox){
document.slideshow.imgComboBox.selectedIndex = i;
}

//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];

}


//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}


//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}


</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<select name="imgComboBox" onchange="SetSlide(document.slideshow.imgComboBox.selectedIndex);"></select>
</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

Hello. I was wondering where I can find something like this:



It's a slideshow. I need one for my site. Thank you.

I am new to both javascript and .asp. I'm hoping someone here can help me accomplish this task.

There is a slideshow on this homepage: http://www.ledson.com

The same type of slideshow needs to go on this page, in approx the same spot (right under the logo on the left side): http://ledsonhotel.com

I did not write the code for the original site so it's a little confusing to me. I have placed the files in what I believe to be the appropriate folders and added the same code, but my slideshow doesn't show up.
Is there a simpler javascript slideshow that I can add here that will go under the logo?

Thanks!

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

http://visualslideshow.com/

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

Hi there,

I have a slideshow that gathers images from a database. I've been trying to set it up to where it extracts the IMG SRC accordingly so when I click on the image, the lightbox shows the corresponding image. But no luck thus far.

Here's what I mean:
Code:

<SCRIPT TYPE="text/javascript">
<!--
SLIDES = new slideshow("SLIDES");

<?php do { ?>
s = new slide();
s.src = '<?php echo $row_paintings['painting']; ?>';
s.text = '<b><?php echo $row_paintings['title']; ?></b><br /><span style="font-size:10px;"><?php echo $row_paintings['material']; ?><br /><?php echo $row_paintings['size']; ?><br /><?php echo $row_paintings['date_created']; ?></span>';
SLIDES.add_slide(s);
<?php
} while ($row_paintings = mysql_fetch_assoc($paintings)); ?>
//-->
</script>

How can I extract the current "s.src" parameter and use it on the "img src" tag to display the image accordingly?

Any help would be much appreciated.

Thanks!