...

View Full Version : Limiting cycling in Javascript slideshow code?



yoowho
12-24-2011, 06:19 PM
Dear Forum Members

HI, I am no coder, however I am modifying my website and changing the slideshow to the one found on this website, most wonderful,
the Cut & Paste JavaScript Slideshow( http://www.javascriptkit.com/script/script2/jsslide.shtml )

I have it working now, and I have but one question, does the code include a way to limit the number of times that it cycles through the slides? So it just freezes on one photo after x number of cycles?

many thanks, and happy holidays...

jmrker
12-24-2011, 06:49 PM
I believe if you change to the section below it will do what you desire after 3 cycles.
Change the cycleLimit variable for other counts.


<a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
<script type="text/javascript">

//configure the paths of the images, plus corresponding target links
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000;
var cycleLimit = 3 * slideshowimages.length;
var whichlink=0;
var whichimage=0;

function slideit(){
if (!document.images) { return; }
document.images.slide.src=slideimages[whichimage].src;
whichlink=whichimage;
if (whichimage<slideimages.length-1) {
whichimage++;
} else {
whichimage=0;
};
cycleLimit--;
if (cycleLimit >= 0) { setTimeout("slideit()",slideshowspeed); }
}
slideit();

</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

Code is untested at this time, but it should work.
Basically, I'm just turning off the setTimeout function after a number of cycles through the image list.

xelawho
12-24-2011, 07:02 PM
it seems to be rather ancient code you can do it like this:



<body>
<img src="pic3.jpg" id="pic"></div>
<script type="text/javascript">
var pics=["pic1.jpg", "pic2.jpg","pic3.jpg" ]
var j=0;
var loop=0;
var slideshowspeed=2000;
int=setInterval(show,slideshowspeed)
function show() {
document.getElementById("pic").src=pics[j++%pics.length]
if (j++%pics.length==0){loop++;}
if (loop==2){clearInterval(int)}
}
</script>

</body>


and change the 2 in the line if (loop==2){clearInterval(int)} to how many loops you want to do before it stops

yoowho
12-24-2011, 07:50 PM
Big Thanks but dang, I couldn't get either suggestion to work

@jmrker-for whatever reason pasting in your code didn't show results.

@xelawho- i am unclear on a few things, I tried as many possibilities as I could but none obtained results
-is this a replacement for the entire slideshow? or is it to be inserted as part of the slideshow and if so, can you be more specific?
-it would seem that i would have to rename the jpgs by adding the pic prefix?
thanks

xelawho
12-24-2011, 07:59 PM
yes, it's a replacement for the entire thing, although it doesn't have the links feature that the original does, but that is easy to add.

you could rename your pics, or else just change the lines in the code I gave you from:

<img src="pic3.jpg" id="pic">
to:

<img src="food1.jpg" id="pic">

and the line:

var pics=["pic1.jpg", "pic2.jpg","pic3.jpg" ]
to:

var pics=["food2.jpg","food3.jpg","food4.jpg","food5.jpg",
"food1.jpg" ]

to have it working with the same images as the example you posted.

yoowho
12-24-2011, 08:11 PM
to @xelawho

so in this version, the size of the slideshow is defined by the size of the jpegs rather than instructions at the top of the code as in original?

seems so since I see the first image, but that's all I see, it doesn't change...will play some more

but no slideshow at present

this is what i have put up, as the jpegs are in a separate folder (Slideshow) they are shown as such
but in dreamweaver, in the var pics line, each jpeg number is in red, which I believe means that they don't link up...
<img src="Slideshow/7.jpg" id="pic"></div>
<script type="text/javascript">
var pics=[Slideshow/1.jpg","Slideshow/2.jpg","Slideshow/3.jpg","Slideshow/4.jpg","Slideshow/5.jpg","Slideshow/6.jpg","Slideshow/7.jpg ]
var j=0;
var loop=0;
var slideshowspeed=2000;
int=setInterval(show,slideshowspeed)
function show() {
document.getElementById("pic").src=pics[j++%pics.length]
if (j++%pics.length==0){loop++;}
if (loop==2){clearInterval(int)}
}
</script>
thanks

xelawho
12-24-2011, 08:27 PM
try it with this:


var pics=["Slideshow/1.jpg","Slideshow/2.jpg","Slideshow/3.jpg","Slideshow/4.jpg","Slideshow/5.jpg","Slideshow/6.jpg","Slideshow/7.jpg" ]

yoowho
12-24-2011, 08:34 PM
@xelawho

trouble shooting some issues

jmrker
12-25-2011, 05:17 AM
Big Thanks but dang, I couldn't get either suggestion to work

@jmrker-for whatever reason pasting in your code didn't show results.

...

Since you did not paste the code you were testing, it is difficult to tell you what you may be doing wrong.

Here is some modified and tested code.
Change the appropriate links for the images and re-directions.



<!DOC HTML>
<html>
<head>
<title> Limit Loop Gallery </title>
<script type="text/javascript">

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!

// Updated and modified by: jmrker
// For: http://www.codingforums.com/showthread.php?p=1173890#post1173890
*/

//configure the paths of the images, plus corresponding target links
var slideimages = [
"http://www.javascriptkit.com/script/script2/photo1.jpg",
"http://www.javascriptkit.com/script/script2/photo2.jpg",
"http://www.javascriptkit.com/script/script2/photo3.jpg" // No comma after last entry
];
var slidelinks = [
"http://food.epicurious.com/run/recipe/view?id=13285",
"http://food.epicurious.com/run/recipe/view?id=10092",
"http://food.epicurious.com/run/recipe/view?id=100975" // No comma after last entry
];

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000;
var cycleLimit = 3 * slideimages.length;
var whichimage=0;

function slideit(){
if (!document.images) { alert('Very old machine'); return; }
document.getElementById('slide').src = slideimages[whichimage];
if (whichimage < slideimages.length-1) { whichimage++; }
else { whichimage=0; };
cycleLimit--;
if (cycleLimit > 0) { setTimeout("slideit()",slideshowspeed); }
// alternative halt
// if (cycleLimit == 0) { clearTimeout(); }
}
window.onload = function() {
slideit();
}
</script>

</head>
<body>
<a href="javascript:location.href=slidelinks[whichimage]">
<img src="" id="slide" border=0 width=300 height=375>
</a>

<p align="center">
<font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">
JavaScript Kit</a></font>
</p>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum