Results 1 to 2 of 2

Thread: Automatic rotation on 3 d cube

  1. #1
    Join Date
    Jan 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Automatic rotation on 3 d cube

    I used this code from your website; but I do not know how to modify it so can use option 2, automatic rotation.

    http://www.javascriptkit.com/script/...ideshow.shtml#

    I changed the pause to: 3000 but auto rotate is not working.

    Please help.

    Thank you.

    Jim
    Last edited by ddadmin; 01-18-2016 at 03:06 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    According to the docs, changing the pause option to a non 0 value kicks it into automatic mode, such as:

    Code:
    <style>
    
    div.jkcubeslideshow{ /* main container */
    	background: white;
    	display: block;
    	width: 300px; /* default width of main container */
    	height: 375px; /* default height of main container */
    	position: relative;
    	-webkit-perspective: 1000px; /* Greater the value, less pronounced the 3D effect */
    	perspective: 1000px; /* Greater the value, less pronounced the 3D effect */;
    }
    
    div.side1, div.side2 { /* two panels that make up cube effect */
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	backface-visibility: hidden; /* hide backface of DIVs */
    	transition: all 1s ease-in-out; /* CSS transition. Actual duration set by script */;
    }
    
    div.side1 img, div.side2 img { /* how should slideshow images be sized inside panels? */
    	width: 100%;
    	height: auto;
    }
    
    
    </style>
    
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <script src="jkcubeslideshow.js">
    
    /* =====================================
     ** 3D Cube Slideshow- by JavaScript Kit (www.javascriptkit.com)
     ** Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
    ===================================== */
    
    </script>
    
    <script>
    
    var cubeshowvar1 // arbitrary but unique variable to store slideshow instance
    
    jQuery(function($){
    	cubeshowvar1 = new jkcubeslideshow({
    		id: 'cubeshow1',
    		dimensions: [300, 375],
    		pause: 3000, // every 3 seconds
    		images: [
    							['food1.jpg'],
    							['food2.jpg'],
    							['food3.jpg'],
    							['food4.jpg'],
    							['food5.jpg'] //<-- no comma after last image
    						] //<-- no comma after last setting
    	})
    })
    
    </script>
    DD Admin

Similar Threads

  1. 3D Cube Slideshow-Add Description to each image in rotation
    By Flyswatter in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 08-02-2015, 10:47 AM
  2. 3D Cube Slideshow - help
    By Nique60 in forum JavaScript
    Replies: 1
    Last Post: 04-03-2015, 01:58 PM
  3. Replies: 2
    Last Post: 02-15-2010, 09:57 PM
  4. A interactive VML 3D cube
    By paclopes in forum Submit a DHTML or CSS code
    Replies: 7
    Last Post: 02-09-2007, 03:33 PM
  5. has anyone used any of the "open cube" products???
    By sportious in forum The lounge
    Replies: 3
    Last Post: 08-15-2005, 11:04 PM

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
  •