Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    New Coder
    Join Date
    Jul 2003
    Location
    U.S.A. Pacific N.W.
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh Slideshow script - multiple "screens"

    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">
    <!-- 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

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Attached Files Attached Files
    Last edited by glenngv; 07-17-2003 at 09:38 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New Coder
    Join Date
    Jul 2003
    Location
    U.S.A. Pacific N.W.
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh Much thanks!!!

    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

  • #4
    New Coder
    Join Date
    Jul 2003
    Location
    U.S.A. Pacific N.W.
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh Follow-up

    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

  • #5
    New Coder
    Join Date
    Jul 2003
    Location
    U.S.A. Pacific N.W.
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh Page link

    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.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glad you made it worked.
    For tutorial on blend transition, see
    http://www.webreference.com/dhtml/co...fadeIEone.html
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    THX
    THX is offline
    New to the CF scene
    Join Date
    May 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #9
    THX
    THX is offline
    New to the CF scene
    Join Date
    May 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'm stupid
    Last edited by immedicable; 05-25-2004 at 04:12 AM. Reason: i'm retarded

  • #11
    THX
    THX is offline
    New to the CF scene
    Join Date
    May 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..?

    <!-- 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">

  • #12
    Registered User
    Join Date
    Apr 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #14
    THX
    THX is offline
    New to the CF scene
    Join Date
    May 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks glenn, I will give it a try

  • #15
    THX
    THX is offline
    New to the CF scene
    Join Date
    May 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •