www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help with Java slideshow with

  1. #1
    Join Date
    Sep 2013
    Posts
    2

    Help with Java slideshow with

    Hi All,

    I'm new here so I hope I don't break any rules out the gate but I'm having a hard time with some Javascript for my website and I figured I should ask some experts at this point. I'm NOT a coder, just an artist with a little web design experience trying to make something work in Dreamweaver so here it is:

    I want to make a gallery page for my paintings on my website where there is a main image which fades in/out of a series of images which are also present as thumbnails (so simple slideshow for this part). Ideally this image would load randomly each page refresh (this bit is less important). And FINALLY, I need something where if the viewer clicks on the enlarged image, it will expand for an even more detailed view (using something like lightbox is what I was trying for this).

    None of the plug-ins I found online do all three of these things. I can manage to get each part working individually, but combining it all is well beyond my abilities. If anyone has any pointers, or if there's already a plug-in I missed I would be so, so thankful.

    Best,
    Jovan

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,413
    You need to supply code that you currently have and if anyone can help they will post a reply.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    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>
    <style type="text/css">
    /*<![CDATA[*/
    
    #slideshow {
      position:relative;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
    }
    
    #slideshow IMG {
      position:absolute;left:0px;top:0px;width:400px;height:300px;cursor:pointer;
    }
    
    #thumbs {
      position:relative;left:100px;top:110px;width:400px;height:200px;border:solid red 1px;
    }
    
    #thumbs IMG {
      position:relative;left:0px;top:0px;width:100px;height:75px;margin-Left:5px;margin-Top:5px;cursor:pointer;
    }
    
    #thumbs .current {
     border:solid red 2px;
    }
    
    #thumbs .mouseover {
     border:solid blue 2px;
    }
    
    .popup {
      z-Index:10;left:0px;top:0px;width:600px;height:450px;cursor:pointer;
    }
    
    .mask {
      background-Color:#FFFFCC;z-Index:5;cursor:pointer;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    
    <input type="button" name="" value="Auto" onmouseup="zxcFadeSlideShow.Auto('slideshow');"/>
    <input type="button" name="" value="Pause" onmouseup="zxcFadeSlideShow.Pause('slideshow');"/>
    <input type="button" name="" value="Next" onmouseup="zxcFadeSlideShow.Next('slideshow',1);"/>
    <input type="button" name="" value="Back" onmouseup="zxcFadeSlideShow.Next('slideshow',-1);"/>
    <input type="button" name="" value="GoTo 0" onmouseup="zxcFadeSlideShow.GoTo('slideshow',0);"/>
    <input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSlideShow.GoTo('slideshow',1);"/>
    <input type="button" name="" value="GoTo 2" onmouseup="zxcFadeSlideShow.GoTo('slideshow',2);"/>
    
    <div id="slideshow" ></div>
    
    <div id="thumbs" ></div>
    
    <script type="text/javascript">
    <!--
    // Fade Slide Show. (24-September-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcFadeSlideShow={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.ary[n]){
       this.rotate(o,n);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      o&&!o.ud?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||500):null;
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.SlideShowID,ia=o.ImageArray,ss=document.getElementById(id);
      if (ss&&ia instanceof Array){
       var thumbs=document.getElementById(o.ThumbnailID),ms=o.FadeDuration,hold=o.AutoHold,srt=o.AutoStart,add=o.AddEvents,ms=typeof(ms)=='number'&&ms>0?ms:1000,add=add instanceof Array?add:[],msk=document.createElement('DIV'),mk=msk.cloneNode(false),ary=[],pop=[],i,t,z0=0,z1=0;
       ia=o.Random===true?this.shuffle(ia):ia;
       mk.style.position='absolute';
       msk.style.visibility=mk.style.visibility='hidden';
       mk.style.bottom=mk.style.right='0px';
       mk.style.width=mk.style.height='0px';
       mk.style.border='solid red 1px';
       msk.style.position='fixed';
       msk.style.left=msk.style.top='0px';
       msk.style.width='100%';
       for (;z0<ia.length;z0++){
        i=document.createElement('IMG');
        i.src=ia[z0][0];
        i.style.zIndex=z0>0?'0':'2';
        o.PopUpClass?this.addevt(i,'mouseup','pop',o,true):null;
        ss.appendChild(i);
        ary[z0]=[i];
        i=document.createElement('IMG');
        i.src=ia[z0][1]||ia[z0][0];
        ary[z0][2]=i;
        i.className=z0>0?'':'current';
        this.addevt(i,'mouseup','GoTo',id,z0);
        this.addevt(i,'mouseover','mse',o,i,'mouseover');
        this.addevt(i,'mouseout','mse',o,i,'');
        thumbs?thumbs.appendChild(i):null;
        i=document.createElement('IMG');
        i.style.left=i.style.top='-3000px';
        i.style.position='fixed';
        i.src=ia[z0][2]||ia[z0][0];
        i.className=o.PopUpClass;
        o.PopUpClass?document.body.appendChild(i):null;
        this.addevt(i,'mouseup','pop',o,false);
        pop[z0]=[i,null,null,0];
       }
       for (;z1<add.length;z1++){
        if (add[z1][0]){
         i=document.getElementById(add[z1][0]);
         t=add[z1][1];
         if (i&&this[add[z1][2]]){
          this.addevt(i,t=='click'||t=='mouseover'||t=='mouseout'||t=='mousedown'?t:'mouseup',add[z1][2],id,add[z1][3]);
         }
        }
       }
       msk.className=o.MaskClass;
       document.body.appendChild(msk);
       document.body.appendChild(mk);
       this.addevt(msk,'mouseup','pop',o,false);
       this.addevt(window,'resize','pop',o,null);
       o.id=id;
       o.ary=ary;
       o.pop=pop;
       o.mk=mk;
       o.msk=msk;
       o.ms=ms;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.n=0;
       o.ud=false;
       o.lst=0;
       o.pre=0;
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,auto){
      this.Pause(o.id);
      var n=o.n,lgth=o.ary.length-1;
      o.auto=auto===true;
      n=o.auto?n+1:auto;
      n=n>lgth?0:n<0?lgth:n;
      o.ary[o.pre][0].style.zIndex='0';
      o.ary[o.n][0].style.zIndex='1';
      o.ary[o.n][2].className='';
      o.pre=o.n;
      typeof(o.OnFade)=='function'?o.OnFade(n):null;
      this.animate(o,o.ary[n],0,100,new Date(),o.ms);
      o.ary[n][0].style.zIndex='2';
      o.ary[n][2].className='current';
      o.n=n;
     },
    
    
     pop:function(o,ud){
      ud=typeof(ud)=='boolean'?ud:o.ud;
      o.ud=ud;
      this.Pause(o.id);
      o.msk.style.height=o.mk.offsetTop+'px';
      ud?o.msk.style.visibility='visible':null;
      var p=o.pop[o.n];
      this.animate(o,p,p[3],ud?100:0,new Date(),o.ms,ud);
      p[0].style.left=(o.msk.offsetWidth-p[0].offsetWidth)/2+'px';
      ud?p[0].style.top=(o.msk.offsetHeight-p[0].offsetHeight)/2+'px':null;
     },
    
     mse:function(o,i,c){
      i.className!='current'?i.className=c:null;
     },
    
     animate:function(o,a,f,t,srt,mS,ud){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(n,0);
       oop.opac(a[0],a[3]);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
      }
      else {
       a[3]=t;
       oop.opac(a[0],t);
       if (ud===false){
        a[0].style.top='-3000px';
        o.msk.style.visibility='hidden';
       }
       typeof(o.OnComplete)=='function'?o.OnComplete(n):null;
       o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     opac:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
    
     shuffle:function(ary){
      for (var r,t,z0=0;z0<ary.length;z0++){
       r=Math.floor(Math.random()*ary.length);
       t=ary[z0];
       ary[z0]=ary[r];
       ary[r]=t;
      }
      return ary;
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null;
     }
    
    
    
    }
    
    zxcFadeSlideShow.init({
     SlideShowID:'slideshow', // the unique ID name of the slide show parent DIV.              (string)
     ImageArray:[             // an array of arrays defining the images.                       (array)
      // field 0 = the main image scr.
      // field 1 = (optional) the thumbnail image src. (default = field 0)
      // field 2 = (optional) the popup image src.     (default = field 0)
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg']
     ],
     ThumbnailID:'thumbs',    //(optional) the unique ID name of the thumbnails parent DIV.    (string, default = no thumbnails)
     MaskClass:'mask',        //(optional) the class name of the 'mask' DIV.                   (string, default = no mask)
     PopUpClass:'popup',      //(optional) the class name of the 'popup' image.                (string, default = no popup)
     FadeDuration:500,        //(optional) the fade duration in milli sceconds.                (number, default = 1000)
     Random:true,             //(optional) true = randomise the image array.                   (string, default = false = sequence)
     AutoHold:2000,           //(optional) the auto rotation hold delay in milli sceconds.     (number, default = FadeDuration*4)
     AutoStart:1000,          //(optional) the auto rotation start  delay in milli sceconds.   (number, default = FadeDuration*4)
     AddEvents:[
      ['slideshow','mouseover','Pause'],
      ['slideshow','mouseout','Auto']
     ],
     OnFade:function(n){      //(optional) a function to call when starting fade of new image. (function, default = no function)
      // n =the current imasge index.
     },
     OnComplete:function(n){ //(optional) a function to call when fade in is complete.    (function, default = no function)
      // n =the current imasge index.
     }
    });
    
    //-->
    </script>
    </body>
    
    </html>
    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/

  4. #4
    Join Date
    Sep 2013
    Posts
    2
    It works!! You're a genius, thank you very much Vic! Really you don't know how frustrated I was, this is perfect.

    Next time I'll post what I had so far before I post a question however terrible and embarrassingly bad. Sorry moderator!

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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