Team:UCLA/anuved verma ucla2014 workspace/home

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:UCLA/anuved_verma_ucla2014_workspace/jscore}}
 
-
{{:Team:UCLA/anuved_verma_ucla2014_workspace/jsutils}}
 
-
{{:Team:UCLA/anuved_verma_ucla2014_workspace/jsslider}}
 
<html>
<html>
-
<head>
+
<head>
-
    <meta charset="utf-8">
+
<link href="https://2014.igem.org/Team:UCLA/anuved_verma_ucla2014_workspace/jscore?action=raw&ctype=text/css" rel="stylesheet">
-
    <meta name="viewport" content="width=device-width">
+
<script>
-
    <title>Arrow Navigator Example - Jssor Slider, Slideshow</title>
+
$(document).ready(function() {
-
</head>
+
//Display slider for Javascript users
-
<body style="font-family:Arial, Verdana;background-color:#fff;">
+
$('#Slider').css('display', 'block');
-
    <!-- it works the same with all jquery version from 1.x to 2.x -->
+
-
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
+
//Set height of slider (16/5 ratio)
-
    <!-- 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 -->
+
$('#Slider').css('height', ($('body').width() / 3.2));
-
    <!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
+
-
    <script>
+
//Position right/left arrows
-
        jQuery(document).ready(function ($) {
+
var BarHeight = $('#Slider').height() -  $('#BottomLinks').height();
-
            var options = {
+
$('#LeftBar, #RightBar').css('height', BarHeight);
-
                $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)
+
$('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
-
                $ArrowNavigatorOptions: {                      //[Optional] Options to specify and enable arrow navigator or not
+
-
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
+
-
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
+
-
                    $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
+
-
                    $Steps: 1                                      //[Optional] Steps to go for each navigation request, default value is 1
+
-
                }
+
-
            };
+
-
            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
+
//Repeats for window resize
-
        });
+
$(window).resize(function() {
-
    </script>
+
$('#Slider').css('height', ($('body').width() / 3.2));
-
    <!-- Jssor Slider Begin -->
+
-
    <!-- You can move inline styles to css file or css block. -->
+
var BarHeight = $('#Slider').height() - $('#BottomLinks').height();
-
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
+
$('#LeftBar, #RightBar').css('height', BarHeight);
-
        height: 300px; ">
+
$('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
 +
});
 +
 +
var TotalSlides = $('.Slides').length;
 +
var CurrentSlide = 0;
-
        <!-- Slides Container -->
+
$('#RightArrow').click(function() {
-
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
+
CurrentSlide = ++CurrentSlide % TotalSlides;
-
            overflow: hidden;">
+
changeSlide(CurrentSlide);
-
            <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>
+
$('#LeftArrow').click(function() {
-
            <div><img u="image" src="../img/photography/005.jpg" /></div>
+
CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
-
            <div><img u="image" src="../img/photography/006.jpg" /></div>
+
changeSlide(CurrentSlide);
-
            <div><img u="image" src="../img/photography/007.jpg" /></div>
+
});
-
            <div><img u="image" src="../img/photography/008.jpg" /></div>
+
-
        </div>
+
$('.SlideLink').click(function() {
-
       
+
var ClickedSlide = $(this).attr('id');
-
        <!-- Arrow Navigator Skin Begin -->
+
CurrentSlide = parseInt(ClickedSlide.replace('Link', ''));
-
        <style>
+
changeSlide(CurrentSlide);
-
            /* jssor slider arrow navigator skin 03 css */
+
});
-
            /*
+
-
            .jssora03l              (normal)
+
function changeSlide(num){
-
            .jssora03r              (normal)
+
var SlideID = '#Slide' + num;
-
            .jssora03l:hover        (normal mouseover)
+
$('.Slides').css('display', 'none');
-
            .jssora03r:hover        (normal mouseover)
+
$(SlideID).css('display', 'block');
-
            .jssora03ldn            (mousedown)
+
}
-
            .jssora03rdn            (mousedown)
+
});
-
            */
+
</script>
-
            .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
+
</head>
-
            {
+
-
            position: absolute;
+
<body>
-
            cursor: pointer;
+
<section id="HomePageContent">
-
            display: block;
+
<div id="Slider">
-
                background: url(../img/a03.png) no-repeat;
+
<div id="Slide0" class="Slides current"></div>
-
                overflow:hidden;
+
<div id="Slide1" class="Slides"></div>
-
            }
+
<div id="Slide2" class="Slides"></div>
-
            .jssora03l { background-position: -3px -33px; }
+
<div id="Slide3" class="Slides"></div>
-
            .jssora03r { background-position: -63px -33px; }
+
<div id="Slide4" class="Slides"></div>
-
            .jssora03l:hover { background-position: -123px -33px; }
+
<div id="Slide5" class="Slides"></div>
-
            .jssora03r:hover { background-position: -183px -33px; }
+
<div id="LeftBar" class="SideBar"><div id="LeftArrow"></div></div>
-
            .jssora03ldn { background-position: -243px -33px; }
+
<div id="RightBar" class="SideBar"><div id="RightArrow"></div></div>
-
            .jssora03rdn { background-position: -303px -33px; }
+
<ul id="BottomLinks">
-
        </style>
+
<li id="Link0" class="SlideLink">Intro</li><li id="Link1" class="SlideLink">Problem</li><li id="Link2" class="SlideLink">Situation</li><li id="Link3" class="SlideLink">Idea</li><li id="Link4" class="SlideLink">Solution</li><li id="Link5" class="SlideLink">Platform</li>
-
        <!-- Arrow Left -->
+
</ul>
-
        <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
+
</div>
-
        </span>
+
</section>
-
        <!-- 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>
</body>
</html>
</html>

Revision as of 06:27, 20 September 2014

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