Template:Team:Calgary/Test

From 2013.igem.org

(Difference between revisions)
Line 33: Line 33:
<link href="https://2013.igem.org/Team:Calgary/TestPageCSS?action=raw&ctype=text/css" rel="stylesheet">
<link href="https://2013.igem.org/Team:Calgary/TestPageCSS?action=raw&ctype=text/css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 +
<script>
 +
/*! Superslides - v0.6.1 - 2013-07-09
 +
* https://github.com/nicinabox/superslides
 +
* Copyright (c) 2013 Nic Aitch; Licensed MIT */
 +
(function(window, $) {
 +
 +
var Superslides, plugin = 'superslides';
 +
 +
Superslides = function(el, options) {
 +
  this.options = $.extend({
 +
    play: false,
 +
    animation_speed: 600,
 +
    animation_easing: 'swing',
 +
    animation: 'slide',
 +
    inherit_width_from: window,
 +
    inherit_height_from: window,
 +
    pagination: true,
 +
    hashchange: false,
 +
    scrollable: true,
 +
    elements: {
 +
      preserve: '.preserve',
 +
      nav: '.slides-navigation',
 +
      container: '.slides-container',
 +
      pagination: '.slides-pagination'
 +
    }
 +
  }, options);
 +
 +
  var that      = this,
 +
      $control  = $('<div>', { "class": 'slides-control' }),
 +
      multiplier = 1;
 +
 +
  this.$el        = $(el);
 +
  this.$container = this.$el.find(this.options.elements.container);
 +
 +
  // Private Methods
 +
  var initialize = function() {
 +
    multiplier = that._findMultiplier();
 +
 +
    that.$el.on('click', that.options.elements.nav + " a", function(e) {
 +
      e.preventDefault();
 +
 +
      that.stop();
 +
      if ($(this).hasClass('next')) {
 +
        that.animate('next', function() {
 +
          that.start();
 +
        });
 +
      } else {
 +
        that.animate('prev', function() {
 +
          that.start();
 +
        });
 +
      }
 +
    });
 +
 +
    $(document).on('keyup', function(e) {
 +
      if (e.keyCode === 37) {
 +
        that.animate('prev');
 +
      }
 +
      if (e.keyCode === 39) {
 +
        that.animate('next');
 +
      }
 +
    });
 +
 +
    $(window).on('resize', function() {
 +
      setTimeout(function() {
 +
        var $children = that.$container.children();
 +
 +
        that.width  = that._findWidth();
 +
        that.height = (that._findHeight() - $('#TopBar').height()) * .8;
 +
 +
        $children.css({
 +
          width: that.width,
 +
          left: that.width
 +
        });
 +
 +
        that.css.containers();
 +
        that.css.images();
 +
      }, 10);
 +
    });
 +
 +
    $(window).on('hashchange', function() {
 +
      var hash = that._parseHash(), index;
 +
 +
      if (hash) {
 +
        if (!isNaN(hash)) {
 +
// Minus 1 here because we don't want the url
 +
        // to be zero-indexed
 +
        index = that._upcomingSlide(hash - 1);
 +
}
 +
      } else {
 +
        index = that._upcomingSlide(hash);
 +
      }
 +
 +
      if (index >= 0) {
 +
if (index !== that.current) {
 +
that.animate(index);
 +
}
 +
      }
 +
    });
 +
 +
    that.pagination._events();
 +
 +
    that.start();
 +
    return that;
 +
  };
 +
 +
var css = {
 +
  containers: function() {
 +
    if (that.init) {
 +
      that.$el.css({
 +
        height: that.height
 +
      });
 +
 +
      that.$control.css({
 +
        width: that.width * multiplier,
 +
        left: -that.width
 +
      });
 +
 +
      that.$container.css({
 +
 +
      });
 +
    } else {
 +
      $('body').css({
 +
        margin: 0
 +
      });
 +
 +
      that.$el.css({
 +
        position: 'relative',
 +
        overflow: 'hidden',
 +
        width: '100%',
 +
        height: that.height
 +
      });
 +
 +
      that.$control.css({
 +
        position: 'relative',
 +
        transform: 'translate3d(0)',
 +
        height: '100%',
 +
        width: that.width * multiplier,
 +
        left: -that.width
 +
      });
 +
 +
      that.$container.css({
 +
        display: 'none',
 +
        margin: '0',
 +
        padding: '0',
 +
        listStyle: 'none',
 +
        position: 'relative',
 +
        height: '100%'
 +
      });
 +
    }
 +
 +
    if (that.size() === 1) {
 +
      that.$el.find(that.options.elements.nav).hide();
 +
    }
 +
  },
 +
  images: function() {
 +
    var $images = that.$container.find('img')
 +
                                .not(that.options.elements.preserve)
 +
 +
    $images.removeAttr('width').removeAttr('height')
 +
      .css({
 +
        "-webkit-backface-visibility": 'hidden',
 +
        "-ms-interpolation-mode": 'bicubic',
 +
        "position": 'absolute',
 +
        "left": '0',
 +
        "top": '0',
 +
        "z-index": '-1',
 +
        "max-width": 'none'
 +
      });
 +
 +
    $images.each(function() {
 +
      var image_aspect_ratio = that.image._aspectRatio(this),
 +
          image = this;
 +
 +
      if (!$.data(this, 'processed')) {
 +
        var img = new Image();
 +
        img.onload = function() {
 +
          that.image._scale(image, image_aspect_ratio);
 +
          that.image._center(image, image_aspect_ratio);
 +
          $.data(image, 'processed', true);
 +
        };
 +
        img.src = this.src;
 +
 +
      } else {
 +
        that.image._scale(image, image_aspect_ratio);
 +
        that.image._center(image, image_aspect_ratio);
 +
      }
 +
    });
 +
  },
 +
  children: function() {
 +
    var $children = that.$container.children();
 +
 +
    if ($children.is('img')) {
 +
      $children.each(function() {
 +
        if ($(this).is('img')) {
 +
          $(this).wrap('<div>');
 +
 +
          // move id attribute
 +
          var id = $(this).attr('id');
 +
          $(this).removeAttr('id');
 +
          $(this).parent().attr('id', id);
 +
        }
 +
      });
 +
 +
      $children = that.$container.children();
 +
    }
 +
 +
    if (!that.init) {
 +
      $children.css({
 +
        display: 'none',
 +
        left: that.width * 2
 +
      });
 +
    }
 +
 +
    $children.css({
 +
      position: 'absolute',
 +
      overflow: 'hidden',
 +
      height: '100%',
 +
      width: that.width,
 +
      top: 0,
 +
      zIndex: 0
 +
    });
 +
 +
  }
 +
}
 +
 +
var fx = {
 +
  slide: function(orientation, complete) {
 +
    var $children = that.$container.children(),
 +
        $target  = $children.eq(orientation.upcoming_slide);
 +
 +
    $target.css({
 +
      left: orientation.upcoming_position,
 +
      display: 'block'
 +
    });
 +
 +
    that.$control.animate({
 +
      left: orientation.offset
 +
    },
 +
    that.options.animation_speed,
 +
    that.options.animation_easing,
 +
    function() {
 +
      if (that.size() > 1) {
 +
        that.$control.css({
 +
          left: -that.width
 +
        });
 +
 +
        $children.eq(orientation.upcoming_slide).css({
 +
          left: that.width,
 +
          zIndex: 2
 +
        });
 +
 +
        if (orientation.outgoing_slide >= 0) {
 +
          $children.eq(orientation.outgoing_slide).css({
 +
            left: that.width,
 +
            display: 'none',
 +
            zIndex: 0
 +
          });
 +
        }
 +
      }
 +
 +
      complete();
 +
    });
 +
  },
 +
  fade: function(orientation, complete) {
 +
    var that = this,
 +
        $children = that.$container.children(),
 +
        $outgoing = $children.eq(orientation.outgoing_slide),
 +
        $target = $children.eq(orientation.upcoming_slide);
 +
 +
    $target.css({
 +
      left: this.width,
 +
      opacity: 1,
 +
      display: 'block'
 +
    });
 +
 +
    if (orientation.outgoing_slide >= 0) {
 +
      $outgoing.animate({
 +
        opacity: 0
 +
      },
 +
      that.options.animation_speed,
 +
      that.options.animation_easing,
 +
      function() {
 +
        if (that.size() > 1) {
 +
          $children.eq(orientation.upcoming_slide).css({
 +
            zIndex: 2
 +
          });
 +
 +
          if (orientation.outgoing_slide >= 0) {
 +
            $children.eq(orientation.outgoing_slide).css({
 +
              opacity: 1,
 +
              display: 'none',
 +
              zIndex: 0
 +
            });
 +
          }
 +
        }
 +
 +
        complete();
 +
      });
 +
    } else {
 +
      $target.css({
 +
        zIndex: 2
 +
      });
 +
      complete();
 +
    }
 +
  }
 +
};
 +
 +
fx = $.extend(fx, $.fn.superslides.fx);
 +
 +
var image = {
 +
  _centerY: function(image) {
 +
    var $img = $(image);
 +
 +
    $img.css({
 +
      top: (that.height - $img.height()) / 2
 +
    });
 +
  },
 +
  _centerX: function(image) {
 +
    var $img = $(image);
 +
 +
    $img.css({
 +
      left: (that.width - $img.width()) / 2
 +
    });
 +
  },
 +
  _center: function(image) {
 +
    that.image._centerX(image);
 +
    that.image._centerY(image);
 +
  },
 +
  _aspectRatio: function(image) {
 +
    if (!image.naturalHeight) {
 +
  if (!image.naturalWidth) {
 +
  var img = new Image();
 +
  img.src = image.src;
 +
  image.naturalHeight = img.height;
 +
  image.naturalWidth = img.width;
 +
  }
 +
    }
 +
 +
    return image.naturalHeight / image.naturalWidth;
 +
  },
 +
  _scale: function(image, image_aspect_ratio) {
 +
    image_aspect_ratio = image_aspect_ratio || that.image._aspectRatio(image);
 +
 +
    var container_aspect_ratio = that.height / that.width,
 +
        $img = $(image);
 +
 +
    if (container_aspect_ratio > image_aspect_ratio) {
 +
      $img.css({
 +
        height: that.height,
 +
        width: that.height / image_aspect_ratio
 +
      });
 +
 +
    } else {
 +
      $img.css({
 +
        height: that.width * image_aspect_ratio,
 +
        width: that.width
 +
      });
 +
    }
 +
  }
 +
};
 +
 +
var pagination = {
 +
  _setCurrent: function(i) {
 +
    if (!that.$pagination) { return; }
 +
 +
    var $pagination_children = that.$pagination.children();
 +
 +
    $pagination_children.removeClass('current');
 +
    $pagination_children.eq(i)
 +
      .addClass('current');
 +
  },
 +
  _addItem: function(i) {
 +
    var slide_number = i + 1,
 +
        href = slide_number,
 +
        $slide = that.$container.children().eq(i),
 +
        slide_id = $slide.attr('id');
 +
 +
    if (slide_id) {
 +
      href = slide_id;
 +
    }
 +
 +
    var $item = $("<a>", {
 +
      'href': "#" + href,
 +
      'text': href
 +
    });
 +
 +
    $item.appendTo(that.$pagination);
 +
  },
 +
  _setup: function() {
 +
    if (!that.options.pagination || that.size() === 1) { return; }
 +
 +
    var $pagination = $("<nav>", {
 +
      'class': that.options.elements.pagination.replace(/^\./, '')
 +
    });
 +
 +
    that.$pagination = $pagination.appendTo(that.$el);
 +
 +
    for (var i = 0; i < that.size(); i++) {
 +
      that.pagination._addItem(i);
 +
    }
 +
  },
 +
  _events: function() {
 +
    that.$el.on('click', that.options.elements.pagination + ' a', function(e) {
 +
      e.preventDefault();
 +
 +
      var hash  = that._parseHash(this.hash),
 +
          index = that._upcomingSlide(hash - 1);
 +
 +
      if (index !== that.current) {
 +
        that.animate(index);
 +
      }
 +
    });
 +
  }
 +
};
 +
 +
  this.css = css;
 +
  this.image = image;
 +
  this.pagination = pagination;
 +
  this.fx = fx;
 +
  this.animation = this.fx[this.options.animation];
 +
 +
  this.$control = this.$container.wrap($control).parent('.slides-control');
 +
 +
  that._findPositions();
 +
  that.width  = that._findWidth();
 +
  that.height = (that._findHeight() - $('#TopBar').height()) * .8;
 +
 +
  this.css.children();
 +
  this.css.containers();
 +
  this.css.images();
 +
  this.pagination._setup();
 +
 +
  return initialize();
 +
};
 +
 +
Superslides.prototype = {
 +
  _findWidth: function() {
 +
    return $(this.options.inherit_width_from).width();
 +
  },
 +
  _findHeight: function() {
 +
    return $(this.options.inherit_width_from).height();
 +
  },
 +
 +
  _findMultiplier: function() {
 +
    return this.size() === 1 ? 1 : 3;
 +
  },
 +
 +
  _upcomingSlide: function(direction) {
 +
    if ((/next/).test(direction)) {
 +
      return this._nextInDom();
 +
 +
    } else if ((/prev/).test(direction)) {
 +
      return this._prevInDom();
 +
 +
    } else if ((/\d/).test(direction)) {
 +
      return +direction;
 +
 +
    } else if (direction) {
 +
  if ((/\w/).test(direction)) {
 +
      var index = this._findSlideById(direction);
 +
      if (index >= 0) {
 +
        return index;
 +
      } else {
 +
        return 0;
 +
      }
 +
 +
    } else {
 +
      return 0;
 +
    }
 +
}
 +
  },
 +
 +
  _findSlideById: function(id) {
 +
    return this.$container.find('#' + id).index();
 +
  },
 +
 +
  _findPositions: function(current, thisRef) {
 +
    thisRef = thisRef || this;
 +
 +
    if (current === undefined) {
 +
      current = -1;
 +
    }
 +
 +
    thisRef.current = current;
 +
    thisRef.next    = thisRef._nextInDom();
 +
    thisRef.prev    = thisRef._prevInDom();
 +
  },
 +
 +
  _nextInDom: function() {
 +
    var index = this.current + 1;
 +
 +
    if (index === this.size()) {
 +
      index = 0;
 +
    }
 +
 +
    return index;
 +
  },
 +
 +
  _prevInDom: function() {
 +
    var index = this.current - 1;
 +
 +
    if (index < 0) {
 +
      index = this.size() - 1;
 +
    }
 +
 +
    return index;
 +
  },
 +
 +
  _parseHash: function(hash) {
 +
    hash = hash || window.location.hash;
 +
    hash = hash.replace(/^#/, '');
 +
 +
    if (hash) {
 +
      if (!isNaN(+hash)) {
 +
  hash = +hash;
 +
  }
 +
    }
 +
 +
    return hash;
 +
  },
 +
 +
  size: function() {
 +
    return this.$container.children().length;
 +
  },
 +
 +
  destroy: function() {
 +
    return this.$el.removeData();
 +
  },
 +
 +
  update: function() {
 +
    this.css.children();
 +
    this.css.containers();
 +
    this.css.images();
 +
 +
    this.pagination._addItem(this.size())
 +
 +
    this._findPositions(this.current);
 +
    this.$el.trigger('updated.slides');
 +
  },
 +
 +
  stop: function() {
 +
    clearInterval(this.play_id);
 +
    delete this.play_id;
 +
 +
    this.$el.trigger('stopped.slides');
 +
  },
 +
 +
  start: function() {
 +
    var that = this;
 +
 +
    if (that.options.hashchange) {
 +
      $(window).trigger('hashchange');
 +
    } else {
 +
      this.animate();
 +
    }
 +
 +
    if (this.options.play) {
 +
      if (this.play_id) {
 +
        this.stop();
 +
      }
 +
 +
      this.play_id = setInterval(function() {
 +
        that.animate();
 +
      }, this.options.play);
 +
    }
 +
 +
    this.$el.trigger('started.slides');
 +
  },
 +
 +
  animate: function(direction, userCallback) {
 +
    var that = this,
 +
        orientation = {};
 +
 +
    if (this.animating) {
 +
      return;
 +
    }
 +
 +
    this.animating = true;
 +
 +
    if (direction === undefined) {
 +
      direction = 'next';
 +
    }
 +
 +
    orientation.upcoming_slide = this._upcomingSlide(direction);
 +
 +
    if (orientation.upcoming_slide >= this.size()) {
 +
      return;
 +
    }
 +
 +
    orientation.outgoing_slide    = this.current;
 +
    orientation.upcoming_position = this.width * 2;
 +
    orientation.offset            = -orientation.upcoming_position;
 +
 +
    if (direction === 'prev' || direction < orientation.outgoing_slide) {
 +
      orientation.upcoming_position = 0;
 +
      orientation.offset            = 0;
 +
    }
 +
 +
    if (that.size() > 1) {
 +
      that.pagination._setCurrent(orientation.upcoming_slide);
 +
    }
 +
 +
    if (that.options.hashchange) {
 +
      var hash = orientation.upcoming_slide + 1,
 +
          id = that.$container.children(':eq(' + orientation.upcoming_slide + ')').attr('id');
 +
 +
      if (id) {
 +
        window.location.hash = id;
 +
      } else {
 +
        window.location.hash = hash;
 +
      }
 +
    }
 +
 +
    that.$el.trigger('animating.slides', [orientation]);
 +
 +
    that.animation(orientation, function() {
 +
      that._findPositions(orientation.upcoming_slide, that);
 +
 +
      if (typeof userCallback === 'function') {
 +
        userCallback();
 +
      }
 +
 +
      that.animating = false;
 +
      that.$el.trigger('animated.slides');
 +
 +
      if (!that.init) {
 +
        that.$el.trigger('init.slides');
 +
        that.init = true;
 +
        that.$container.fadeIn('fast');
 +
      }
 +
    });
 +
  }
 +
};
 +
 +
// jQuery plugin definition
 +
 +
$.fn[plugin] = function(option, args) {
 +
  var result = [];
 +
 +
  this.each(function() {
 +
    var $this, data, options;
 +
 +
    $this = $(this);
 +
    data = $this.data(plugin);
 +
    options = typeof option === 'object' && option;
 +
 +
    if (!data) {
 +
      result = $this.data(plugin, (data = new Superslides(this, options)));
 +
    }
 +
 +
    if (typeof option === "string") {
 +
      result = data[option];
 +
      if (typeof result === 'function') {
 +
        return result = result.call(data, args);
 +
      }
 +
    }
 +
  });
 +
 +
  return result;
 +
};
 +
 +
$.fn[plugin].fx = {};
 +
 +
})(this, jQuery);
 +
</script>
<script>
<script>
$(document).ready(function() {
$(document).ready(function() {

Revision as of 17:24, 14 August 2013

Home

Retrieved from "http://2013.igem.org/Template:Team:Calgary/Test"