Team:SUSTC-Shenzhen-A DengLuo index

From 2012.igem.org

(Difference between revisions)
Line 545: Line 545:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.templatemo.com/templates/templatemo_195_scene/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.templatemo.com/templates/templatemo_195_scene/js/jquery.easing.1.3.js"></script>
-
<script type="text/javascript" src="http://www.templatemo.com/templates/templatemo_195_scene/js/jquery.ennui.contentslider.js"></script>
+
 
 +
 
 +
<script type="text/javascript" >
 +
 
 +
(function($) {
 +
  $.fn.ContentSlider = function(options)
 +
  {
 +
    var defaults = {
 +
      leftBtn : 'images/templatemo_left_nav.png',
 +
      rightBtn : 'images/templatemo_right_nav.png',
 +
      width : '535px',
 +
      height : '233px',
 +
      speed : 400,
 +
      easing : 'easeOutExpo',
 +
      textResize : false,
 +
      IE_h2 : '26px',
 +
      IE_p : '11px'
 +
    }
 +
    var defaultWidth = defaults.width;
 +
    var o = $.extend(defaults, options);
 +
    var w = parseInt(o.width);
 +
    var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
 +
    var x = -1*w*n+w; // Minimum left value
 +
    var p = parseInt(o.width)/parseInt(defaultWidth);
 +
    var thisInstance = this.attr('id');
 +
    var inuse = false; // Prevents colliding animations
 +
 
 +
    function moveSlider(d, b)
 +
    {
 +
      var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
 +
      if(isNaN(l)) {
 +
        var l = 0;
 +
      }
 +
      var m = (d=='left') ? l-w : l+w;
 +
      if(m<=0&&m>=x) {
 +
        b
 +
          .siblings('.cs_wrapper')
 +
            .children('.cs_slider')
 +
              .animate({ 'left':m+'px' }, o.speed, o.easing, function() {
 +
                inuse=false;
 +
              });
 +
 
 +
        if(b.attr('class')=='cs_leftBtn') {
 +
          var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
 +
          var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
 +
        } else {
 +
          var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
 +
          var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
 +
        }
 +
        if(m==0||m==x) {
 +
          thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); });
 +
        }
 +
        if(otherBtn.css('opacity')=='0') {
 +
          otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
 +
        }
 +
      }
 +
    }
 +
 
 +
    function vCenterBtns(b)
 +
    {
 +
      // Safari and IE don't seem to like the CSS used to vertically center
 +
      // the buttons, so we'll force it with this function
 +
      var mid = parseInt(o.height)/0 ;
 +
      b
 +
        .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end()
 +
        .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 });
 +
    }
 +
 
 +
    return this.each(function() {
 +
      $(this)
 +
        // Set the width and height of the div to the defined size
 +
        .css({
 +
          width:o.width,
 +
          height:o.height
 +
        })
 +
        // Add the buttons to move left and right
 +
        .prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>')
 +
        .append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>')
 +
        // Dig down to the article div elements
 +
        .find('.cs_article')
 +
          // Set the width and height of the div to the defined size
 +
          .css({
 +
            width:o.width,
 +
            height:o.height
 +
          })
 +
          .end()
 +
        // Animate the entrance of the buttons
 +
        .find('.cs_leftBtn')
 +
          .css('opacity','0')
 +
          .hide()
 +
          .end()
 +
        .find('.cs_rightBtn')
 +
          .hide()
 +
          .animate({ 'width':'show' });
 +
 
 +
      // Resize the font to match the bounding box
 +
      if(o.textResize===true) {
 +
        var h2FontSize = $(this).find('h2').css('font-size');
 +
        var pFontSize = $(this).find('p').css('font-size');
 +
        $.each(jQuery.browser, function(i) {
 +
          if($.browser.msie) {
 +
            h2FontSize = o.IE_h2;
 +
            pFontSize = o.IE_p;
 +
          }
 +
        });
 +
        $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' });
 +
        $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
 +
        $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
 +
      }
 +
 
 +
      // Store a copy of the button in a variable to pass to moveSlider()
 +
      var leftBtn = $(this).children('.cs_leftBtn');
 +
      leftBtn.bind('click', function() {
 +
        if(inuse===false) {
 +
          inuse = true;
 +
          moveSlider('right', leftBtn);
 +
        }
 +
        return false; // Keep the link from firing
 +
      });
 +
 
 +
      // Store a copy of the button in a variable to pass to moveSlider()
 +
      var rightBtn = $(this).children('.cs_rightBtn');
 +
      rightBtn.bind('click', function() {
 +
        if(inuse===false) {
 +
          inuse=true;
 +
          moveSlider('left', rightBtn);
 +
        }
 +
        return false; // Keep the link from firing
 +
      });
 +
 
 +
      vCenterBtns($(this)); // This is a CSS fix function.
 +
    });
 +
  }
 +
})(jQuery)
 +
 
 +
 
 +
 
 +
</script>
 +
 
 +
 
 +
 
<script type="text/javascript">
<script type="text/javascript">
$(function() {
$(function() {

Revision as of 14:10, 8 September 2012

************************

Retrieved from "http://2012.igem.org/Team:SUSTC-Shenzhen-A_DengLuo_index"