Team:WITS-CSIR SA

From 2011.igem.org

(Difference between revisions)
Line 39: Line 39:
             background-color: #eeeeff;
             background-color: #eeeeff;
         }
         }
 +
 +
#slider img {-moz-box-shadow:0 0 10px #000;-webkit-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;position:absolute;z-index:5;}
 +
#slider li {overflow:visible !important;}
 +
#slider div.slider-bg {background:#000;top:300px;height:102px;width:600px;left:0;position:absolute;z-index:10;opacity:.5;}
 +
#slider strong {margin-bottom:5px;color:#fff;}
 +
#slider p {color:#fff;}
 +
#slider .slide-closed div.slider-info {top:300px;height:72px;left:0;position:absolute;width:65px;z-index:15;padding:15px;}
 +
#slider .slide-closed strong {font-size:18px;margin-bottom:5px;}
 +
#slider .slide-closed p {display:none;font-size:11px;line-height:14px;color:#fff;margin:0 !important;}
 +
#slider .slide-open div.slider-info {top:300px;height:72px;left:0;position:absolute;width:570px;z-index:15;padding:15px;}
 +
#slider .slide-open strong {font-size:22px;color:#fff;}
     </style>
     </style>
     <script type="text/javascript">
     <script type="text/javascript">
Line 65: Line 76:
     <script type="text/javascript" src="https://2011.igem.org/Team:WITS-CSIR_SA/js/lib/jquery.jlayout.js?action=raw&amp;ctype=text/js"></script>
     <script type="text/javascript" src="https://2011.igem.org/Team:WITS-CSIR_SA/js/lib/jquery.jlayout.js?action=raw&amp;ctype=text/js"></script>
     <script type="text/javascript" src="https://2011.igem.org/Team:WITS-CSIR_SA/js/lib/liteaccordion.jquery.js?action=raw&amp;ctype=text/js"></script>
     <script type="text/javascript" src="https://2011.igem.org/Team:WITS-CSIR_SA/js/lib/liteaccordion.jquery.js?action=raw&amp;ctype=text/js"></script>
 +
<script type="text/javascript" src="https://2011.igem.org/Team:WITS-CSIR_SA/Accordion/jquery.easing.1.3.js?action=raw&amp;ctype=text/js"></script>
 +
<script type="text/javascript" src="https://2011.igem.org/Team:WITS-CSIR_SA/Accordion/jquery.zaccordion.min.js?action=raw&amp;ctype=text/js"></script>
     <!-- End:  Library -->
     <!-- End:  Library -->
     <!-- Begin: Custom -->
     <!-- Begin: Custom -->
Line 109: Line 122:
                 </div>
                 </div>
                 <br />
                 <br />
 +
<div id="accordion" class="large tall">
 +
<div id="shadow"></div>
 +
<ul id="slider">
 +
<li>
 +
<img src="http://www.armagost.com/wp-content/themes/assassin/images/statue.jpg" width="600" height="400" alt="Example Slide Image 1" />
 +
<div class="slider-bg"></div>
 +
<div class="slider-info">
 +
<strong>City View</strong>
 +
<p class="slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.</p>
 +
</div>
 +
</li>
 +
<li>
 +
<img src="http://www.armagost.com/wp-content/themes/assassin/images/door.jpg" width="600" height="400" alt="Example Slide Image 2" />
 +
<div class="slider-bg"></div>
 +
<div class="slider-info">
 +
<strong>Knock Knock!</strong>
 +
<p class="slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.</p>
 +
</div>
 +
</li>
 +
<li>
 +
<img src="http://www.armagost.com/wp-content/themes/assassin/images/shop.jpg" width="600" height="400" alt="Example Slide Image 3" />
 +
<div class="slider-bg"></div>
 +
<div class="slider-info">
 +
<strong>Cigars on Sale</strong>
 +
<p class="slider-text">Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.</p>
 +
</div>
 +
</li>
 +
<li>
 +
<img src="http://www.armagost.com/wp-content/themes/assassin/images/balcony.jpg" width="600" height="400" alt="Example Slide Image 4" />
 +
<div class="slider-bg"></div>
 +
<div class="slider-info">
 +
<strong>On the Balcony</strong>
 +
<p class="slider-text">Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.</p>
 +
</div>
 +
</li>
 +
<li>
 +
<img src="http://www.armagost.com/wp-content/themes/assassin/images/balcony.jpg" width="600" height="400" alt="Example Slide Image 4" />
 +
<div class="slider-bg"></div>
 +
<div class="slider-info">
 +
<strong>On the Balcony</strong>
 +
<p class="slider-text">Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.</p>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
             </div>
             </div>
         </div>
         </div>
Line 127: Line 185:
             $.fling('publish', 'ready');
             $.fling('publish', 'ready');
-
 
+
-
            $('#one').liteAccordion({
+
var accordion = $("#slider").zAccordion({
-
                onActivate: function () {
+
width: 900,
-
                    this.find('figcaption').fadeOut();
+
speed: 1000,
-
                },
+
easing: 'easeOutBounce',
-
                slideCallback: function () {
+
click: function() {
-
                    this.find('figcaption').fadeIn();
+
$("#slider").find("li.slide-open div.slider-info").css("display", "none");
-
                },
+
$("#slider").find("li.slide-previous div.slider-info").css("display", "none");
-
                autoPlay: false,
+
setTimeout(function(){
-
                pauseOnHover: true,
+
$("#slider").find("li.slide-open div.slider-info").css("display", "none").fadeIn(1200);
-
                theme: 'dark',
+
$("#slider").find("li.slide-previous div.slider-info").css("display", "none").fadeIn(1200);
-
                rounded: false,
+
}, 500)
-
                enumerateSlides: true,
+
},
-
                containerWidth: 932,
+
slideWidth: 500,
-
                containerHeight: 240
+
height: 400
-
            }).find('figcaption:first').show();
+
});
-
 
+
             dojo.parser.parse();
             dojo.parser.parse();
         });
         });

Revision as of 14:55, 18 September 2011

<!DOCTYPE html> Biotweet

Biotweet iGem

  • Example Slide Image 1
    City View

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.

  • Example Slide Image 2
    Knock Knock!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.

  • Example Slide Image 3
    Cigars on Sale

    Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.

  • Example Slide Image 4
    On the Balcony

    Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.

  • Example Slide Image 4
    On the Balcony

    Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.

Retrieved from "http://2011.igem.org/Team:WITS-CSIR_SA"