www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 24 of 24

Thread: Automatic random slideshow from folder of images

  1. #16
    Join Date
    Jan 2009
    Posts
    9
    Ok, so I replaced all theimages with myImages. I can't see where the problem is. I can't see where it is, because I am not familiar with javascript.

    Can you help pinpoint and fix this script? I REALLY appreciate it.

    Thanks so much,
    Lorne

    PHP Code:
    <script type="text/javascript"

    var 
    maxImages 99
    var 
    myImages = new Array(); 
    // 
    var imgPath "/bpa-images/Home Slideshow/"
    var 
    imgPrefix "image"
    var 
    imgSuffix ".jpg"
    // 
    function preloadComplete() 

        
    this.complete true

    function 
    preloadError() 

        
    this.complete false

    function 
    preloadImages() 

        for (var 
    x=1x<=maxImages; ++x
        { 
            
    myImages[x] = new Image(); 
            
    myImages[x].onerror preloadError
            
    myImages[x].onload preloadComplete
            
    myImages[x].src imgPath imgPrefix imgSuffix
        } 
        return 
    true

    preloadImages();

    ///// Plugin variables 

    playspeed=2000;// The playspeed determines the delay for the "Play" button in ms 
    dotrans=1// if value = 1 then there are transitions played in IE 
    transtype='blendTrans';// 'blendTrans' or 'revealtrans' 
    transattributes='23';// duration=seconds,transition=#<24 
    //##### 
    //key that holds where in the array currently are 
    i=0


    //########################################### 
    //if random 
    function SetRandom() { 
        
    tempimage = new Array(); 
        for(
    p=0p<myImages.lengthp++){ 
            for(
    p1=0p1>-1p1) { 
                
    tempNum Math.floor(Math.random()*myImages.length
                if(!
    tempimage[tempNum]){ 
                    
    tempimage[tempNum]=myImages[p]; 
                    break; 
                } 
            } 
        } 
        for(
    p=0;p<myImages.length;p++)myImages[p]=tempimage[p]; 


    //if random order 
    SetRandom() 


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

        
    //preload images into browser 
        
    preloadSlide(); 

        
    //set transitions 
        
    GetTrans(); 

        
    //set the first slide 
        
    SetSlide(0); 

        
    //autoplay 
        
    PlaySlide(); 


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

        
    //switch the image 
        
    if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()'
        
    document.images.imgslide.src=myImages[i][0]; 
        if(
    document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()'




    //########################################### 
    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); 



    //########################################### 
    //desc: picks the transition to apply to the images 
    function GetTrans() { 
        
    //si=document.slideshow.trans.selectedIndex; 

            
    if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){ 
            
    dotrans=0
        } 
        else if ((
    document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){ 
            
    dotrans=1
            
    transtype='blendTrans'
            
    document.imgslide.style.filter "blendTrans(duration=1,transition=1)"
        }else{ 
            
    dotrans=1
            
    transtype='revealtrans'
            if(
    document.slideshow.transtransattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value
            
    document.imgslide.style.filter "revealTrans(duration=1,transition=" +transattributes")"
        } 


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



    </script> 


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

    <table width="288" height="432" border="1" cellpadding="1" cellspacing="0" bordercolor="#560D1C"> 
    <tr> 
        <td align="center"> 
        <a href="#" onmouseover="this.href=myImages[i][1];return false"> 
        <script type="text/javascript"> 
            documen 

  2. #17
    Join Date
    Jan 2009
    Posts
    9
    I have this posted at the top of my page in the <head> tag. Do I need this at all? Or do I need to edit this?

    PHP Code:
    var slideimages=new Array()
        var 
    slidelinks=new Array()
        function 
    slideshowimages(){
        for (
    i=0;i<slideshowimages.arguments.length;i++){
        
    slideimages[i]=new Image()
        
    slideimages[i].src=slideshowimages.arguments[i]
        }
        }

        function 
    slideshowlinks(){
        for (
    i=0;i<slideshowlinks.arguments.length;i++)
        
    slidelinks[i]=slideshowlinks.arguments[i]
        }

        function 
    gotoshow(){
        if (!
    window.winslide||winslide.closed)
        
    winslide=window.open(slidelinks[whichlink])
        else
        
    winslide.location=slidelinks[whichlink]
        
    winslide.focus()
        } 
    Last edited by lorne17; 02-27-2009 at 09:01 PM.

  3. #18
    Join Date
    Feb 2008
    Posts
    1,666
    Can you supply a live link to the page as it exists on your website? It is awful hard to just look at text and spot errors. Learn how to use a script debugger and it will help you a lot. Firefox has a free debugger called Firebug. If you post a live link, then I can use Firebug on your page to find any problems.

  4. #19
    Join Date
    Jan 2009
    Posts
    9
    http://www.barleypfeiffer.com/main-backup.html

    That's the live link. Let me know what you find please. Thanks for the help.

    Lorne

  5. #20
    Join Date
    Feb 2008
    Posts
    1,666
    OK, the first problem is that Firefox reports your page as not supplying standards compliance via a valid DOCTYPE. So make sure at least the following is the line right before your opening HTML tag:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                          "http://www.w3.org/TR/html4/loose.dtd">
    The second problem is this:
    Code:
    Error: illegal character
    Source File: http://www.barleypfeiffer.com/main-backup.html
    Line: 1, Column: 17
    Source Code:
    MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()
    Those opening and closing curly apostrophes are invalid. You need to use a straight apostrophe in both positions.

    The third problem is that you still have references to theimage instead of myImages.

    Lastly, I see that you need to change these:
    Code:
    function preloadComplete() 
    { 
        this.complete = true; 
    } 
    function preloadError() 
    { 
        this.complete = false; 
    }
    to these because the complete property is read-only.
    Code:
    function preloadComplete() 
    { 
        this.completed = true; 
    } 
    function preloadError() 
    { 
        this.completed = false; 
    }
    Note that all of this was determined just by looking at the error message being reported by the browser. I did not have to use a script debugger at all (yet). So, it would behoove you to check your error messages, and correct them, before throwing up your hands and just saying "it don't work."

  6. #21
    Join Date
    Feb 2013
    Location
    Calhoun, GA
    Posts
    2
    Did anyone ever get this code to work?
    If so, I would appreciate Knowing the final outcome.
    I have Zero knowledge of code, but need something like this for my home page
    Thank You, Butch

  7. #22
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,437
    This is an older post with several pages of threads.

    You might be better off starting a brand new thread and referencing this one instead of adding on.

    Also you should show what you have tried
    or to which particular post you are referencing of the many posts on this thread.

  8. #23
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <input type="button" name="" value="GoTo 0" onmouseup="zxcSS('tst',0,0);"; />
    <input type="button" name="" value="GoTo 1" onmouseup="zxcSS('tst',0,1);"; />
    <input type="button" name="" value="GoTo 2" onmouseup="zxcSS('tst',0,2);"; />
    <input type="button" name="" value="GoTo 3" onmouseup="zxcSS('tst',0,3);"; />
    <input type="button" name="" value="GoTo 4" onmouseup="zxcSS('tst',0,4);"; />
    <input type="button" name="" value="GoTo 5" onmouseup="zxcSS('tst',0,5);"; />
    <input type="button" name="" value="GoTo 6" onmouseup="zxcSS('tst',0,6);"; />
    <input type="button" name="" value="GoTo 7" onmouseup="zxcSS('tst',0,7);"; />
    <input type="button" name="" value="GoTo 8" onmouseup="zxcSS('tst',0,8);"; />
    <input type="button" name="" value="GoTo 9" onmouseup="zxcSS('tst',0,9);"; />
    <br />
    <input type="button" name="" value="Next" onmouseup="zxcSS('tst',1);"; />
    <input type="button" name="" value="Back" onmouseup="zxcSS('tst',-1);"; />
    <input type="button" name="" value="Pause" onmouseup="zxcSS('tst',0,false);"; />
    <input type="button" name="" value="Auto" onmouseup="zxcSS('tst',0,true,500);"; />
    <input type="button" name="" value="Random" onmouseup="zxcSS('tst',0,'random',500);"; />
    <br /><br />
    <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/0.gif" />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcSS(id,ud,auto,ms,max){
     var obj=document.getElementById(id),o=zxcSS[id],nu,ary,ud=typeof(ud)=='number'?ud=ud<0?-1:ud>0?1:0:0;
     if (obj&&!o&&typeof(max)=='number'){
      o=zxcSS[id]={
       id:id,
       obj:obj,
       ary:[],
       rary:[],
       lgth:max,
       ms:typeof(ms)=='number'?ms:2000,
       cnt:0
      }
      for (var rary=[],url=obj.src.substring(0,obj.src.lastIndexOf('/')+1),file=obj.src.substring(obj.src.lastIndexOf('/')+1),z0=0;z0<=max;z0++){
       o.ary[z0]=new Image();
       o.ary[z0].src=url+file.replace(/\d/g,z0);
       o.rary[z0]=z0;
      }
     }
     if (o){
      clearTimeout(o.dly);
      nu=auto===true?o.cnt:auto;
      nu=typeof(auto)=='number'?auto:auto=='random'?o.rary[Math.floor(Math.random()*(o.lgth+1))]:o.cnt+ud;
      nu=nu>o.lgth?0:nu<0?o.lgth:nu;
      o.cnt=o.ary[nu]?nu:o.cnt;
      o.auto=auto===true||auto=='random';
      rotate(o,auto,ms||o.ms);
     }
    }
    
    function rotate(o,auto,ms){
     if (o.ary[o.cnt]&&o.ary[o.cnt].width>40){
      o.obj.src=o.ary[o.cnt].src;
     }
     if (o.auto===true){
      o.dly=setTimeout(function(){ o.cnt=++o.cnt%o.ary.length; zxcSS(o.id,0,auto); },ms);
     }
    }
    // parameter 0 = the image ID name
    // parameter 1 = >0 = next, <0= back
    // parameter 2 = true = auto, false = pause, 'random' = random or number = image number
    // parameter 3 = the auto rotate hold dely
    // parameter 4 = the maximum image number(0 to n)
     zxcSS('tst',0,true,2000,9);
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 02-02-2013 at 12:47 AM. Reason: added random
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #24
    Join Date
    Feb 2013
    Location
    Calhoun, GA
    Posts
    2

    Thanks, will this work with Markdown?

    The plugin I am using for site uses Markdown language, but says that html can be inserted.
    Yes, I am way over my head!
    Thank You
    B

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles