Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Script similar to Picture Cube?

    I have searched for a rotating image script to use at mrsgriffins.com and am currently using Tony Foster's Picture Cube slideshow downloaded from javascript.com. This is EXACTLY the effect I wanted, but it only works with IE since it uses MS-only code. Is there a similar script that is more universal?

    Thanks for any help!

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Hi,
    Is yours the one at http://www.javascriptkit.com/script/...lideshow.shtml ? Cool...

    Try mine below,
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html>

    <
    head>

    <
    style type="text/css">
      
    #cube{
        
    width100px;
        
    height100px;
      }
      
    #img_left{
        
    border0px;
        
    height100px;
        
    width100px;
      }
      
    #img_right{
        
    border0px;
        
    height100px;
        
    width0px;
      }
    </
    style>

    <
    script type="text/javascript">
    //<![CDATA[

      
    var 
        
    timer_anim setInterval("anim()",50);
        
    timer_still null;

        
    img_name = [ "myaunt.gif""me.gif""brother.gif" ];

        
    idx_left 0//indexes to img_name
        
    idx_right idx_left 1;

        
    width_cube 100;
        
    width_left width_cube;

      function 
    anim(){
        var
          
    el_left document.getElementById("img_left");
          
    el_right document.getElementById("img_right");

        if (
    width_left 0){ //sliding animation for both images
          
    width_left -= 5;
          
    el_left.style.width width_left "px";
          
    el_right.style.width = (width_cube-width_left) + "px";
        }
        else{ 
    //end sliding, change image sources.
          
    clearInterval(timer_anim);
          
    timer_change setTimeout("still()",3000);
        }
      }

      function 
    still(){
        var
          
    el_left document.getElementById("img_left");
          
    el_right document.getElementById("img_right");

        
    idx_left = (idx_left img_name.length-1)? idx_left+0;   
        
    idx_right = (idx_right img_name.length-1)? idx_right+0;

        
    width_left width_cube;

        
    el_left.src=img_name[idx_left];
        
    el_right.src=img_name[idx_right];
          
        
    el_left.style.width width_left "px";
        
    el_right.style.width = (width_cube-width_left) + "px";

        
    timer_anim setInterval("anim()",50);
      }

    //]]>
    </script>

    </head>

    <body>
      <div id="cube">
        <img src="myaunt.gif" id="img_left" /><img src="me.gif" id="img_right" />
      </div>
    </body>
    </html> 
    I missed 3D feeling though,
    may be somebody could enhance it

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Exclamation Nice ...

    Nice idea.

    Here's a modification with an attempt at the 3D feeling.
    Only problem I have is that it produces an anonying image blink at the end of the "still()" function.
    I'm not exactly sure why at this time.

    I left justified lines that I changed in your code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    
    <style type="text/css">
    #cube{    width: 200px;    height: 200px;  }
    #img_left{   border: 0px;    height: 200px;    width: 200px;	position:absolute; top:0px; left:0px; }
    #img_right{  border: 0px;    height: 200px;    width: 200px; 	position:absolute: top:0px; left:0px; }
    </style>
    
    <script type="text/javascript">
    // From: http://codingforums.com/showthread.php?t=198262
    // almost correct -- Problem: images 'blinks' at end of cycle
    
    //<![CDATA[
    
      var timer_anim = setInterval("anim()",50);
      var timer_change = null;
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var img_name = [ "11.jpg", "12.jpg", "13.jpg","14.jpg","15.jpg",
    		 "21.jpg", "22.jpg", "33.jpg","44.jpg","65.jpg",
    		 "31.jpg", "32.jpg", "33.jpg","44.jpg","65.jpg",
    		 "41.jpg", "42.jpg", "33.jpg","44.jpg","65.jpg",
    		 "51.jpg", "52.jpg", "33.jpg","44.jpg","65.jpg",
    		 "61.jpg", "62.jpg", "33.jpg","44.jpg","65.jpg"]; // No comma after last entry
    
      var idx_left = 0; //indexes to img_name
      var idx_right = idx_left + 1;
    
      var width_cube = 200;
      var width_left = width_cube;
    
      function anim(){
        var el_left = document.getElementById("img_left");
        var el_right = document.getElementById("img_right");
    
        if (width_left > 0){ //sliding animation for both images
          width_left -= 5;
          el_left.style.width = width_left + "px";
          el_right.style.width = (width_cube-width_left) + "px";
    el_left.style.left = (width_cube-width_left) + 'px';	// rotate images with this line, slide in-out if commented out
        }
        else{ //end sliding, change image sources.
          clearInterval(timer_anim);
    timer_change = setTimeout("still()",50);	// shorten time for continuous animation (3000 to 50)
    // still();	// bypass timer_change activity in line above
        }
      }
    
      function still(){
        var el_left = document.getElementById("img_left");
        var el_right = document.getElementById("img_right");
    
        idx_left = (idx_left < img_name.length-1)? idx_left+1 : 0;   
        idx_right = (idx_right < img_name.length-1)? idx_right+1 : 0;
    
        width_left = width_cube;
    
        el_left.src=baseURL+img_name[idx_left];
        el_right.src=baseURL+img_name[idx_right];
          
        el_left.style.width = width_left + "px";
        el_right.style.width = (width_cube-width_left) + "px";
    
        timer_anim = setInterval("anim()",50);
      }
    
    //]]>
    </script>
    </head>
    <body>
      <div id="cube">
        <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" id="img_left" />
        <img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg" id="img_right" />
      </div>
    <button onclick="still()">Start</button>
    <button onclick="clearInterval(timer_anim)">Stop</button>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    eggmedia (06-22-2010)

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Eh, how did you get that so many faces.

    Let's go further a bit more, by adding some shadows.
    Overlay divs? Nah, that would put some workload I guess.
    Probably playing with opacity is better, though IE won't like it.

    And accidentally I've replaced your absolute attribute with float,
    just to hold the images within cube div. Strangely I could still manipulate
    el_left.style.left, hmm...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    
    <style type="text/css">
    #cube{    width: 200px;    height: 200px;  background-color: black; margin: 0px auto;}
    #img_left{   border: 0px;    height: 200px;    width: 200px;	float: left; opacity: 1.0; }
    #img_right{  border: 0px;    height: 200px;    width: 200px; 	opacity: 0.5; }
    </style>
    
    <script type="text/javascript">
    // From: http://codingforums.com/showthread.php?t=198262
    // almost correct -- Problem: images 'blinks' at end of cycle
    
    //<![CDATA[
    
      var timer_anim = setInterval("anim()",50);
      var timer_change = null;
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var img_name = [ "11.jpg", "12.jpg", "13.jpg","14.jpg","15.jpg",
    		 "21.jpg", "22.jpg", "33.jpg","44.jpg","65.jpg",
    		 "31.jpg", "32.jpg", "33.jpg","44.jpg","65.jpg",
    		 "41.jpg", "42.jpg", "33.jpg","44.jpg","65.jpg",
    		 "51.jpg", "52.jpg", "33.jpg","44.jpg","65.jpg",
    		 "61.jpg", "62.jpg", "33.jpg","44.jpg","65.jpg"]; // No comma after last entry
    
      var idx_left = 0; //indexes to img_name
      var idx_right = idx_left + 1;
    
      var width_cube = 200;
      var width_left = width_cube;
    
      function anim(){
        var el_left = document.getElementById("img_left");
        var el_right = document.getElementById("img_right");
    
        if (width_left > 0){ //sliding animation for both images
          width_left -= 5;
          with (el_left.style){
            width = width_left + "px";
            left = (width_cube-width_left) + 'px';	// rotate images with this line, slide in-out if commented out
            opacity = 0.5*(1+width_left/width_cube);
          }
          with (el_right.style){
            width = (width_cube-width_left) + "px";
            opacity = 0.5*(2 - width_left/width_cube);
          }
        }
        else{ //end sliding, change image sources.
          clearInterval(timer_anim);
          timer_change = setTimeout("still()",50);	// shorten time for continuous animation (3000 to 50)
        }
      }
    
      function still(){
        var el_left = document.getElementById("img_left");
        var el_right = document.getElementById("img_right");
    
        idx_left = (idx_left < img_name.length-1)? idx_left+1 : 0;   
        idx_right = (idx_right < img_name.length-1)? idx_right+1 : 0;
    
        width_left = width_cube;
    
        el_left.src=baseURL+img_name[idx_left];
        el_right.src=baseURL+img_name[idx_right];
          
        with (el_left.style){
          width = width_left + "px";
          left = '0px'; // @jmrker: aha, this is wny we get the blink.. forget to reset.
          opacity = 1.0;
        }
        with (el_right.style){
          width = (width_cube-width_left) + "px";
          opacity = 0.5;
        }
        timer_anim = setInterval("anim()",50);
      }
    
    //]]>
    </script>
    </head>
    <body>
      <div id="cube">
        <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" id="img_left" />
        <img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg" id="img_right" />
      </div>
    <button onclick="still()">Start</button>
    <button onclick="clearInterval(timer_anim)">Stop</button>
    </body>
    </html>

  • Users who have thanked hdewantara for this post:

    eggmedia (06-22-2010)

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Thumbs up

    @hdewantara:

    Nice touch with the shadow opacity. I would not have thought of that.

    Thanks for pointing out where the "image blink" was coming from.
    It was starting to bug me.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for all of your help, I think I'm on the right track!


  •  

    Posting Permissions

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