Advanced Search

Results 1 to 2 of 2

Thread: need similar to "Featured Content Slider" but want navigation to be vertical

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

    Smile need similar to "Featured Content Slider" but want navigation to be vertical

    hi guys,

    im new and i signed up just for this!
    i need a script that does the same thing as the "Featured Content Slider", but i nee the navigation panel to be all vertical. (the numbers or dots) i couldnt find anything in the javascript file to make these changes. also i need the prev/next buttons to be outside of the panel.

    i have attached a picture of that it needs to look like, if anyone has any ideas of how to customise the existing on to achieve this that would be great. Also a totally different script would be fine if i can customise it.

    thanks

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    you could try

    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:25px;top:10px;width:200px;height:150px;border:solid #FF3333 1px;
    }
    
    .img {
     width:100%;height:100%;
    }
    
    .div {
     text-Align:center;background-Color:#FFCC66;
    }
    
    .panel {
     left:0px;width:100%;height:30px;background-Color:#FFFFCC;
    }
    
    .paginate {
     position:relative;z-Index:10;left:0px;top:10px;width:300px;height:150px;
    }
    
    .item {
      position:relative;width:100px;height:20px;background-Color:#FFFFCC;
    }
    
    .text {
     position:absolute;left:50px;top:0px;font-Size:12px;
    }
    
    .default {
      position:absolute;left:0px;top:0px;width:15px;height:15px;background-Color:#FFFFCC;border:solid #FF3300 1px;
      cursor:pointer;text-Align:center;font-Size:12px;
    }
    
    .mseover {
     background-Color:#FFCC66;
    }
    
    .active {
     background-Color:#FFCC66;
    }
    
    
    /*]]>*/
    </style>
    <script src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript"></script>
    <script  src="http://www.vicsjavascripts.org.uk/OneStopSlideShow/OneStopSlideShow.js" type="text/javascript"></script>
    </head>
    
    <body>
    
     <div class="demo" >
      <div id="tst1" class="slideshow">
       <img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
       <div class="panel" ><a href="#">Panel 1</a></div>
       <img class="img" alt="Egypt"  src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
       <div class="panel" style="background-Color:red;">Panel 2</div>
       <img class="img" alt="Egypt"  src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
       <div class="panel" style="background-Color:green;" >Panel 3</div>
       <img class="img" alt="Egypt"  src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
       <div class="panel" style="background-Color:green;" >Panel 4</div>
      </div>
    
      <div id="Page1" class="paginate" >
       <div class="item" >
        <div class="default" ></div><div class="text" >Egypt 5</div>
       </div>
       <div class="item" >
        <div class="default" ></div><div class="text" >Egypt 6</div>
       </div>
       <div class="item" >
        <div class="default" ></div><div class="text" >Egypt 7</div>
       </div>
       <div class="item" >
        <div class="default" ></div><div class="text" >Egypt 8</div>
       </div>
      </div>
      <div class="buttons" >
       <input type="button" name="" value="Next" onclick="S1.Next(1);" />
       <input type="button" name="" value="Prev" onclick="S1.Next(-1);" />
       <input type="button" name="" value="Auto" onclick="S1.Auto();"/>
       <input type="button" name="" value="Pause" onclick="S1.Pause();"/>
      </div>
     </div>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    S1=new zxcOneStopSlideShow({
     ID:'tst1',              // the unique ID name of the images parent node.                                                (string)
     FramesClassName:'img',  // the common class name of the 'fade' frames.                                                  (string)
     Mode:100,               //(optional) mode of effect execution(see **** Modes of Execution.                              (digits, default = 0('opacity'))
     Duration:1000,          //(optional) the duration of the fade effect in milliseconds.                                   (digits, default = 1000)
     AutoHold:2000,          //(optional) the hold duration of automatic changing of images.                                 (digits, default = Duration*2)
     AutoDirection:1,        //(optional) 1 = rotate forward, -1 = rotate back.                                              (digits, default = 1)
     AutoStart:true,         //(optional) true = the images will start auto rotation.                                        (boolean, default = true)
     Days:0,                 //(optional) the persistance in days to remember the last frame on initialisation.              (digits, default = no persistance)
     SlidePanels:{           //(optional) an object defining slide in panels options.                                        (object, default = no slide in panels)
      Mode:'bottom',         // mode of effect execution, 'left', 'right' 'top', 'bottom'.                        (string)
      ClassName:'panel',     // the common class name of the 'panel' elements.                                    (string)
      SlideIn:'onchange',    // the event type to slide the panel in, 'mouseover', 'mouseout' or 'onchange'.      (string)
      SlideOut:'mouseout',   // the event type to slide the panel out, 'mouseover', 'mouseout'.                   (string)
      Duration:1000,         //(optional) the duration of the fade effect in milliseconds.                        (digits, default = 1000)
      FadeIn:50              //(optional) true = fade in the panel.                                               (boolean, default = no fade in)
     },
     Paginate:{              //(optional) an object defining pagination options.                                             (object, default = no pagination)
        ID:'Page1',                    // the unique ID name of the parent node containing the paginate elements. (string)
        DefaultClassName:'default',    // the default class name of the paginate elements.                        (string)
        MouseOverClassName:'mseover',  //(optional) the mouseover modifier class name of the paginate elements.   (string, default = mouseover class name)
        ActiveClassName:'active',      //(optional) the 'active' modifier class name of the paginate elements.    (string, default = active class name)
        GoToEvent:'mouseup',           //(optional) the event type to goto the associated image.                  (string, default = no goto)
        HTML:['1','2','3','4']         //(optional) innerHTML of each page element.                               (array, default = no or existing HTML)
     },
     AddEvents:[          //(optional) an array of arrays defining the events to be added.                                   (array)
    //   where each field is an array:
    //    field 0 = the unique ID name of the element.     (string)
    //    field 1 = the function name.                     (string)
    //    field 2 = the event type.                        (string)
    //    field 3 = the parameter to pass to the function. (see Script Functions)
      ['tst1','Auto','mouseout'],
      ['tst1','Pause','mouseover']
     ]
    });
    /*]]>*/
    </script></body>
    
    </html>
    the full application notes can be found at

    http://www.vicsjavascripts.org.uk/On...pSlideShow.htm
    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/

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
  •