Team:UCLA/anuved verma ucla2014 workspace/home

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:UCLA/anuved_verma_ucla2014_workspace}}
+
{{:Team:UCLA/anuved_verma_ucla2014_workspace/jscore}}
-
 
+
{{:Team:UCLA/anuved_verma_ucla2014_workspace/jsutils}}
-
<html lang="en">
+
{{:Team:UCLA/anuved_verma_ucla2014_workspace/jsslider}}
-
<!-- TITLE BANNER-->
+
<html>
-
<br><center><img src="http://www.achickwithbaggage.com/storage/site_graphics/ad_placeholder_banner.jpg?__SQUARESPACE_CACHEVERSION=1297808765522"></center><br><Br>
+
<head>
-
 
+
    <meta charset="utf-8">
-
<!--SLIDER-->
+
    <meta name="viewport" content="width=device-width">
-
<div class="slider">
+
    <title>Arrow Navigator Example - Jssor Slider, Slideshow</title>
-
<img id="1" src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" border="0"/>
+
</head>
-
<img id="2" src="http://tmacfitness.com/wp-content/uploads/2013/04/Beauty-of-nature-random-4884759-1280-800.jpg" border="0"/>
+
<body style="font-family:Arial, Verdana;background-color:#fff;">
-
<img id="3" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" border="0"/>
+
    <!-- it works the same with all jquery version from 1.x to 2.x -->
-
</div>
+
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
-
<div class="slider_nav">
+
     <!-- use jssor.slider.mini.js (40KB) or jssor.sliderc.mini.js (32KB, with caption, no slideshow) or jssor.sliders.mini.js (28KB, no caption, no slideshow) instead for release -->
-
<img id="left" style="float:left;" src="http://www.visme.co/wp-content/themes/visme/images/left.png" border="0"/>
+
     <!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
-
<img id="right" style="float:right;" src="http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png" border="0"/>
+
     <script>
-
</div>
+
        jQuery(document).ready(function ($) {
-
<div class="shadow"></div>
+
            var options = {
-
 
+
                $DragOrientation: 3,                               //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
-
</div>
+
                $ArrowNavigatorOptions: {                      //[Optional] Options to specify and enable arrow navigator or not
-
 
+
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
-
<!--SUMMARY TILES-->
+
                    $ChanceToShow: 2,                              //[Required] 0 Never, 1 Mouse Over, 2 Always
-
<br><hr class="style-one">
+
                    $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
-
<div class="container">
+
                    $Steps: 1                                      //[Optional] Steps to go for each navigation request, default value is 1
-
     <div class = "expandedContent">
+
                }
-
    <div class="boxgrid contentBorder boxgridMedium" id="box5" style="margin-left:210px">
+
            };
-
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
+
-
  <a class="cover boxcaption" style="top: 340px" href="#anch1">
+
-
    <h2 class="onBlack">Customizing Silk</h2>
+
-
     <p class="onBlackIntro">
+
-
 
+
-
If you wish to see how, click here to start the interactive tour.
+
-
    </p>
+
-
    <p class="onBlack">
+
-
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
+
-
     </p>
+
-
  </a>
+
-
</div>
+
-
<div class="boxgrid contentBorder boxgridMedium" id="box6" style="margin-left:40px">
+
-
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
+
-
  <a class="cover boxcaption" style="top: 340px" href="#anch2">
+
-
     <h2 class="onBlack">Functionalizing Fibers</h2>
+
-
    <p class="onBlackIntro">
+
-
 
+
-
If you wish to see how, click here to start the interactive tour.
+
-
    </p>
+
-
    <p class="onBlack">
+
-
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
+
-
    </p>
+
-
  </a>
+
-
</div>
+
-
<div class="boxgrid contentBorder boxgridMedium" id="box7" style="margin-left:40px">
+
-
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
+
-
  <a class="cover boxcaption" style="top: 340px" href="#anch3">
+
-
    <h2 class="onBlack">Spinning Silk</h2>
+
-
    <p class="onBlackIntro">
+
-
 
+
-
If you wish to see how, click here to start the interactive tour.
+
-
    </p>
+
-
    <p class="onBlack">
+
-
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
+
-
    </p>
+
-
  </a>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
 
+
-
<div style="position:absolute;background-color:#transparent;width:100%;height:20%;top:1200px;z-index:-1;"></div>
+
 +
            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
 +
        });
 +
    </script>
 +
    <!-- Jssor Slider Begin -->
 +
    <!-- You can move inline styles to css file or css block. -->
 +
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
 +
        height: 300px; ">
 +
        <!-- Slides Container -->
 +
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
 +
            overflow: hidden;">
 +
            <div><img u="image" src="https://static.igem.org/mediawiki/2014/1/11/002.jpg" /></div>
 +
            <div><img u="image" src="https://static.igem.org/mediawiki/2014/9/9c/003.jpg" /></div>
 +
            <div><img u="image" src="https://static.igem.org/mediawiki/2014/c/c0/004.jpg" /></div>
 +
            <div><img u="image" src="../img/photography/005.jpg" /></div>
 +
            <div><img u="image" src="../img/photography/006.jpg" /></div>
 +
            <div><img u="image" src="../img/photography/007.jpg" /></div>
 +
            <div><img u="image" src="../img/photography/008.jpg" /></div>
 +
        </div>
 +
       
 +
        <!-- Arrow Navigator Skin Begin -->
 +
        <style>
 +
            /* jssor slider arrow navigator skin 03 css */
 +
            /*
 +
            .jssora03l              (normal)
 +
            .jssora03r              (normal)
 +
            .jssora03l:hover        (normal mouseover)
 +
            .jssora03r:hover        (normal mouseover)
 +
            .jssora03ldn            (mousedown)
 +
            .jssora03rdn            (mousedown)
 +
            */
 +
            .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
 +
            {
 +
            position: absolute;
 +
            cursor: pointer;
 +
            display: block;
 +
                background: url(../img/a03.png) no-repeat;
 +
                overflow:hidden;
 +
            }
 +
            .jssora03l { background-position: -3px -33px; }
 +
            .jssora03r { background-position: -63px -33px; }
 +
            .jssora03l:hover { background-position: -123px -33px; }
 +
            .jssora03r:hover { background-position: -183px -33px; }
 +
            .jssora03ldn { background-position: -243px -33px; }
 +
            .jssora03rdn { background-position: -303px -33px; }
 +
        </style>
 +
        <!-- Arrow Left -->
 +
        <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
 +
        </span>
 +
        <!-- Arrow Right -->
 +
        <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
 +
        </span>
 +
        <!-- Arrow Navigator Skin End -->
 +
        <a style="display: none" href="http://www.jssor.com">responsive carousel</a>
 +
    </div>
 +
    <!-- Jssor Slider End -->
 +
</body>
</html>
</html>

Revision as of 06:12, 20 September 2014

/* Slider Styles */

  1. Slider {

position: relative; width: 100%; display: none; }

  1. Slider .Slides {

width: 100%; height: 100%; background-size: 100%, auto; }

  1. Slider #Slide0 {

background-image: url(2013UCalgarySlider1.png); }

  1. Slider #Slide1 {

background-image: url(2013UCalgarySlider2.png); display: none; }

  1. Slider #Slide2 {

background-image: url(2013UCalgarySlider3.png); display: none; }

  1. Slider #Slide3 {

background-image: url(2013UCalgarySlider4.png); display: none; }

  1. Slider #Slide4 {

background-image: url(2013UCalgarySlider5.png); display: none; }

  1. Slider #Slide5 {

background-image: url(2013UCalgarySlider6.png); display: none; }

  1. Slider #BottomLinks {

position: absolute; width: 100%; padding: 0; bottom: 0; background: #353132; text-align: center; opacity: 0.61; filter: alpha(opacity=61); }

  1. Slider #BottomLinks li {

display: inline-table; list-style: none; height: 100%; color: #FFFFFF; font: 24px Raleway, Arial, san-serif; text-align: center; padding: 15px 20px; }

  1. Slider #BottomLinks li:hover {

cursor: pointer; text-decoration: underline; }

  1. Slider .SideBar {

position: absolute; top: 0; width: 90px; z-index: 1; }

  1. Slider #LeftBar {

left: 0; }

  1. Slider #RightBar {

right: 0; }

  1. Slider #LeftArrow {

position: absolute; width: 60px; height: 60px; margin-left: 30px; background: url(2013UCalgaryArrowLeft.png) top no-repeat; }

  1. Slider #RightArrow {

position: absolute; width: 60px; height: 60px; margin-right: 30px; background: url(2013UCalgaryArrowRight.png) top no-repeat; }

  1. Slider #LeftArrow:hover, #Slider #RightArrow:hover {

background-position: bottom; cursor: pointer; } Arrow Navigator Example - Jssor Slider, Slideshow

responsive carousel

Retrieved from "http://2014.igem.org/Team:UCLA/anuved_verma_ucla2014_workspace/home"