snapshot
/
SlideShowS40


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!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">
  <head>
    <title>Carousel-Slideshow</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/base_s40.css" type="text/css" />
    <style type="text/css">    
      .container {
        width: 152px;
        height: 95px;
        overflow: hidden;
        border: solid;
      }
      
      .strip {
        width: 608px;
        -webkit-transition: margin-left 1.0s linear;
      }
      
      .im0 {
        margin-left: 0px;
      }
      
      .im1 {
        margin-left: -152px;
      }
      
      .im2 {
        margin-left: -304px;
      }
      
      .im3 {
        margin-left: -456px;
      }
      
      .hide {
        display: none;
      }
      
      .show {
        display: block;
      }
	  .hlight{
	  	font-size: 1.3em;
		margin-top: 10px;
	  }
	  .navi{
	  	width: 65px;
		height: 30px;
		margin-bottom: 5px;
		margin-top: 5px;
	  }
	  .mgin{
		margin-left: 5px;
	  }
    </style>
    <meta name="Generator" content="Nokia WDE 3.2.0" />
  </head>
  <body>
  	<div class="header_background">
      <table summary="" class="header_table" cellpadding="0" cellspacing="0">
        <tr>
          <td class="app_name">Slideshow</td>
          <td class="header_search"><img alt="Home" src="img/header_home.png"/></td>
        </tr>
      </table>
    </div>   
    <div id="content" class="mgin">
    	<div id="carousel">
	      <div class="hlight">
	        Carousel
	      </div>
	      <div id="btns">
	      	<button class="navi" onclick="mwl.iterateClass('#images', 'im', 'prev', 4, false, null);">Prev</button>
			<button class="navi mgin" onclick="mwl.iterateClass('#images', 'im', 'next', 4, false, null);">Next</button>
	      </div>
	      <div class="container">
	        <div class="strip im0" id="images">
	          <table cellspacing="0" cellpadding="0" border="0" summary="Images Table">
	            <tr>
	              <td id="t2">
	                <img src="img/ClownFish_sm.jpg" alt="Clown Fish"/>
	              </td>
	              <td id="t1">
	                <img src="img/Cirques_sm.jpg" alt="Cirques"/>
	              </td>
	              <td id="t3">
	                <img src="img/Stones_sm.jpg" alt="Stones"/>
	              </td>
	              <td id="t4">
	                <img src="img/Summit_sm.jpg" alt="Summit"/>
	              </td>
	            </tr>
	          </table>
	        </div>
	      </div>
	    </div>
	    
		<!--<div id="hidden" class="hide"></div>-->
		
	    <div class="hlight">Slideshow - 2 sec interval</div>         
	    <div id="slideshow">
	    	<button class="navi" onclick="mwl.setGroupNext('#images_forward_no_animation', 'show', 'hide', 'next');mwl.timer('timer1', 2000, 0, 'mwl.setGroupNext(\'#images_forward_no_animation\', \'show\', \'hide\', \'next\');');">Start</button>
			<button class="navi mgin" onclick="mwl.stopTimer('timer1');">Stop</button>
	      <div id="images_forward_no_animation">
	        <div id="img1_next" class="hide">
	          <img src="img/chic1.jpg" alt="Chick 1"/>
	        </div>
	        <div id="img2_next" class="show">
	          <img src="img/chic2.jpg" alt="Chick 2"/>
	        </div>
	        <div id="img3_next" class="hide">
	          <img src="img/chic3.jpg" alt="Chick 3"/>
	        </div>
	      </div>
	    </div>
	</div>
  </body>
</html>