Team:Korea U Seoul/template/contents slider

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style> - →RESET: .onlyContent div{ border: 1px solid black; overflow: auto; box-siz...")
 
(23 intermediate revisions not shown)
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>
-
            /* RESET */
+
             .slider{padding:5px 100px; width: 943px; height: 352px; position: relative;}
-
             .onlyContent div{
+
             .slider > img { width: 943px; height: 352px;}
-
border: 1px solid black;
+
             .slider_navi{position: absolute; bottom: 30px; left: 110px;}
-
                overflow: auto;
+
             .slider_navi > span {background-color: #242424; margin: 10px; cursor: pointer; padding: 5px 7px; color: #FFFFFF;}
-
                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 style="width:100%;">
-
            <div id="slider_contents">           
+
        <div class="slider" style="border-radius:10px; margin:0 auto;">
-
                <div class="inner_content onlyContent">
+
            <img src="https://static.igem.org/mediawiki/2013/thumb/d/db/Sliders1.png/800px-Sliders1.png">
-
                    Slider Module
+
            <img src="https://static.igem.org/mediawiki/2013/thumb/4/40/Sliders2.png/800px-Sliders2.png">
-
                </div>
+
            <img src="https://static.igem.org/mediawiki/2013/thumb/4/40/Sliders3.png/800px-Sliders3.png">
-
            </div>
+
            <img src="https://static.igem.org/mediawiki/2013/thumb/1/13/Sliders4.png/800px-Sliders4.png">
-
            <div id="content_contents">
+
            <img src="https://static.igem.org/mediawiki/2013/thumb/7/71/Sliders5.png/800px-Sliders5.png">
-
                <div class="inner_content onlyContent">
+
            <div class="slider_navi">
-
                    <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>
         </div>
-
        <div id="footer_contents">
 
-
            <div class="inner_content onlyContent">
 
-
                Footer
 
-
            </div>
 
         </div>
         </div>
     </body>
     </body>
 +
    <script>
 +
        var slider = $(".slider");
 +
            slider.width(943);
 +
            slider.height(352);
 +
        var slider_navi = $(".slider_navi");
 +
        var imgs = slider.children("img");
 +
       
 +
        var i=0;
 +
        imgs.each(function(){
 +
            $(this).hide();
 +
            slider_navi.append("<span style='font-family: David; font-size: 14pt;' 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>

Latest revision as of 23:34, 27 September 2013

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