Slideshow script - multiple "screens"

robsta · 07-17-2003, 03: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 *

Here' the script I'm using:

<script language="JavaScript">







</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, 09: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.

robsta · 07-17-2003, 03: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, 08: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-17-2003, 11:29 PM

Hi Glenn -

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

Link: * SLIDESHOW *

Much thanks for all your help.

glenngv · 07-18-2003, 02:29 AM

Glad you made it worked.

For tutorial on blend transition, see
http://www.webreference.com/dhtml/co...fadeIEone.html

THX · 05-23-2004, 12: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, 02:31 PM

Quote:

Originally Posted by THX

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, 11:04 AM

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, 11:11 AM

i'm stupid

THX · 05-24-2004, 01:14 PM

Quote:

Originally Posted by immedicable

put this in the div tag holding the pic in question

Code:

href="yourlink.html"

like this

Code:

<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..?

Quote:

</script><img name="SlideShow1" src="images/index/x8001.jpg">  <img name="SlideShow2" src="images/index/x8002.jpg">

immedicable · 05-24-2004, 01:25 PM

then put one there

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

Code:

</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, 02:53 AM

Quote:

Originally Posted by immedicable

put this in the div tag holding the pic in question

Code:

href="yourlink.html"

like this

Code:

<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.

THX, try this modified version:

Code:

<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, 04:15 PM

Thanks glenn, I will give it a try

THX · 05-26-2004, 01: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.