Team:Korea U Seoul/template/contents slider

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
     <head>  
+
     <head>
-
   
+
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 +
       
         <style>
         <style>
-
 
+
            .slider{width: 1000px; height: 400px; position: relative;}
-
/* http://www.menucool.com */ #sliderFrame  {    position:relative;    width:700px;    margin: 0 auto; /*center-aligned*/ } #slider, #slider div.sliderInner {     width:700px;height:306px;/* Must be the same size as the slider images */ } #slider { background:#fff url(loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto; /*center-aligned*/    transform: translate3d(0,0,0);    box-shadow: 0px 1px 5px #999999; } /* image wrapper */ #slider a.imgLink, #slider div.video { z-index:2; position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%; } #slider .video { background:transparent url(video.png) no-repeat 50% 50%; } /* Caption styles */ #slider div.mc-caption-bg, #slider div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:10px 0;/* 10px will increase the height.*/ left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/ bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/ z-index:3; overflow:hidden; font-size: 0; } #slider div.mc-caption-bg  {     /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/ background:Black;/* or any other colors such as White, or: background:none; */ } #slider div.mc-caption-bg2 {    background:none; } #slider div.mc-caption { font: bold 14px/20px Arial; color:#EEE; z-index:4; text-align:center;    background:none; } #slider div.mc-caption a { color:#FB0; } #slider div.mc-caption a:hover { color:#DA0; } /* ------ built-in navigation bullets wrapper ------*/ /* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */ #slider div.navBulletsWrapper  {    top:320px;/* Its position is relative to the #slider */ text-align:center; background:none; position:relative; z-index:5; } /* each bullet */ #slider div.navBulletsWrapper div  {    width:11px; height:11px;    font-size:0;color:White;/*hide the index number in the bullet element*/    background:transparent url(bullet.png) no-repeat 0 0;    display:inline-block; *display:inline; zoom:1;    overflow:hidden;cursor:pointer;    margin:0 6px;/* set distance between each bullet*/ } #slider div.navBulletsWrapper div.active {background-position:0 -11px;} /* --------- Others ------- */ #slider div.loading  {    width:100%; height:100%;    background:transparent url(loading.gif) no-repeat 50% 50%;    filter: alpha(opacity=60);    opacity:0.6;    position:absolute;    left:0;    top:0;      z-index:9; } #slider img, #slider>b, #slider a>b { position:absolute; border:none; display:none; } #slider div.sliderInner { overflow:hidden;  -webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/ position:absolute; top:0; left:0; } #slider>a, #slider video, #slider audio {display:none;}
+
            .slider > img { width: 1000px; height: 400px;}
-
 
+
            .slider_navi{position: absolute; bottom: 10px; left: 10px;}
-
            /* RESET */
+
            .slider_navi > span {background-color: #FFFFFF; margin: 10px; cursor: pointer}
-
            .onlyContent div{
+
-
border: 1px solid black;
+
-
                overflow: auto;
+
-
                box-sizing:border-box;
+
-
                -moz-box-sizing:border-box;
+
-
                -webkit-box-sizing:border-box;
+
-
            }
+
-
            body{
+
-
               
+
-
            }
+
-
            #slider_contents{
+
-
border: 1px solid black;
+
-
                min-height: 200px;
+
-
            }
+
-
            #footer_contents{
+
-
border: 1px solid black;
+
-
                min-height: 100px;
+
-
            }
+
-
            .inner_content{
+
-
                width: 100%;
+
-
                #margin: 0 auto;
+
-
            }
+
-
            /* Recycle CSS */
+
-
            .gridWrapper_2 > .grid_content{ float: left; width: 50%;}
+
-
           
+
-
            .metro_t td{border:1px solid white; text-align: center}
+
-
           
+
-
            /*index*/
+
-
            .index_right{
+
-
                #padding: 15px;
+
-
            }
+
         </style>
         </style>
-
<script type="text/javascript" language="javascript">
 
-
function mouseEvent(obj, img, att) {
 
-
if (att == 'n') {
 
-
obj.src = "https://static.igem.org/mediawiki/2013/" + img;
 
-
obj.width = "100%";
 
-
}
 
-
}
 
-
function iconClick(icon, obj, img, att) {
 
-
var idea = document.getElementById('idea_i');
 
-
var team = document.getElementById('team_i');
 
-
var proto = document.getElementById('proto_i');
 
-
var nac = document.getElementById('nac_i');
 
-
var micro = document.getElementById('micro_i');
 
-
var app = document.getElementById('app_i');
 
-
var hp = document.getElementById('hp_i');
 
-
if (idea.getAttribute('att') == 'y' || team.getAttribute('att') == 'y' || proto.getAttribute('att') == 'y' || nac.getAttribute('att') == 'y' || micro.getAttribute('att') == 'y' || app.getAttribute('att') == 'y' || hp.getAttribute('att') == 'y') {
 
-
idea.setAttribute('att', 'n');
 
-
team.setAttribute('att', 'n');
 
-
proto.setAttribute('att', 'n');
 
-
nac.setAttribute('att', 'n');
 
-
micro.setAttribute('att', 'n');
 
-
app.setAttribute('att', 'n');
 
-
hp.setAttribute('att', 'n');
 
-
idea.setAttribute('src', "https://static.igem.org/mediawiki/2013/a/ac/Icon-b.png");
 
-
team.setAttribute('src', "https://static.igem.org/mediawiki/2013/6/64/Icon-k.png");
 
-
proto.setAttribute('src', "https://static.igem.org/mediawiki/2013/c/cb/Icon-p.png");
 
-
nac.setAttribute('src', "https://static.igem.org/mediawiki/2013/e/e5/Icon-c.png");
 
-
micro.setAttribute('src', "https://static.igem.org/mediawiki/2013/0/00/Icon-e.png");
 
-
app.setAttribute('src', "https://static.igem.org/mediawiki/2013/1/1e/Icon-bo.png");
 
-
hp.setAttribute('src', "https://static.igem.org/mediawiki/2013/3/38/Icon-s.png");
 
-
}
 
-
if (icon == 'idea') {
 
-
document.getElementById('mainContents').innerHTML = "<p>아이젬</p>";
 
-
} else if (icon == 'team') {
 
-
document.getElementById('mainContents').innerHTML = "<p>아이젬1</p>";
 
-
} else if (icon == 'proto') {
 
-
document.getElementById('mainContents').innerHTML = "<p>아이젬2</p>";
 
-
} else if (icon == 'nac') {
 
-
document.getElementById('mainContents').innerHTML = "<p>아이젬3</p>";
 
-
} else if (icon == 'micro') {
 
-
document.getElementById('mainContents').innerHTML = "<p>아이젬4</p>";
 
-
} else if (icon == 'app') {
 
-
document.getElementById('mainContents').innerHTML = "<p>아이젬5</p>";
 
-
} else if (icon == 'hp') {
 
-
document.getElementById('mainContents').innerHTML = "<p>아이젬6</p>";
 
-
}
 
-
obj.src = "https://static.igem.org/mediawiki/2013/" + img;
 
-
obj.width = "100%";
 
-
obj.setAttribute('att', 'y');
 
-
}
 
-
</script>
 
     </head>
     </head>
     <body>
     <body>
-
         <div id="box">
+
         <div class="slider" style="border:1px solid red">
-
            <div id="slider_contents">           
+
             <img src="http://static4.depositphotos.com/1006994/448/v/950/depositphotos_4482997-Party-banner-background.jpg">
-
                <div class="inner_content onlyContent">
+
            <img src="http://static4.depositphotos.com/1006994/448/v/950/depositphotos_4482997-Party-banner-background.jpg">
-
                    <div id="sliderFrame">
+
            <img src="http://static4.depositphotos.com/1006994/448/v/950/depositphotos_4482997-Party-banner-background.jpg">
-
        <div id="slider">
+
            <img src="http://static4.depositphotos.com/1006994/448/v/950/depositphotos_4482997-Party-banner-background.jpg">
-
           
+
             <div class="slider_navi">
-
            <img src="ihttp://www.asge.org/uploadedImages/Patients/National_Colorectal_Cancer_Awareness_Month/NCCAM_Banner_36x12.jpg" alt="" />
+
-
             <img src="ihttp://www.asge.org/uploadedImages/Patients/National_Colorectal_Cancer_Awareness_Month/NCCAM_Banner_36x12.jpg" alt="" />
+
-
            <img src="ihttp://www.asge.org/uploadedImages/Patients/National_Colorectal_Cancer_Awareness_Month/NCCAM_Banner_36x12.jpg" alt="" />
+
-
        </div>
+
-
    </div>
+
-
                </div>
+
-
            </div>
+
-
            <div id="content_contents">
+
-
                <div class="inner_content onlyContent">
+
-
                    <div class="gridWrapper_2 onlyContent">
+
-
                        <div class="grid_content onlyContent">
+
-
                            <table class="metro_t" cellpadding="0" cellspacing="0" width="100%;">
+
-
                                <tr>
+
-
                                    <td colspan="2"><img att="n" id="idea_i" style="width:100%;" onmouseover="mouseEvent(this, 'e/e2/Icon-bw3D.png', document.getElementById('idea_i').getAttribute('att'));" onmouseout="mouseEvent(this, 'a/ac/Icon-b.png', document.getElementById('idea_i').getAttribute('att'));" onclick="iconClick('idea', this, '8/83/Icon-bc.png', document.getElementById('idea_i').getAttribute('att'));" src="https://static.igem.org/mediawiki/2013/a/ac/Icon-b.png"/></td>
+
-
                                    <td><img att="n" id="team_i" style="width:100%;" onmouseover="mouseEvent(this, '8/81/Icon-kw3D.png', document.getElementById('team_i').getAttribute('att'));" onmouseout="mouseEvent(this, '6/64/Icon-k.png', document.getElementById('team_i').getAttribute('att'));" onclick="iconClick('team', this, '5/51/Icon-kc.png', document.getElementById('team_i').getAttribute('att'));" src="https://static.igem.org/mediawiki/2013/6/64/Icon-k.png"/></td>
+
-
                                    <td rowspan="2"><img att="n" id="proto_i" style="width:100%;" onmouseover="mouseEvent(this, '1/1e/Icon-pw3D.png', document.getElementById('proto_i').getAttribute('att'));" onmouseout="mouseEvent(this, 'c/cb/Icon-p.png', document.getElementById('proto_i').getAttribute('att'));" onclick="iconClick('proto', this, '8/80/Icon-pc.png', document.getElementById('proto_i').getAttribute('att'));" src="https://static.igem.org/mediawiki/2013/c/cb/Icon-p.png"/></td>
+
-
                                </tr>
+
-
                                <tr>
+
-
                                    <td rowspan="2"><img att="n" id="nac_i" style="width:100%;" onmouseover="mouseEvent(this, '3/35/Icon-cw3D.png', document.getElementById('nac_i').getAttribute('att'));" onmouseout="mouseEvent(this, 'e/e5/Icon-c.png', document.getElementById('nac_i').getAttribute('att'));" onclick="iconClick('nac', this, '7/79/Icon-cc.png', document.getElementById('nac_i').getAttribute('att'));" src="https://static.igem.org/mediawiki/2013/e/e5/Icon-c.png"/></td>
+
-
                                    <td colspan="2"><img att="n" id="micro_i" style="width:100%;" onmouseover="mouseEvent(this, '1/11/Icon-ew3D.png', document.getElementById('micro_i').getAttribute('att'));" onmouseout="mouseEvent(this, '0/00/Icon-e.png', document.getElementById('micro_i').getAttribute('att'));" onclick="iconClick('micro', this, '9/92/Icon-ec.png', document.getElementById('micro_i').getAttribute('att'));" src="https://static.igem.org/mediawiki/2013/0/00/Icon-e.png"/></td>
+
-
                                </tr>
+
-
                                <tr>
+
-
                                    <td><img att="n" id="app_i" style="width:100%;" onmouseover="mouseEvent(this, '9/98/Icon-bow3D.png', document.getElementById('app_i').getAttribute('att'));" onmouseout="mouseEvent(this, '1/1e/Icon-bo.png', document.getElementById('app_i').getAttribute('att'));" onclick="iconClick('app', this, 'd/da/Icon-boc.png', document.getElementById('app_i').getAttribute('att'));" src="https://static.igem.org/mediawiki/2013/1/1e/Icon-bo.png"/></td>
+
-
                                    <td colspan="2"><img att="n" id="hp_i" style="width:100%;" onmouseover="mouseEvent(this, '2/2b/Icon-sw3D.png', document.getElementById('hp_i').getAttribute('att'));" onmouseout="mouseEvent(this, '3/38/Icon-s.png', document.getElementById('hp_i').getAttribute('att'));" onclick="iconClick('hp', this, '7/74/Icon-sc.png', document.getElementById('hp_i').getAttribute('att'));" src="https://static.igem.org/mediawiki/2013/3/38/Icon-s.png"/></td>
+
-
                                </tr>
+
-
                            </table>
+
-
                        </div>
+
-
                        <div class="grid_content onlyContent">
+
-
                            <div id="mainContents" class="index_right onlyContent">
+
-
                                <p>Image ______</p>
+
-
                                <p>
+
-
                                    How does the gHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does thHow does th
+
-
                                </p>
+
-
                            </div>
+
-
                        </div>
+
-
                </div>
+
-
                </div>
+
-
            </div>
+
-
        </div>
+
-
        <div id="footer_contents">
+
-
             <div class="inner_content onlyContent">
+
-
                Footer
+
             </div>
             </div>
         </div>
         </div>
     </body>
     </body>
 +
    <script>
 +
        var slider = $(".slider");
 +
            slider.width(1000);
 +
            slider.height(400);
 +
        var slider_navi = $(".slider_navi");
 +
        var imgs = slider.children("img");
 +
       
 +
        var i=0;
 +
        imgs.each(function(){
 +
            $(this).hide();
 +
            slider_navi.append("<span onclick=\"slide_img("+i+")\">"+(i+1)+"</span>");
 +
            i++;
 +
        })
 +
        $(imgs[0]).slideDown();
 +
       
 +
        function slide_img(index){       
 +
            imgs.each(function(){
 +
                $(this).hide();
 +
            });
 +
            var img = imgs[index];
 +
            $(img).fadeIn("slow");
 +
        }
 +
    </script>
</html>
</html>

Revision as of 15:33, 27 September 2013

Retrieved from "http://2013.igem.org/Team:Korea_U_Seoul/template/contents_slider"