Results 1 to 6 of 6

Thread: Step Carousel Viewer v1.9 problem

  1. #1
    Join Date
    Feb 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer v1.9 problem

    Script: Step Carousel
    URL: http://www.dynamicdrive.com/dynamici...epcarousel.htm

    Hi, having problems with Step Carousel. I have inserted the code to my web page and loaded up the pictures. However, instead of scrolling the images I get this:http://www.17minutes.f2s.com/Gallery.htm

    Here is the code:
    Code:
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="stepcarousel.js">
    
    /***********************************************
    * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    <style type="text/css">
    
    .stepcarousel{
    position: relative; /*leave this value alone*/
    border: 10px solid black;
    overflow: scroll; /*leave this value alone*/
    width: 870px; /*Width of Carousel Viewer itself*/
    height: 591px; /*Height should enough to fit largest content's height*/
    }
    
    .stepcarousel .belt{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
    }
    
    .stepcarousel .panel{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 10px; /*margin around each panel*/
    width: 850px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    }
    
    </style>
    
    <script type="text/javascript">
    
    stepcarousel.setup({
    galleryid: 'mygallery', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panel', //class of panel DIVs each holding content
    autostep: {enable:true, moveby:1, pause:3000},
    panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    })
    
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Flash Gallery</title>
    <style type="text/css">
    <!--
    body,td,th {
    	color: #FFFFFF;
    }
    body {
    	background-color: #000000;
    }
    a:link {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    a:hover {
    	text-decoration: none;
    }
    a:active {
    	text-decoration: none;
    }
    -->
    </style>
    
    </head>
    
    <body>
    <div id="mygallery" class="stepcarousel">
    <div class="belt">
    
    <div class="panel">
    <img src="Samurai/oo1.jpg" />
    </div>
    
    <div class="panel">
    <img src="Samurai/002.jpg" />
    </div>
    
    <div class="panel">
    <img src="Samurai/003.jpg" />
    </div>
    
    <div class="panel">
    <img src="Samurai/004.jpg" />
    </div>
    
    <div class="panel">
    <img src="Samurai/005.jpg" />
    </div>
    
    </div>
    </div>
    
    <p>
    <b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span>
    </p>
    
    <p id="mygallery-paginate" style="width: 250px; text-align:center">
    <img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />
    </p>
    
    <p>
    <a href="javascript:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a> <br />
    
    <a href="javascript:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>
    </p>
    
    </body>
    
    </html>
    many thanks, Lol
    Last edited by Lol999; 02-14-2011 at 07:00 PM. Reason: improper format

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Right now the path to stepcarousel.js does not work. Did you upload the script to your server ?

  3. #3
    Join Date
    Feb 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Hi, thanks for the reply.
    No I haven't. Which part do I need to upload and does it need any sort of folder etc on the server?

    Thanks, Lol

  4. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    the javascript can be found here. save this on your pc and upload a copy to your server. It should work if you put this js file in the same folder as the Gallery.htm

  5. The Following User Says Thank You to azoomer For This Useful Post:

    Lol999 (02-14-2011)

  6. #5
    Join Date
    Feb 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks I'll give it a go!

  7. #6
    Join Date
    Feb 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Success! Just need to clean things up a bit and I'm good to go.

    Thanks again for your help so far.

    Cheers, Lol

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
  •