Team:UC Davis/Notebook/Gallery

From 2012.igem.org

(Difference between revisions)
(Created page with "<!--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" xml:lang=...")
Line 85: Line 85:
<script type="text/javascript">
<script type="text/javascript">
function slider() {
function slider() {
 +
    var max_slide = 10;
     var $current = $('#slides IMG.current');
     var $current = $('#slides IMG.current');
-
 
+
    $('.backward').css({opacity:0.0});
     if ( $current.length == 0 ) $current = $('#slides IMG:last');
     if ( $current.length == 0 ) $current = $('#slides IMG:last');
-
    var $next =  $current.next().length ? $current.next()
 
-
        : $('#slides IMG:first');
 
-
 
-
      $current.addClass('previous');
 
-
    $next.css({opacity: 0.0})
 
-
        .addClass('current')
 
-
        .animate({opacity: 1.0}, 2500, function() {
 
-
            $current.removeClass('current previous');
 
-
        });
 
-
 
-
var $navicurrent = $('.progress li.current');
 
-
if($navicurrent.length ==0) $navicurrent = $('.progress li:last');
 
-
var $navinext = $navicurrent.next().length ? $navicurrent.next() : $('.progress li:first');
 
-
$navicurrent.addClass('previous');
 
-
$navicurrent.removeClass('current previous');
 
-
$navinext.addClass('current').animate({opacity: 1.0}, 2500, function() {
 
-
        });
 
  $('.progress li').click(function(){
  $('.progress li').click(function(){
-
   
 
  var $ncurrent = $(this);
  var $ncurrent = $(this);
         $('.progress li').removeClass('current').removeClass('previous');
         $('.progress li').removeClass('current').removeClass('previous');
Line 113: Line 96:
         $ncurrent.addClass('current');
         $ncurrent.addClass('current');
         var ncurrentindex = $ncurrent.index();
         var ncurrentindex = $ncurrent.index();
-
if(  ncurrentindex=== 0) $current = $('#slides IMG:first');
+
$current = $('#slides IMG:eq('+ncurrentindex+')');
-
        if(  ncurrentindex=== 1) $current = $('#slides IMG:eq(1)');
+
-
        if(  ncurrentindex=== 2) $current = $('#slides IMG:eq(2)');
+
-
        if(  ncurrentindex=== 3) $current = $('#slides IMG:last');
+
         $current.addClass('current');
         $current.addClass('current');
 +
        if(ncurrentindex===0) $('.backward').css({opacity:0.0});
 +
        if(ncurrentindex>0) $('.backward').css({opacity:0.7});
 +
        if(ncurrentindex===max_slide-1) $('.forward').css({opacity:0.0});
 +
        if(ncurrentindex<max_slide-1) $('.forward').css({opacity:0.7});
 +
        console.log(' progress clicked ncurrentindex:',ncurrentindex);
 +
});
 +
$('.forward img').click(function(){
 +
        var $current = $('#slides IMG.current');
 +
        if ( $current.length == 0 ) $current = $('#slides IMG:last');
 +
        var $next =  $current.next().length ? $current.next() :  $('#slides IMG:first');
 +
        $current.addClass('previous');
 +
        $current.removeClass('current previous');
 +
        $next.addClass('current');
 +
        var fcount = $next.index();
 +
        $('.progress li').removeClass('current')
 +
        $('.progress li:eq('+fcount+')').addClass('current');
 +
        console.log('forward clicked',fcount);
 +
        if(fcount===0) $('.backward').css({opacity:0.0});
 +
        if(fcount>=1) $('.backward').css({opacity:0.7});
 +
        if(fcount===max_slide-1) $('.forward').css({opacity:0.0});
 +
        if(fcount<max_slide-1) $('.forward').css({opacity:0.7});
 +
       
});
});
 +
$('.backward img').click(function(){
 +
        var $current = $('#slides IMG.current');
 +
        if ( $current.length == 0 ) $current = $('#slides IMG:first');
 +
        var $next =  $current.prev().length ? $current.prev() :  $('#slides IMG:last');
 +
        $current.addClass('previous');
 +
        $current.removeClass('current previous');
 +
        $next.addClass('current');       
 +
        var fcount = $next.index();
 +
        $('.progress li').removeClass('current')
 +
        $('.progress li:eq('+fcount+')').addClass('current');   
 +
console.log('backward clicked',fcount);
 +
        if(fcount===0) $('.backward').css({opacity:0.0});
 +
        if(fcount>=1) $('.backward').css({opacity:0.7});
 +
        if(fcount===max_slide-1) $('.forward').css({opacity:0.0});
 +
        if(fcount<max_slide-1) $('.forward').css({opacity:0.7});
 +
 +
});
}
}
-
$(function() {
+
 
-
    setInterval( "slider()", 5000 );
+
$(function(){
 +
slider();
});
});
Line 177: Line 197:
     });
     });
}
}
-
 
</script>
</script>
Line 368: Line 387:
#slides {
#slides {
     position:relative;
     position:relative;
-
     height:280px;
+
     height:400px;
     width: 840px
     width: 840px
      
      
Line 392: Line 411:
.progress {
.progress {
-
margin-top:-270px;
+
margin-top:-390px;
margin-left:20px;
margin-left:20px;
position:absolute;
position:absolute;
Line 414: Line 433:
}
}
-
.progress li a:hover {
+
.progress li a:hover {
text-decoration:none;
text-decoration:none;
}
}
Line 420: Line 439:
.progress .current {
.progress .current {
background-color:white;
background-color:white;
 +
}
 +
 +
.forward {
 +
position:absolute;
 +
margin-top: -220px;
 +
margin-left: 570px;
 +
z-index:11;
 +
}
 +
 +
.backward {
 +
position:absolute;
 +
margin-top:-220px;
 +
margin-left:4px;
 +
z-index:11;
}
}
Line 1,115: Line 1,148:
<div id="myleftbox"  class="smallbox">
<div id="myleftbox"  class="smallbox">
-
<article>
+
<div id="slides">
-
 
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-1.jpg" style="width:605px; height:400px;" class="current">
-
<center>
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-2.jpg" style="width:605px; height:400px;"  />
-
 
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-3.jpg" style="width:605px; height:400px;" />
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-1.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-1.jpg" hspace=3.5 vspace=5></a>
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-4.jpg" style="width:605px; height:400px;" />
-
 
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-5.jpg" style="width:605px; height:400px;" />
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-2.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-2.jpg" hspace=3.5 vspace=5></a>
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-6.jpg" style="width:605px; height:400px;" />  
-
 
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-26.jpg" style="width:605px; height:400px;"  />
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-3.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-3.jpg" hspace=3.5 vspace=5></a>
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-17.jpg" style="width:605px; height:400px;" />
-
 
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-12.jpg" style="width:605px; height:400px;"  />  
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-4.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-4.jpg" hspace=3.5 vspace=5></a>
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-14.jpg" style="width:605px; height:400px;" />  
-
 
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-13.jpg" style="width:605px; height:400px;" />  
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-5.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-5.jpg" hspace=3.5 vspace=5></a>
+
        <img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-22.jpg" style="width:605px;height:400px;" />
-
 
+
</div>
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-6.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-6.jpg" hspace=3.5 vspace=5></a>
+
-
 
+
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-7.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-7.jpg" hspace=3.5 vspace=5></a>
+
-
 
+
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-8.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-8.jpg" hspace=3.5 vspace=5></a>
+
-
 
+
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-9.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-9.jpg" hspace=3.5 vspace=5></a>
+
-
 
+
-
<a href="http://img.photobucket.com/albums/v26/bluemelon/gallery_large-10.jpg" class="lightbox"><img src="http://img.photobucket.com/albums/v26/bluemelon/gallery_small-10.jpg" hspace=3.5 vspace=5></a>
+
-
 
+
-
</center>
+
 +
    <ul class="progress">
 +
<li class="current"><a href="#n_0">1</a> </li>
 +
<li><a href="#n_1">2</a> </li>
 +
        <li><a href="#n_2">3</a> </li>
 +
        <li><a href="#n_3">4</a> </li>
 +
        <li><a href="#n_1">5</a> </li>
 +
        <li><a href="#n_2">6</a> </li>
 +
        <li><a href="#n_3">7</a> </li>
 +
        <li><a href="#n_1">8</a> </li>
 +
        <li><a href="#n_2">9</a> </li>
 +
        <li><a href="#n_3">10</a> </li>
 +
        <li><a href="#n_3">11</a> </li>
 +
        <li><a href="#n_3">12</a> </li>
 +
        <li><a href="#n_3">13</a> </li>
 +
        <li><a href="#n_3">14</a> </li>
 +
        <li><a href="#n_3">15</a> </li>
 +
    </ul>
 +
    <ul class="forward">
 +
    <img src="http://img.photobucket.com/albums/v26/bluemelon/big_arrow_right.png"/> 
 +
    </ul>
 +
    <ul class="backward">
 +
    <img src="http://img.photobucket.com/albums/v26/bluemelon/big_arrow_left.png"/> 
 +
    </ul>
-
</article>
 
</div>
</div>

Revision as of 22:34, 17 September 2012

Team:UC Davis - 2012.igem.org

UCDavis iGEM Tweets

Our Sponsors


Retrieved from "http://2012.igem.org/Team:UC_Davis/Notebook/Gallery"