Team:BIOSINT Mexico/Gallerie

From 2012e.igem.org

(Difference between revisions)
(Created page with "Gallerie")
 
(38 intermediate revisions not shown)
Line 1: Line 1:
-
Gallerie
+
<html lang="en">
 +
<style type="text/css">
 +
#p-logo {
 +
display:none;
 +
}
 +
#search-controls{
 +
display:none;
 +
}
 +
#top-section{
 +
height:0px;
 +
border-left: none;
 +
border-right: none;
 +
border-bottom: none;
 +
}
 +
.firstHeading{
 +
display:none;
 +
}
 +
 
 +
#content {
 +
position: relative;
 +
width: 100%;
 +
margin:none;
 +
padding:none;
 +
background:url(http://www.persoft.mx/biosint/sw_l_bg.png) repeat-y;
 +
color:none;
 +
border-left:none;
 +
border-right:none;
 +
line-height:none;
 +
z-index:none;
 +
}
 +
 
 +
#catlinks {
 +
display:none;
 +
}
 +
 
 +
#footer-box {
 +
margin-left: 10px;
 +
width: 965px;
 +
padding:none;
 +
background-color:none;
 +
background: url(http://sondear.mx/biosint/images/block-1-bottom.jpg) 0 bottom repeat-x;
 +
margin: 0 auto;
 +
border:none;
 +
display: none;
 +
}
 +
 
 +
#globalWrapper {
 +
font-size: 83%;
 +
 
 +
}
 +
 
 +
.right-menu{
 +
display:none;
 +
}
 +
 
 +
 
 +
#menubar{
 +
 
 +
color: rgba(0,0,0,0.0);
 +
 
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
color: black;
 +
background: none;
 +
font-weight: normal;
 +
margin: 0;
 +
padding-top: .5em;
 +
padding-bottom: .17em;
 +
border-bottom: 0px;
 +
}
 +
 
 +
</style>
 +
 
 +
<script language="javascript">
 +
          $(document).ready(function() {
 +
               
 +
              $("#menubar").children().children("li").css("color", "rgba(0,0,0,0.0)");
 +
                    $("#menubar").children().children("li").children("a").css("color", "rgba(0,0,0,0.0)");
 +
 
 +
 
 +
              $("#menubar").hover(function() {
 +
                    $(this).children().children("li").css("color", "#fff");
 +
                    $(this).children().children("li").children("a").css("color", "#fff");
 +
              },function() {
 +
                    $(this).children().children("li").css("color", "rgba(0,0,0,0.0)");
 +
                    $(this).children().children("li").children("a").css("color", "rgba(0,0,0,0.0)");
 +
              });
 +
          });
 +
    </script>
 +
 
 +
 
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>SIDEWAYS jQuery fullscreen image gallery</title>
 +
<style type="text/css">
 +
<!--
 +
html,body{height:100%}
 +
body {margin:0; padding:0; background:#333 url(http://www.persoft.mx/biosint/images/bg.jpg); overflow:hidden; font-family:Helvetica, Arial, sans-serif; font-size:16px;}
 +
/* custom fonts */
 +
@font-face {
 +
font-family: 'eurof55-webfont';
 +
src: url('http://www.persoft.mx/biosint/css/fonts/eurof55-webfont.eot');
 +
src: local('☺'), url('http://www.persoft.mx/biosint/css/fonts/eurof55-webfont.woff') format('woff'), url('http://www.persoft.mx/biosint/css/fonts/eurof55-webfont.ttf') format('truetype'), url('http://www.persoft.mx/biosint/css/fonts/eurof55-webfont.svg#webfont8xigBfG2') format('svg');
 +
}
 +
@font-face {
 +
font-family: 'eurof35-webfont';
 +
src: url('http://www.persoft.mx/biosint/css/fonts/eurof35-webfont.eot');
 +
src: local('☺'), url('http://www.persoft.mx/biosint/css/fonts/eurof35-webfont.woff') format('woff'), url('http://www.persoft.mx/biosint/css/fonts/eurof35-webfont.ttf') format('truetype'), url('http://www.persoft.mx/biosint/css/fonts/eurof35-webfont.svg#webfont8xigBfG2') format('svg');
 +
}
 +
@font-face {
 +
font-family: 'graublauweb-webfont';
 +
src: url('http://www.persoft.mx/biosint/css/fonts/graublauweb-webfont.eot');
 +
src: local('☺'), url('http://www.persoft.mx/biosint/css/fonts/graublauweb-webfont.woff') format('woff'), url('http://www.persoft.mx/biosint/css/fonts/graublauweb-webfont.ttf') format('truetype'), url('http://www.persoft.mx/biosint/css/fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
 +
}
 +
.igem{left:358px; position:absolute;}
 +
.clear{clear:both;}
 +
a:link,a:visited,a:hover{color:#ddd;}
 +
a:hover{color:#fff; text-decoration:none;}
 +
#bg{position:fixed; left:585px; top:0; width:100%; height:100%;}
 +
#bgimg{display:none; cursor:pointer; -ms-interpolation-mode: bicubic;} /* special IE fix for resized images */
 +
#preloader{position:absolute; z-index:2; width:140px; padding:20px; top:20px; left:50px; background:#000; color:#666; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:16px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
 +
#preloader img{margin-right:20px;}
 +
#toolbar{display:inline-block; padding:4px 15px; margin:20px 15px; background:#262626 url(http://www.persoft.mx/biosint/sw_btn_bg.png) repeat-x; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:12px; color:#fff; cursor:pointer;}
 +
#menus{display:inline-block; padding:4px 15px; margin:20px 15px; background:#262626 url(http://www.persoft.mx/biosint/sw_btn_bg.png) repeat-x; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:12px; color:#fff; cursor:pointer;}
 +
#outer_container{position:relative; margin:0; width:700px; padding:0 100px 0 0; z-index:2; background:url(http://www.persoft.mx/biosint/empty.gif);} /* fucking IE needs a background value to understand hover area */
 +
#customScrollBox{position:relative; overflow:hidden; background:url(http://www.persoft.mx/biosint/sw_l_bg.png) repeat-y;}
 +
#customScrollBox .container{position:relative; width:585px; top:0; float:left;}
 +
#customScrollBox .content{clear:both;}
 +
#customScrollBox .content h1{padding:5px; margin:10px; color:#fff; font-family:eurof55-webfont, Helvetica, Arial, sans-serif; font-size:48px;}
 +
#customScrollBox .content h2{padding:5px; margin:10px 10px 0 10px; color:#fff; font-family:eurof35-webfont, Helvetica, Arial, sans-serif; font-size:24px;}
 +
#customScrollBox .content p{padding:5px; margin:0 10px 10px 10px; color:#ddd; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; line-height:26px;}
 +
.light{font-family:eurof35-webfont, Helvetica, Arial, sans-serif;}
 +
.grey{color:#999;}
 +
.lightgrey{color:#ddd;}
 +
.s36{font-size:36px;}
 +
.s24{font-size:24px;}
 +
#customScrollBox a.thumb_link{position:relative; margin:0 0 1px 1px; display:block; float:left;}
 +
#customScrollBox img{border:none;}
 +
#customScrollBox a.thumb_link .selected{position:absolute; top:0; left:0; width:145px; height:91px; background:url(http://www.persoft.mx/biosint/sw_thumb_selected.png) no-repeat; display:none;}
 +
#dragger_container{position:relative; width:30px; height:580px; float:left; margin:10px 0 0 0; background:url(http://www.persoft.mx/biosint/sw_dragger_bg.png) repeat-y center;}
 +
#dragger{position:absolute; width:30px; height:59px; background:url(http://www.persoft.mx/biosint/round_custom_scrollbar_bg.png) no-repeat center center; cursor:pointer;}
 +
#arrow_indicator{position:absolute; z-index:1; width:50px; padding:10px; top:50%; margin-top:-25px; left:20px; background:url(http://www.persoft.mx/biosint/sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none;}
 +
#nextimage_tip{position:fixed; z-index:1; padding:0 20px; line-height:40px; color:#fff; height:40px; top:50%; margin-top:-20px; right:20px; background:url(http://www.persoft.mx/biosint/sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif;}
 +
.with_border{border:1px solid #000;}
 +
.with_shadow{-moz-box-shadow:0 0 40px #000; -webkit-box-shadow:0 0 40px #000; box-shadow:0 0 40px #000;}
 +
-->
 +
</style>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 +
<script type="text/javascript" src="http://www.persoft.mx/biosint/js/jquery.easing.1.3.js"></script>
 +
<script type="text/javascript" src="http://www.persoft.mx/biosint/js/jquery.mousewheel.min.js"></script>
 +
</head>
 +
 
 +
<body>
 +
<div id="outer_container">
 +
<div id="customScrollBox">
 +
<div class="container">
 +
    <div class="content">
 +
<a class="igem" href="https://igem.org/Main_Page"><img src="http://www.persoft.mx/biosint/images/ICL_iGEM_Logo.png" alt="" /></a>
 +
        <h1>BIO<span class="lightgrey">SINT</span> <br /><br /><span class="light"><span class="grey"><span class="s36">CREATIVE PROCESS</span></span></span></h1>
 +
            <p>Here is our story...</br>
 +
<div id="menus"><a href="https://2012e.igem.org/wiki/index.php/Team:BIOSINT_Mexico"><span class="lightgrey">HOME</span></a></div>
 +
 
 +
<div id="menus"><a href="https://2012e.igem.org/wiki/index.php/Team:BIOSINT_Mexico/Team"><span class="lightgrey">TEAM</span></a></div>
 +
 
 +
<div id="menus"><a href="https://2012e.igem.org/wiki/index.php/Team:BIOSINT_Mexico/Summary"><span class="lightgrey">PROJECT</span></a></div>
 +
 
 +
<div id="menus"><a href="https://2012e.igem.org/wiki/index.php/Team:BIOSINT_Mexico/HumanPractices"><span class="lightgrey">HUMAN</br>PRACTICES</span></a></div>
 +
 
 +
<div id="menus"><a href="https://2012e.igem.org/wiki/index.php/Team:BIOSINT_Mexico/Attributions"><span class="lightgrey">SPONSORS</span></a></div>
 +
</p>
 +
            <div id="toolbar"></div><div class="clear"></div>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo1.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo1 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo2.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo2 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo3.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo3 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo4.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo4 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo5.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo5 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo6.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo6 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo7.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo7 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo8.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo8 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo9.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo9 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo10.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo10 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo11.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo11 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo12.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo12 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo13.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo13 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo14.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo14 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo15.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo15 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo16.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo16 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
<a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo17.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo17 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo18.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo18 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo19.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo19 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo20.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo20 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo21.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo21 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo22.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo22 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo23.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo23 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo24.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo24 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo25.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo25 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
<a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo26.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo26 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo27.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo27 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo28.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo28 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo29.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo29 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
<a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo30.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo30 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo31.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo31 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo32.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo32 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo33.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo33 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo34.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo34 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo35.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo35 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo36.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo36 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo37.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo37 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
            <a href="http://www.persoft.mx/biosint/galleria/igem/recuerdo38.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo38 - mini.jpg" title="" alt="" class="thumb" /></a>
 +
           
 +
            <p class="clear"></p>
 +
        </div>
 +
</div>
 +
    <div id="dragger_container"><div id="dragger"></div></div>
 +
</div>
 +
</div>
 +
<div id="bg">
 +
    <img src="http://www.persoft.mx/biosint/galleria/igem/recuerdo1.jpg" title="Supremus Lucernarium" id="bgimg" />
 +
<div id="preloader"><img src="http://www.persoft.mx/biosint/ajax-loader_dark.gif" width="32" height="32" align="absmiddle" />LOADING...</div>
 +
    <div id="arrow_indicator"><img src="http://www.persoft.mx/biosint/sw_arrow_indicator.png" width="50" height="50"  /></div>
 +
    <div id="nextimage_tip">Click for next image</div>
 +
</div>
 +
<script>
 +
//set default view mode
 +
$defaultViewMode="fit"; //full (fullscreen background), fit (fit to window), original (no scale)
 +
//cache vars
 +
$bg=$("#bg");
 +
$bgimg=$("#bg #bgimg");
 +
$preloader=$("#preloader");
 +
$outer_container=$("#outer_container");
 +
$outer_container_a=$("#outer_container a.thumb_link");
 +
$toolbar=$("#toolbar");
 +
$nextimage_tip=$("#nextimage_tip");
 +
 +
$(window).load(function() {
 +
$toolbar.data("imageViewMode",$defaultViewMode); //default view mode
 +
ImageViewMode($toolbar.data("imageViewMode"));
 +
//cache vars
 +
$customScrollBox=$("#customScrollBox");
 +
$customScrollBox_container=$("#customScrollBox .container");
 +
$customScrollBox_content=$("#customScrollBox .content");
 +
$dragger_container=$("#dragger_container");
 +
$dragger=$("#dragger");
 +
 +
CustomScroller();
 +
 +
function CustomScroller(){
 +
outerMargin=0;
 +
innerMargin=20;
 +
$customScrollBox.height($(window).height()-outerMargin);
 +
$dragger_container.height($(window).height()-innerMargin);
 +
visibleHeight=$(window).height()-outerMargin;
 +
if($customScrollBox_container.height()>visibleHeight){ //custom scroll depends on content height
 +
$dragger_container,$dragger.css("display","block");
 +
totalContent=$customScrollBox_content.height();
 +
draggerContainerHeight=$(window).height()-innerMargin;
 +
animSpeed=400; //animation speed
 +
easeType="easeOutCirc"; //easing type
 +
bottomSpace=1.05; //bottom scrolling space
 +
targY=0;
 +
draggerHeight=$dragger.height();
 +
$dragger.draggable({
 +
axis: "y",
 +
containment: "parent",
 +
drag: function(event, ui) {
 +
Scroll();
 +
},
 +
stop: function(event, ui) {
 +
DraggerOut();
 +
}
 +
});
 +
 
 +
//scrollbar click
 +
$dragger_container.click(function(e) {
 +
var mouseCoord=(e.pageY - $(this).offset().top);
 +
var targetPos=mouseCoord+$dragger.height();
 +
if(targetPos<draggerContainerHeight){
 +
$dragger.css("top",mouseCoord);
 +
Scroll();
 +
} else {
 +
$dragger.css("top",draggerContainerHeight-$dragger.height());
 +
Scroll();
 +
}
 +
});
 +
 
 +
//mousewheel
 +
$(function($) {
 +
$customScrollBox.bind("mousewheel", function(event, delta) {
 +
vel = Math.abs(delta*10);
 +
$dragger.css("top", $dragger.position().top-(delta*vel));
 +
Scroll();
 +
if($dragger.position().top<0){
 +
$dragger.css("top", 0);
 +
$customScrollBox_container.stop();
 +
Scroll();
 +
}
 +
if($dragger.position().top>draggerContainerHeight-$dragger.height()){
 +
$dragger.css("top", draggerContainerHeight-$dragger.height());
 +
$customScrollBox_container.stop();
 +
Scroll();
 +
}
 +
return false;
 +
});
 +
});
 +
 
 +
function Scroll(){
 +
var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
 +
var draggerY=$dragger.position().top;
 +
targY=-draggerY*scrollAmount;
 +
var thePos=$customScrollBox_container.position().top-targY;
 +
$customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType); //with easing
 +
}
 +
 
 +
//dragger hover
 +
$dragger.mouseup(function(){
 +
DraggerOut();
 +
}).mousedown(function(){
 +
DraggerOver();
 +
});
 +
 
 +
function DraggerOver(){
 +
$dragger.css("background", "url(http://www.persoft.mx/biosint/round_custom_scrollbar_bg_over.png)");
 +
}
 +
 
 +
function DraggerOut(){
 +
$dragger.css("background", "url(http://www.persoft.mx/biosint/round_custom_scrollbar_bg.png)");
 +
}
 +
} else { //hide custom scrollbar if content is short
 +
$dragger,$dragger_container.css("display","none");
 +
}
 +
}
 +
 
 +
//resize browser window functions
 +
$(window).resize(function() {
 +
FullScreenBackground("#bgimg"); //scale bg image
 +
$dragger.css("top",0); //reset content scroll
 +
$customScrollBox_container.css("top",0);
 +
$customScrollBox.unbind("mousewheel");
 +
CustomScroller();
 +
});
 +
 +
LargeImageLoad($bgimg);
 +
});
 +
 +
//loading bg image
 +
$bgimg.load(function() {
 +
LargeImageLoad($(this));
 +
});
 +
 +
function LargeImageLoad($this){
 +
$preloader.fadeOut("fast"); //hide preloader
 +
$this.removeAttr("width").removeAttr("height").css({ width: "", height: "" }); //lose all previous dimensions in order to rescale new image data
 +
$bg.data("originalImageWidth",$this.width()).data("originalImageHeight",$this.height());
 +
if($bg.data("newTitle")){
 +
$this.attr("title",$bg.data("newTitle")); //set new image title attribute
 +
}
 +
FullScreenBackground($this); //scale new image
 +
$bg.data("nextImage",$($outer_container.data("selectedThumb")).next().attr("href")); //get and store next image
 +
if(typeof itemIndex!="undefined"){
 +
if(itemIndex==lastItemIndex){ //check if it is the last image
 +
$bg.data("lastImageReached","Y");
 +
$bg.data("nextImage",$outer_container_a.first().attr("href")); //get and store next image
 +
} else {
 +
$bg.data("lastImageReached","N");
 +
}
 +
} else {
 +
$bg.data("lastImageReached","N");
 +
}
 +
$this.fadeIn("slow"); //fadein background image
 +
if($bg.data("nextImage") || $bg.data("lastImageReached")=="Y"){ //don't close thumbs pane on 1st load
 +
SlidePanels("close"); //close the left pane
 +
}
 +
NextImageTip();
 +
}
 +
 
 +
//slide in/out left pane
 +
$outer_container.hover(
 +
function(){ //mouse over
 +
SlidePanels("open");
 +
},
 +
function(){ //mouse out
 +
SlidePanels("close");
 +
}
 +
);
 +
 +
//Clicking on thumbnail changes the background image
 +
$outer_container_a.click(function(event){
 +
event.preventDefault();
 +
var $this=this;
 +
$bgimg.css("display","none");
 +
$preloader.fadeIn("fast"); //show preloader
 +
//style clicked thumbnail
 +
$outer_container_a.each(function() {
 +
    $(this).children(".selected").css("display","none");
 +
  });
 +
$(this).children(".selected").css("display","block");
 +
//get and store next image and selected thumb
 +
$outer_container.data("selectedThumb",$this);
 +
$bg.data("nextImage",$(this).next().attr("href"));
 +
$bg.data("newTitle",$(this).children("img").attr("title")); //get and store new image title attribute
 +
itemIndex=getIndex($this); //get clicked item index
 +
lastItemIndex=($outer_container_a.length)-1; //get last item index
 +
$bgimg.attr("src", "").attr("src", $this); //switch image
 +
});
 +
 
 +
//clicking on large image loads the next one
 +
$bgimg.click(function(event){
 +
var $this=$(this);
 +
if($bg.data("nextImage")){ //if next image data is stored
 +
$this.css("display","none");
 +
$preloader.fadeIn("fast"); //show preloader
 +
$($outer_container.data("selectedThumb")).children(".selected").css("display","none"); //deselect thumb
 +
if($bg.data("lastImageReached")!="Y"){
 +
$($outer_container.data("selectedThumb")).next().children(".selected").css("display","block"); //select new thumb
 +
} else {
 +
$outer_container_a.first().children(".selected").css("display","block"); //select new thumb - first
 +
}
 +
//store new selected thumb
 +
var selThumb=$outer_container.data("selectedThumb");
 +
if($bg.data("lastImageReached")!="Y"){
 +
$outer_container.data("selectedThumb",$(selThumb).next());
 +
} else {
 +
$outer_container.data("selectedThumb",$outer_container_a.first());
 +
}
 +
$bg.data("newTitle",$($outer_container.data("selectedThumb")).children("img").attr("title")); //get and store new image title attribute
 +
if($bg.data("lastImageReached")!="Y"){
 +
itemIndex++;
 +
} else {
 +
itemIndex=0;
 +
}
 +
$this.attr("src", "").attr("src", $bg.data("nextImage")); //switch image
 +
}
 +
});
 +
 +
//function to get element index (fuck you IE!)
 +
function getIndex(theItem){
 +
for ( var i = 0, length = $outer_container_a.length; i < length; i++ ) {
 +
if ( $outer_container_a[i] === theItem ) {
 +
return i;
 +
}
 +
}
 +
}
 +
 +
//toolbar (image view mode button) hover
 +
$toolbar.hover(
 +
function(){ //mouse over
 +
$(this).stop().fadeTo("fast",1);
 +
},
 +
function(){ //mouse out
 +
$(this).stop().fadeTo("fast",0.8);
 +
}
 +
);
 +
$toolbar.stop().fadeTo("fast",0.8); //set its original state
 +
 +
//Clicking on toolbar changes the image view mode
 +
$toolbar.click(function(event){
 +
if($toolbar.data("imageViewMode")=="full"){
 +
ImageViewMode("fit");
 +
} else if($toolbar.data("imageViewMode")=="fit") {
 +
ImageViewMode("original");
 +
} else if($toolbar.data("imageViewMode")=="original"){
 +
ImageViewMode("full");
 +
}
 +
});
 +
 
 +
//next image balloon tip
 +
function NextImageTip(){
 +
if($bg.data("nextImage")){ //check if this is the first image
 +
$nextimage_tip.stop().css("right",20).fadeIn("fast").fadeOut(2000,"easeInExpo",function(){$nextimage_tip.css("right",$(window).width());});
 +
}
 +
}
 +
 
 +
//slide in/out left pane function
 +
function SlidePanels(action){
 +
var speed=900;
 +
var easing="easeInOutExpo";
 +
if(action=="open"){
 +
$("#arrow_indicator").fadeTo("fast",0);
 +
$outer_container.stop().animate({left: 0}, speed,easing);
 +
$bg.stop().animate({left: 585}, speed,easing);
 +
} else {
 +
$outer_container.stop().animate({left: -710}, speed,easing);
 +
$bg.stop().animate({left: 0}, speed,easing,function(){$("#arrow_indicator").fadeTo("fast",1);});
 +
}
 +
}
 +
 
 +
//Image scale function
 +
function FullScreenBackground(theItem){
 +
var winWidth=$(window).width();
 +
var winHeight=$(window).height();
 +
var imageWidth=$(theItem).width();
 +
var imageHeight=$(theItem).height();
 +
if($toolbar.data("imageViewMode")!="original"){ //scale
 +
$(theItem).removeClass("with_border").removeClass("with_shadow"); //remove extra styles of orininal view mode
 +
var picHeight = imageHeight / imageWidth;
 +
var picWidth = imageWidth / imageHeight;
 +
if($toolbar.data("imageViewMode")!="fit"){ //image view mode: full
 +
if ((winHeight / winWidth) < picHeight) {
 +
$(theItem).css("width",winWidth).css("height",picHeight*winWidth);
 +
} else {
 +
$(theItem).css("height",winHeight).css("width",picWidth*winHeight);
 +
};
 +
} else { //image view mode: fit
 +
if ((winHeight / winWidth) > picHeight) {
 +
$(theItem).css("width",winWidth).css("height",picHeight*winWidth);
 +
} else {
 +
$(theItem).css("height",winHeight).css("width",picWidth*winHeight);
 +
};
 +
}
 +
//center it
 +
$(theItem).css("margin-left",((winWidth - $(theItem).width())/2)).css("margin-top",((winHeight - $(theItem).height())/2));
 +
} else { //no scale
 +
//add extra styles for orininal view mode
 +
$(theItem).addClass("with_border").addClass("with_shadow");
 +
//set original dimensions
 +
$(theItem).css("width",$bg.data("originalImageWidth")).css("height",$bg.data("originalImageHeight"));
 +
//center it
 +
$(theItem).css("margin-left",((winWidth-$(theItem).outerWidth())/2)).css("margin-top",((winHeight-$(theItem).outerHeight())/2));
 +
}
 +
}
 +
 
 +
//image view mode function - full or fit
 +
function ImageViewMode(theMode){
 +
$toolbar.data("imageViewMode", theMode); //store new mode
 +
FullScreenBackground($bgimg); //scale bg image
 +
//re-style button
 +
if(theMode=="full"){
 +
$toolbar.html("<span class='lightgrey'>IMAGE VIEW MODE &rsaquo;</span> FULL");
 +
} else if(theMode=="fit") {
 +
$toolbar.html("<span class='lightgrey'>IMAGE VIEW MODE &rsaquo;</span> FIT");
 +
} else {
 +
$toolbar.html("<span class='lightgrey'>IMAGE VIEW MODE &rsaquo;</span> ORIGINAL");
 +
}
 +
}
 +
 
 +
//preload script images
 +
var images=["http://www.persoft.mx/biosint/ajax-loader_dark.gif","http://www.persoft.mx/biosint/round_custom_scrollbar_bg_over.png"];
 +
$.each(images, function(i) {
 +
  images[i] = new Image();
 +
  images[i].src = this;
 +
});
 +
</script>
 +
</body>
 +
</html>

Latest revision as of 16:48, 27 October 2012

SIDEWAYS jQuery fullscreen image gallery

BIOSINT

CREATIVE PROCESS

Here is our story...

LOADING...
Click for next image

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:BIOSINT_Mexico/Gallerie"