...

View Full Version : Slideshow script - multiple "screens"



robsta
07-17-2003, 04:25 AM
Hi -

I need help modifying a script so that I can run three slideshows on the same page at once - creating a look that approximates 3 projector "screens".

Is this possible?

Here's a link to the page I'm experimenting with: * SLIDESHOW * (http://www.fond-regards.com/SlideshowMultipleWindows.html)

Here' the script I'm using:

<script language="JavaScript">
<!-- Original: CodeLifter.com (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'imgs/image1.jpg'
Pic[1] = 'imgs/slideblank.jpg'
Pic[2] = 'imgs/text3.jpg'
Pic[3] = 'imgs/slideblank.jpg'
Pic[4] = 'imgs/image3.jpg'
Pic[5] = 'imgs/slideblank.jpg'
Pic[6] = 'imgs/text2.jpg'
Pic[7] = 'imgs/slideblank.jpg'
Pic[6] = 'imgs/image2.jpg'
Pic[7] = 'imgs/slideblank.jpg'

// do not edit anything below this line
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=3)";
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>

Can this be modified, or is there something else out there that might work.

Look forward to all and any suggestions.

- Robsta

glenngv
07-17-2003, 10:33 AM
With due respect to the original author, I have modified the original code to allow multiple slideshows to run. It was made possible by making the code object oriented.

My implementation for the timer for each slide does not look good. If you want, you can integrate this object-oriented timeout script found here (http://www.codingforums.com/showthread.php?s=&threadid=10531).

robsta
07-17-2003, 04:42 PM
Thank you Glenn for taking the time to come up with a solution to slideshow problem.

I'll take a look at what you did and get back to you to let you know how I fared.

Again, much thanks -

Robsta :)

robsta
07-17-2003, 09:55 PM
Hello Glenn -

Your script modification works wonderfully - it's just what I had in mind - thanks!!!

I'm playing around with timing and image sequence - I'll post the TEST page to my web site once I get it all figured out - I'll send you the link once it's posted.

Q: Do you know how I can improve the image fade-in/fade-out?

Look forward to your reply.

Robsta :)

robsta
07-18-2003, 12:29 AM
Hi Glenn -

Here's the page link if you'd like to see how your script modification worked out.

Link: * SLIDESHOW * (http://www.fond-regards.com/SlideshowMultipleWindows.html)

Much thanks for all your help. :thumbsup:

glenngv
07-18-2003, 03:29 AM
Glad you made it worked. :)
For tutorial on blend transition, see
http://www.webreference.com/dhtml/column13/fadeIEone.html

THX
05-23-2004, 01:26 PM
I am using the code kindly provided by glenngv but I would like to be able to have each image have its own link. I know next to nothing about java so I'd appreciate if someone could help me out by modifying glenngv's code or if gleengv is still around if you could do it for me please :)

thankyou.

Vladdy
05-23-2004, 03:31 PM
I am using the code kindly provided by glenngv but I would like to be able to have each image have its own link. I know next to nothing about java so I'd appreciate if someone could help me out by modifying glenngv's code or if gleengv is still around if you could do it for me please :)

thankyou.

Try a script that separates functionality from content. Not only you can put any kind of mark-up in a slide, but it also becomes accessible to browsers with javascript disabled: www.klproductions.com/klslideshow.html

THX
05-24-2004, 12:04 PM
I just need some help on how to add links to these pictures, not a fully fleged program that will cost me money that you are advertising.

immedicable
05-24-2004, 12:11 PM
i'm stupid

THX
05-24-2004, 02:14 PM
put this in the div tag holding the pic in question



href="yourlink.html"



like this



<div id="whatever" href="yourlink.html"><img src="whatever.jpg"></div>



and i believe script referenced above has a free evaluation download

There is no div tag within the code I am using..?


<!-- Begin

function SlideShow(imgName,speed,duration){
var p; //length of Pic array
var j = 0;
var slide = imgName;
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = speed;
// Duration of crossfade (seconds)
var crossFadeDuration = duration;
var Pic = new Array();
this.timer = null;
this.setPics = function(){
var preLoad = new Array();
//set pics and preload
for (var i=0;i<arguments.length;i++){
Pic[i] = arguments[i];
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
p = Pic.length;
}
this.runSlideShow = function(varName){
var t;
if (document.all) {
document.images[slide].style.filter="blendTrans(duration=3)";
document.images[slide].style.filter="blendTrans(duration=crossFadeDuration)";
document.images[slide].filters.blendTrans.Apply();
}
document.images[slide].src = Pic[j];
if (document.all) {
document.images[slide].filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
this.timer = setTimeout(varName+".runSlideShow('"+varName+"')", slideShowSpeed);

}
this.stopSlideShow = function(){
if (this.timer) clearTimeout(this.timer);
}
}
//end script

//sample usage
var slide1 = new SlideShow('SlideShow1',20000,3);
slide1.setPics("images/index/x8001.jpg","images/index/172x1.jpg","images/index/x61701.jpg","images/index/trade1.jpg");

var slide2 = new SlideShow('SlideShow2',20000,3);
slide2.setPics("images/index/x8002.jpg","images/index/172x2.jpg","images/index/x61702.jpg","images/index/trade2.jpg");

//if you want to start slideshows onload
window.onload = function(){
slide1.runSlideShow('slide1');
slide2.runSlideShow('slide2');
}

// End -->
</script><img name="SlideShow1" src="images/index/x8001.jpg">&nbsp;&nbsp;<img name="SlideShow2" src="images/index/x8002.jpg">

immedicable
05-24-2004, 02:25 PM
then put one there ;)

or you can put <a href="whatever.html"></a> instead, like this:


</script><a href="whatever.html"><img name="SlideShow1" src="images/index/x8001.jpg"></a>&nbsp;&nbsp;<img name="SlideShow2" src="images/index/x8002.jpg">


i didnt take a good look at your script, but the a method will apply the link to the image itself, so if the script changes what images is displayed (not just the source, but the inner html entirely) you might want to use the div method, since that will apply the link to an 'invisible envelope' that's around anything between the tags, image or text or whatever.

good luck :)

glenngv
05-25-2004, 03:53 AM
put this in the div tag holding the pic in question



href="yourlink.html"



like this



<div id="whatever" href="yourlink.html"><img src="whatever.jpg"></div>



and i believe script referenced above has a free evaluation download
You just can't make div as links like that. :eek: :rolleyes:

THX, try this modified version:


<script type="text/javascript">

function SlideShow(imgName, speed, duration, makeLink){
var p; //length of Pic array
var j = 0;
var slide = imgName;
var me = this;
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = speed;
// Duration of crossfade (seconds)
var crossFadeDuration = duration;
var Pic = new Array();
this.timer = null;

this.setPics = function(){
var preLoad = new Array();
//set pics and preload
for (var i=0;i<arguments.length;i++){
Pic[i] = arguments[i];
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
p = Pic.length;
if (makeLink){
//set onclick handler
document.images[slide].onclick=function(){
window.open(this.src,"_blank"); //opens in new window
//location.href=this.src; //use this instead if you want the image to open in the same window
}
//set cursor to make the image appear as link
document.images[slide].style.cursor=(document.all)?'hand':'pointer';
}
}

this.runSlideShow = function(){
var t;
if (document.all) {
document.images[slide].style.filter="blendTrans(duration=3)";
document.images[slide].style.filter="blendTrans(duration=crossFadeDuration)";
document.images[slide].filters.blendTrans.Apply();
}
document.images[slide].src = Pic[j];
if (document.all) {
document.images[slide].filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
this.timer = setTimeout(function(){me.runSlideShow()}, slideShowSpeed);
}

this.stopSlideShow = function(){
if (this.timer) clearTimeout(this.timer);
}
}
//end script

//sample usage
var slide1 = new SlideShow('SlideShow1', 20000, 3, true);
slide1.setPics("images/index/x8001.jpg","images/index/172x1.jpg","images/index/x61701.jpg","images/index/trade1.jpg");

var slide2 = new SlideShow('SlideShow2', 20000, 3, true);
slide2.setPics("images/index/x8002.jpg","images/index/172x2.jpg","images/index/x61702.jpg","images/index/trade2.jpg");

//if you want to start slideshows onload
window.onload = function(){
slide1.runSlideShow();
slide2.runSlideShow();
}

// End -->
</script>
...
<img name="SlideShow1" src="images/index/x8001.jpg">&nbsp;&nbsp;<img name="SlideShow2" src="images/index/x8002.jpg">

I added a parameter in the SlideShow constructor to specify if image will be linked or not. I also modified the timer implementation.

THX
05-25-2004, 05:15 PM
Thanks glenn, I will give it a try :)

THX
05-26-2004, 02:00 PM
Does not seem to work anymore? Also if I understand it correctly, you have simply modified it to make the picture a link rather then make each picture have its own individual link to another page.

glenngv
05-26-2004, 02:15 PM
Have not tested the code when I posted it. Did you encounter any error? Please elaborate instead of just saying "it does not work".

I modified the script in such a way that the <img> tag is clickable and it will open the current src of the image to a new window. Is that what you want?

THX
05-27-2004, 11:53 AM
I did not do any debugging but basically it stopped being a slideshow, would stay on the initial picture and not show the next one.

What I would like is each picture to have its own link to a page I can specify

Vladdy
05-27-2004, 01:41 PM
Just out of curiosity, THX, how much time have you already spent trying to "add links to these pictures"?

THX
05-28-2004, 11:41 AM
I know nothing about java, zilch, zippo, nadda, nothing so if your question is a veiled attempt at having a go at me for not trying myself so be it, but take note that I would not have the first clue as to where to start to code what I would like this slideshow to do.

glenngv
05-28-2004, 12:56 PM
Try using another script

http://www.dynamicdrive.com/dynamicindex14/dhtmlslide.htm

Vladdy
05-28-2004, 02:42 PM
I know nothing about java, zilch, zippo, nadda, nothing so if your question is a veiled attempt at having a go at me for not trying myself so be it, but take note that I would not have the first clue as to where to start to code what I would like this slideshow to do.
What I'm curious about is the paradox of human psychology. I offered you a solution that fits all your requirements and needs next to no knowledge of javascript to be incorporated in a web page. You dismiss is just because, as most good things, it costs some money.
I would understand that, if you were learning how to script yourself, but by your own admission you are not.
So now after a few days, it does not seem like you got anywhere. If you learnt a secret how time!=money maybe you can share?

THX
05-29-2004, 08:10 AM
What I'm curious about is the paradox of human psychology. I offered you a solution that fits all your requirements and needs next to no knowledge of javascript to be incorporated in a web page. You dismiss is just because, as most good things, it costs some money.
I would understand that, if you were learning how to script yourself, but by your own admission you are not.
So now after a few days, it does not seem like you got anywhere. If you learnt a secret how time!=money maybe you can share?

When you have no money to buy the solution then it does not remain a choice now does it. There is no paradox there, just simple maths. Seems strange you cannot understand this.

Vladdy
05-29-2004, 03:42 PM
Yeah that is a simple Math:
You spend, say 10 hours, trying to do something you have no clue about getting nowhere.
You can spend same 10 hours mowing neighbour's lawn (or doing whatever that is you are good at) earning $50 (or whatever your rate is) and using that money to buy a solution to your problem.

You are right. Simple math. Same 10 hours. Different results. And the people's choice to go the former route that gets them nowhere, is what I can not understand.

THX
05-30-2004, 10:34 AM
Yeah that is a simple Math:
You spend, say 10 hours, trying to do something you have no clue about getting nowhere.
You can spend same 10 hours mowing neighbour's lawn (or doing whatever that is you are good at) earning $50 (or whatever your rate is) and using that money to buy a solution to your problem.

You are right. Simple math. Same 10 hours. Different results. And the people's choice to go the former route that gets them nowhere, is what I can not understand.

It is simple math, not sure how else I can explain it to you so you understand. Regardless I shall let you get back to mowing your neighbours lawn for your pocket money.

I'll also like to say thanks to glenngv for trying to create a solution for me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum