Results 1 to 2 of 2

Thread: Slideshow + large textbox

  1. #1
    Join Date
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slideshow + large textbox

    All slideshow that I have come across have a set of thumbnails that are expanded to display a large image.

    What I am looking for is code to do what this article in PC World site is doing:

    http://www.pcworld.com/article/20528...ml#tk.nl_today

    What I like in particular is that there is a large explanatory box (almost same size as the image itself) alongside the image.
    And user controlled navigation to step through each slide.
    Can you provide some guidance as to how to code this in HTML & CSS?
    Thank you in advance,

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    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[*/
    
    #ss {
      position:absolute;left:100px;top:100px;width:200px;height:150px;border:solid red 1px;
    }
    
    #ss IMG {
      width:200px;height:150px;float:left;
    }
    
    #txt {
      position:absolute;left:310px;top:100px;width:200px;height:150px;border:solid red 1px;
    }
    
    #txt DIV {
      position:absolute;visibility:hidden;left:0px;top:0px;width:200px;height:150px;background-Color:#FFFFCC;
    }
    
    #txt .active {
      visibility:visible;
    }
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <input type="button" name="" value="GoTo 0" onmouseup="zxcSlideSlideShow.GoTo('ss',0);"/>
     <input type="button" name="" value="GoTo 1" onmouseup="zxcSlideSlideShow.GoTo('ss',1);"/>
     <input type="button" name="" value="GoTo 2" onmouseup="zxcSlideSlideShow.GoTo('ss',2);"/>
     <input type="button" name="" value="Auto" onmouseup="zxcSlideSlideShow.Auto('ss');"/>
     <input type="button" name="" value="Pause" onmouseup="zxcSlideSlideShow.Pause('ss');"/>
     <div id="ss" >
      <div>
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
      </div>
     </div>
    
     <div id="txt" >
      <div class="default" >My Text One</div>
      <div class="default" >My Text Two</div>
      <div class="default" >My Text Three</div>
     </div>
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slide Slide Show (10-October-2013)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    var zxcSlideSlideShow={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.c+ud);
      }
     },
    
     GoTo:function(id,c){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       if (o.ary[c]&&c!=o.rc){
        o.ud=c>o.rc?1:-1;
        this.rotate(o,c);
       }
      }
     },
    
     Direction:function(id,ud){
      var o=this['zxc'+id];
      o&&typeof(ud)=='number'?o.ud=(ud<0?-1:1):null;
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.SlideID,m=o.Mode,n=o.DisplaySlide,ud=o.Direction,ms=o.SlideDuration,hold=o.AutoHold,srt=o.AutoStart,a=o.AddEvents,pag=document.getElementById(o.PaginateID),p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null;
      if (s){
       var m=typeof(m)=='string'&&m.charAt(0)=='H'?['left','width','offsetLeft']:['top','height','offsetTop'],ms=typeof(ms)=='number'&&ms>20?ms:1000;
       var clds=s.childNodes,c,t,z0=0,z1=0,z2=0;
       o.ary=[];
       p.style.overflow='hidden';
       s.style.position='absolute';
       s.style.textAlign='left';
       s.style[m[1]]='50000px';
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         o.ary.push(clds[z0]);
        }
       }
       if (o.ary[1]){
        o.c=o.ary[n]?n:0;
        o.rc=o.c;
        c=o.ary[0].cloneNode(true);
        s.appendChild(c);
        o.ary.push(c);
        o.id=id;
        o.m=m;
        o.s=[s,m[0]];
        o.lgth=o.ary.length-1;
        o.ms=ms;
        o.hold=typeof(hold)=='number'&&hold>20?hold:ms*4;
        o.ud=typeof(ud)=='number'&&ud<0?-1:1;
        o.s=[s,m[0],-o.ary[o.c][m[2]]];
        s.style[m[0]]=o.s[2]+'px';
        if (a instanceof Array){
         for (;z1<a.length;z1++){
          c=document.getElementById(a[z1][0]);
          t=a[z1][1];
          c&&this[a[z1][2]]?this.addevt(c,t=='click'||t=='mouseover'||t=='mouseout'||t=='mousedown'?t:'mouseup',a[z1][2],o.id,a[z1][3]):null;
         }
        }
        o.pge=[];
        if (pag){
         clds=this.bycls('default',pag);
         for (;z2<o.lgth;z2++){
          c=clds[z2]||document.createElement('DIV');
          t=c.className;
          o.pge[z2]=[c,t,t+' active'];
          c.className=o.pge[z2][z2!=o.c?1:2];
          this.addevt(c,'mouseup','GoTo',id,z0);
         }
        }
        this['zxc'+id]=o;
        typeof(o.OnSlide)=='function'?o.OnSlide(o.c):null;
        typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
       }
      }
     },
    
     rotate:function(o,n){
      var c=o.c,a=o.ary;
      o.pge[c]?o.pge[c][0].className=o.pge[c][1]:null;
      o.auto=n===true;
      c=o.auto?c+o.ud:n;
      if ((o.ud>0&&c>o.lgth)||(o.ud<0&&c<0)){
       c=o.ud>0?1:o.lgth-1;
       o.s[2]=-o.ary[o.ud>0?0:o.lgth][o.m[2]];
      }
      if (o.ud<0&&c<0){
       c=o.lgth-1;
       o.s[2]=-o.ary[o.lgth][o.m[2]];
      }
      c=o.ary[c]?c:o.ud>0?0:o.lgth;
      this.animate(o,o.s,o.s[2],-o.ary[c][o.m[2]],new Date(),o.ms);
      o.c=c;
      c=c<o.lgth?c:0;
      o.rc=c;
      o.pge[c]?o.pge[c][0].className=o.pge[c][2]:null;
      typeof(o.OnSlide)=='function'?o.OnSlide(c):null;
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=n;
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
        a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       a[0].style[a[1]]=t+'px';
       o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     bycls:function(nme,el){
      for (var reg=new RegExp('\\W'+nme+'\\W'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(' '+els[z0].className+' ')){
        ary.push(els[z0]);
       }
      }
      return ary;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcSlideSlideShow.init({
     SlideID:'ss',          // the unique ID name of the parent DIV.                                  (string)
     Mode:'Horizontal',     //(optional) the mode of execution., 'Vertical' or 'Horizontal'           (string, default = 'Vertical')
     DisplaySlide:0,        //(optional) the index number of the initial slide.                       (number, default = no initial slide)
     Direction:1,           //(optional) 1 = auto rotate forward, -1 = auto rotate back.              (number, default = 1 = forward)
     PaginateID:'txt',      //(optional) the unique ID name of the pagination DIV..                   (string, default = no pagination)
     SlideDuration:1000,    //(optional) the slide duration in mill seconds.                          (number, default = 1000)
     AutoHold:3000,         //(optional) the auto rotate hold duration in mill seconds.               (number, default = SlideDuration*4)
     AutoStart:3000,        //(optional) the auto rotate start delay in mill seconds.                 (number, default = no auto start)
     AddEvents:[            //(optional) an array defining event calls to control the script.         (array, default = inline event calls)
      // field 0 = the unique ID name of the element to add the event call to.
      // field 1 = the event type.
      // field 2 = the script function(see Script Functions).
      // field 3 = (optional) the parameter to pass to the function(see Script Functions).
      ['ss','mouseover','Pause'],
      ['ss','mouseout','Auto']
     ],
     OnSlide:function(n){   //(optional) the function to call when the the scroller slides.           (function, default = no function)
      // n = the slide number
     }
    });
    
    /*]]>*/
    </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/

Similar Threads

  1. IE8 & large images --- !!
    By PF Marconi in forum CSS
    Replies: 2
    Last Post: 09-24-2010, 07:49 AM
  2. Replies: 0
    Last Post: 09-09-2009, 10:02 AM
  3. Replies: 2
    Last Post: 01-16-2008, 09:32 AM
  4. Replies: 2
    Last Post: 06-10-2007, 09:45 AM
  5. large search
    By cursed in forum PHP
    Replies: 5
    Last Post: 02-16-2007, 12:56 AM

Bookmarks

Posting Permissions

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