Team:Paris-Saclay/Testing

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
{{Team:Paris-Saclay/Header}}
{{Team:Paris-Saclay/Header}}
-
<div id="paris-saclay-content">
+
<script type="text/javascript" src='/Team:Paris-Saclay/jquery.min.js?action=raw&ctype=text/javascript'></script>
 +
<script type="text/javascript" src='/Team:Paris-Saclay/MetroJs.js?action=raw&ctype=text/javascript'></script>
 +
<div id="paris-saclay-content">
 +
<div id="tiles" class="blue">
 +
    <!-- Sliding Tile that shows 100% of the back tile every 3 seconds -->
 +
    <div class="live-tile" data-stops="100%" data-speed="750" data-delay="3000">
 +
        <span class="tile-title">slide tile (figure 2a)</span>
 +
        <div><img src="/images/sample/1tw.gif" alt="1" /></div>
 +
        <div><img src="/images/sample/2t.gif" alt="2" /></div>
 +
    </div>
 +
    <!-- Red Flip Tile that flips every 4 seconds -->
 +
    <div class="red live-tile" data-mode="flip" data-delay="4000">
 +
        <div>
 +
            <img src="/images/sample/3tw.gif" alt="3" />
 +
            <a class="tile-title">flip tile front (figure 2b)</a>
 +
        </div>
 +
        <div>
 +
            <img src="/images/sample/4tw.gif" alt="4" />
 +
            <a class="tile-title">flip tile back (figure 2b)</a>
 +
            </div>
 +
    </div>
 +
    <!-- Mango Flip List that triggers every 3 seconds -->
 +
    <div class="mango list-tile">
 +
        <span class="tile-title">flip list (figure 2c)</span>
 +
        <ul class="flip-list fourTiles" data-mode="flip-list" data-delay="3000">
 +
            <li>
 +
                <div><img src="/images/sample/1t.gif"  alt="1" /></div>
 +
                <div><img src="/images/sample/1tw.gif" alt="1" /></div>
 +
            </li>
 +
            <li>
 +
                <div><img src="/images/sample/2t.gif"  alt="2" /></div>
 +
                <div><img src="/images/sample/2tw.gif" alt="2" /></div>
 +
            </li>
 +
            <li>
 +
                <div><img src="/images/sample/3t.gif"  alt="3" /></div>
 +
                <div><img src="/images/sample/3tw.gif" alt="3" /></div>
 +
            </li>
 +
            <li data-direction="horizontal">
 +
                <div><img src="/images/sample/4t.gif"  alt="4" /></div>
 +
                <div><img src="/images/sample/4tw.gif" alt="4" /></div>
 +
            </li>
 +
        </ul>
 +
    </div>
 +
    <!-- Green Static Tile -->
 +
    <div class="green live-tile exclude">
 +
        <span class="tile-title">static tile (figure 2d)</span>
 +
        <p>Static tiles can take advantage of theming too!</p>
 +
    </div>
 +
</div>
 +
<!-- Activate live tiles -->
 +
<script type="text/javascript">
 +
    // apply regular slide universally unless .exclude class is applied
 +
    // NOTE: The default options for each liveTile are being pulled from the 'data-' attributes
 +
    $(".live-tile, .flip-list").not(".exclude").liveTile();
 +
</script>
</div>
</div>
{{Team:Paris-Saclay/Footer}}
{{Team:Paris-Saclay/Footer}}

Revision as of 20:50, 18 July 2012

<script type="text/javascript" src='/Team:Paris-Saclay/jquery.min.js?action=raw&ctype=text/javascript'></script> <script type="text/javascript" src='/Team:Paris-Saclay/MetroJs.js?action=raw&ctype=text/javascript'></script> 

       slide tile (figure 2a)
<img src="/images/sample/1tw.gif" alt="1" />
<img src="/images/sample/2t.gif" alt="2" />
           <img src="/images/sample/3tw.gif" alt="3" />
           <a class="tile-title">flip tile front (figure 2b)</a>

           <img src="/images/sample/4tw.gif" alt="4" />
           <a class="tile-title">flip tile back (figure 2b)</a>

       flip list (figure 2c)
  • <img src="/images/sample/1t.gif" alt="1" />
    <img src="/images/sample/1tw.gif" alt="1" />
  • <img src="/images/sample/2t.gif" alt="2" />
    <img src="/images/sample/2tw.gif" alt="2" />
  • <img src="/images/sample/3t.gif" alt="3" />
    <img src="/images/sample/3tw.gif" alt="3" />
  • <img src="/images/sample/4t.gif" alt="4" />
    <img src="/images/sample/4tw.gif" alt="4" />
       static tile (figure 2d)

Static tiles can take advantage of theming too!

<script type="text/javascript"> 

   // apply regular slide universally unless .exclude class is applied
   // NOTE: The default options for each liveTile are being pulled from the 'data-' attributes
   $(".live-tile, .flip-list").not(".exclude").liveTile();

</script>

Retrieved from "http://2012.igem.org/Team:Paris-Saclay/Testing"