Difference between revisions of "Team:BIT-China/gallery"

 
(40 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{BIT-China}}
 
{{BIT-China}}
 
<html>
 
<html>
−
<script>
+
<script src="http://wayou.github.io/SlipHover/js/jquery.sliphover.min.js"></script>
−
(function($, window, document, undefined) {
+
<style type="text/css">
 +
#container{
 +
width: 1200px;
 +
margin: 0 auto;
 +
                text-align:center;
 +
}
 +
#container img{
 +
margin:10px 10px 0px 0px;
 +
float: left;
 +
}
 +
#container div{
 +
width: 1190px;
 +
overflow: hidden;
 +
}
 +
#container ul li{
 +
list-style: none;
 +
}
 +
        .sliphover-container{
 +
                z-index:99;
 +
        }
 +
#menuContainer{
 +
top:0px;
 +
margin-top:0px;
 +
position:absolute;
 +
}
 +
#top_nav_bulge{
 +
top:110px;
 +
}
 +
</style>
  
−
     // Create the defaults once
+
     <div class="wrapper">
−
    var pluginName = "sliphover",
+
   
−
         defaults = {
+
         <!-- demo begin -->
−
             target: 'img', //the element that the overlay will attach to
+
        <div class="demo" id="container">
−
            caption: 'title', //the caption that will display when hover
+
             <ul>
−
            duration: 'fast', //specify how long the animation will lasts in milliseconds
+
                <li>
−
            fontColor: '#fff',
+
                <img style="width:1150px;margin-top:146px;" src="https://static.igem.org/mediawiki/2015/9/91/BIT_China_gallery_pic31.jpg"  title="We are BIT-China!"/>
−
            textAlign: 'center', //display the caption left, center or right
+
</li>
−
            verticalMiddle: true, //display the caption vertical middle or not
+
                <li>
−
            backgroundColor: 'rgba(0,0,0,.7)', //specify the background color and opacity using rgba
+
    <img style="height:215px;" src="https://static.igem.org/mediawiki/2015/f/f8/BIT_China_gallery_pic32.jpg" title="Our team"/>
−
            backgroundColorAttr: null, //specify the attribute with background color value and opacity using rgba
+
    </li>
−
            reverse: false, //reverse the direction
+
    <li>
−
            height: '100%', //specify the height of the overlay
+
    <img style="height:215px;width:365px;" src="https://static.igem.org/mediawiki/2015/3/38/BIT_China_gallery_pic34.jpg" title="pH Controller"/>
−
            withLink: true //if image is wraped with a link the overlay will be clickable, set false to disable click
+
    </li>
−
        };
+
    <li>
 +
    <img style="height:215px;" src="https://static.igem.org/mediawiki/2015/5/5b/BIT_China_gallery_pic33.jpg" title="Our team"/>
 +
    </li>
  
−
    function SlipHover(element, options) {
 
−
        this.element = element;
 
−
        this.settings = $.extend({}, defaults, options);
 
−
        this._defaults = defaults;
 
−
        this._name = pluginName;
 
−
        this.version = 'v2.0.5';
 
−
        this.init();
 
−
    }
 
  
−
    SlipHover.prototype = {
+
    <li>
−
        init: function() {
+
    <img style="width:382px;height:250px" src="https://static.igem.org/mediawiki/2015/d/dc/BIT_China_gallery_pic8.JPG" title="Jing Yang and Zeyan Li"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:250px" src="https://static.igem.org/mediawiki/2015/d/d3/BIT_China_gallery_pic9.JPG" title="Jinlin Li and Jiadong Zhong"/>
 +
    </li>
 +
    <li>
 +
    <img style="width:372px;height:250px;" src="https://static.igem.org/mediawiki/2015/f/fb/BIT_China_gallery_pic10.JPG" title="Our team"/>
 +
    </li>
  
−
            //disable on touch devices
 
−
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
 
−
                return;
 
−
            }
 
  
−
            var that = this,
+
<li>
−
                target = this.settings.target;
+
    <img style="height:268px" src="https://static.igem.org/mediawiki/2015/1/1a/BIT_China_gallery_pic19.jpg" title="Taipei 101"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:268px" src="https://static.igem.org/mediawiki/2015/a/a2/BIT_China_gallery_pic3.jpg" title="Jiadong Zhong"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:268px;width:474px;" src="https://static.igem.org/mediawiki/2015/5/51/BIT_China_gallery_pic27.jpg" title="The first version of our poster"/>
 +
    </li>
 +
   
  
−
            //create the overlay container each time the mouse enters
+
    <li>
−
            $(this.element).off('mouseenter.sliphover', target).on('mouseenter.sliphover', target, function(event) {
+
    <img style="height:264px;width:670px;" src="https://static.igem.org/mediawiki/2015/a/a2/BIT_China_gallery_pic28.jpg" title="Xin Zhou"/>
−
                //fix #9 https://github.com/wayou/SlipHover/issues/9
+
    </li>
−
                //use this instead of event.target for sometimes the event.target is not retriving the right target we want
+
    <li>
−
                //http://stackoverflow.com/questions/9838137/event-target-jquery-on-mousedown-up-is-not-giving-the-dom-specified-by-selecto
+
    <img style="height:264px;" src="https://static.igem.org/mediawiki/2015/d/d9/BIT_China_gallery_pic29.jpg" title="Zeyan Li"/>
−
                var $element = $(this),
+
    </li>
−
                    $overlayContainer = that.createContainer($element);
+
  
−
                $overlayContainer.off('mouseenter.sliphover mouseleave.sliphover').on('mouseenter.sliphover mouseleave.sliphover', function(event) {
 
−
                    //if (!$overlayContainer) return;
 
−
                    var direction = that.getDirection($(this), event);
 
  
−
                    //check if reverse option is on
+
    <li>
−
                    direction = that.settings.reverse ? direction = (direction + 2) % 4 : direction;
+
    <img style="height:366px;width:1149px;" src="https://static.igem.org/mediawiki/2015/8/81/BIT_China_gallery_pic21.jpg" title="We are BIT-China!"/>
 +
    </li>
 +
   
  
−
                    if (event.type === 'mouseenter') {
 
−
                        //check if the previous overlay still exists before we create it
 
−
                        var $overlay = $overlayContainer.find('.sliphover-overlay');
 
−
                        if (!$overlay.length) {
 
−
                            $overlay = that.createOverlay(that, direction, $element);
 
−
                            //put the overlay into the container
 
−
                            $(this).html($overlay);
 
−
                        }
 
−
                        that.slideIn(that, $overlay);
 
−
                    } else {
 
−
                        //slide out based on the direction
 
−
                        that.removeOverlay(that, $(this), direction);
 
−
                    }
 
−
                });
 
−
            });
 
−
        },
 
−
        createContainer: function($element) {
 
−
            //get the properties of the target
 
−
            var top = $element.offset().top,
 
−
                left = $element.offset().left,
 
−
                //border = parseFloat($element.css("border-left-width")),
 
−
                width = $element.outerWidth(),
 
−
                height = $element.outerHeight();
 
−
            zIndex = $element.css("z-index");
 
−
            var $overlayContainer = $('<div>', {
 
−
                class: 'sliphover-container'
 
−
            }).css({
 
−
                width: width,
 
−
                height: height,
 
−
                position: 'absolute',
 
−
                overflow: 'hidden',
 
−
                top: top,
 
−
                left: left,
 
−
                borderRadius: $element.css('border-radius'), //in case the target has a round border, this will make the overlay more nicer
 
−
                zIndex: zIndex == +zIndex ? (zIndex + 1) : 999 // if the z-index of the target is not number then use 999
 
−
            });
 
  
−
            $('body').append($overlayContainer);
+
    <li>
 +
    <img style="height:236px;" src="https://static.igem.org/mediawiki/2015/b/b2/BIT_China_gallery_pic20.jpg" title="Doing experments"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:236px;" src="https://static.igem.org/mediawiki/2015/8/81/BIT_China_gallery_pic4.jpg" title="KUANG"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:236px;" src="https://static.igem.org/mediawiki/2015/0/09/BIT_China_gallery_pic6.jpg" title="ZHUAI"/>
 +
    </li>
  
−
            return $overlayContainer;
 
−
        },
 
−
        createOverlay: function(instance, direction, $element) {
 
  
−
            var bottom, left, $overlay, $overlayColor, content, $targetAParent;
+
    <li>
 +
    <img style="height:239px;" src="https://static.igem.org/mediawiki/2015/f/f0/BIT_China_gallery_pic5.jpg" title="Chenyi Li's muscle"/>
 +
    </li>
 +
    <li>
 +
    <img style="width:362px;height:239px;" src="https://static.igem.org/mediawiki/2015/9/96/BIT_China_gallery_pic11.JPG" title="KU"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:239px;" src="https://static.igem.org/mediawiki/2015/0/0c/BIT_China_gallery_pic7.jpg" title="XUAN"/>
 +
    </li>
 +
   
  
−
            switch (direction) {
+
    <li>
−
                case 0:
+
    <img style="height:262px;" src="https://static.igem.org/mediawiki/2015/1/18/BIT_China_gallery_pic15.jpg" title="Changxin Zhang is looking at...?"/>
−
                    //from top
+
    </li>
−
                    left = 0;
+
    <li>
−
                    bottom = '100%';
+
    <img style="height:262px;width:558px;" src="https://static.igem.org/mediawiki/2015/4/4b/BIT_China_gallery_pic25.jpg" title="TUHAO's breakfast"/>
−
                    break;
+
    </li>
−
                case 1:
+
−
                    //from right
+
−
                    left = '100%';
+
−
                    bottom = 0;
+
−
                    break;
+
−
                case 2:
+
−
                    //from bottom
+
−
                    left = 0;
+
−
                    bottom = '-100%';
+
−
                    break;
+
−
                case 3:
+
−
                    //from left
+
−
                    left = '-100%';
+
−
                    bottom = 0;
+
−
                    break;
+
−
                default:
+
−
                    window.console.error('error when get direction of the mouse');
+
−
            };
+
  
−
            //if we want to display content vertical middle, we need to wrap the content into a div and set the style with display table-cell
 
−
            if (instance.settings.verticalMiddle) {
 
−
                content = $('<div>').css({
 
−
                    display: 'table-cell',
 
−
                    verticalAlign: 'middle'
 
−
                }).html($element.attr(instance.settings.caption));
 
−
            } else {
 
−
                content = $element.attr(instance.settings.caption);
 
−
            }
 
−
            $targetAParent = $element.parent('a');
 
−
            if ($targetAParent.length && instance.settings.withLink) {
 
−
                var url = $targetAParent.attr('href'),
 
−
                target=$targetAParent.attr('target');//fix issue#17
 
−
                $overlay = $('<a>', {
 
−
                    class: 'sliphover-overlay',
 
−
                    href: url || '#',
 
−
                    target: target||'_self'
 
−
                }).css({
 
−
                    textDecoration: 'none'
 
−
                });
 
−
            } else {
 
−
                $overlay = $('<div>', {
 
−
                    class: 'sliphover-overlay'
 
−
                });
 
−
            }
 
  
−
            $overlayColor = instance.settings.backgroundColorAttr ?
+
    <li>
−
              $element.attr(instance.settings.backgroundColorAttr) : instance.settings.backgroundColor;
+
    <img style="height:250px;" src="https://static.igem.org/mediawiki/2015/d/d6/BIT_China_gallery_pic12.JPG" title="Hui Luo"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:250px;" src="https://static.igem.org/mediawiki/2015/2/2b/BIT_China_gallery_pic13.JPG" title="Jinlin li and Jing Yang"/>
 +
    </li>
 +
    <li>
 +
    <img style="width:380px;height:250px;" src="https://static.igem.org/mediawiki/2015/6/67/BIT_China_gallery_pic14.JPG" title="We are Junior"/>
 +
    </li>
  
−
            $overlay.css({
+
<li>
−
                width: '100%',
+
    <img style="height:265px;" src="https://static.igem.org/mediawiki/2015/1/1c/BIT_China_gallery_pic16.jpg" title="We are BIT-China"/>
−
                height: instance.settings.height,
+
    </li>
−
                position: 'absolute',
+
    <li>
−
                left: left,
+
    <img style="height:265px;width:669px" src="https://static.igem.org/mediawiki/2015/f/f3/BIT_China_gallery_pic30.png" title="Pengcheng Zhang"/>
−
                bottom: bottom,
+
    </li>
−
                display: instance.settings.verticalMiddle ? 'table' : 'inline',
+
−
                textAlign: instance.settings.textAlign,
+
−
                color: instance.settings.fontColor,
+
−
                backgroundColor: $overlayColor
+
−
            })
+
−
                .html(content);
+
−
            return $overlay;
+
−
        },
+
−
        slideIn: function(instance, $overlay) {
+
−
            $overlay.stop().animate({
+
−
                left: 0,
+
−
                bottom: 0
+
−
            }, instance.settings.duration);
+
−
        },
+
−
        removeOverlay: function(instance, $overlayContainer, direction) {
+
−
            var finalState,
+
−
                $overlay = $overlayContainer.find('.sliphover-overlay');
+
  
−
            switch (direction) {
+
    <li>
−
                case 0: //to top
+
    <img style="height:250px;width:380px;" src="https://static.igem.org/mediawiki/2015/3/3a/BIT_China_gallery_pic2.jpg" title="this is a normal caption"/>
−
                    finalState = {
+
    </li>
−
                        bottom: '100%',
+
<li>
−
                        left: 0
+
    <img style="height:250px;" src="https://static.igem.org/mediawiki/2015/7/75/BIT_China_gallery_pic17.jpg" title="Taiwan"/>
−
                    };
+
    </li>
−
                    break;
+
    <li>
−
                case 1: //to right
+
    <img style="height:250px;" src="https://static.igem.org/mediawiki/2015/2/20/BIT_China_gallery_pic18.jpg" title="Weiming Lake"/>
−
                    finalState = {
+
    </li>
−
                        bottom: 0,
+
−
                        left: '100%'
+
<li>
−
                    };
+
    <img style="height:266px;" src="https://static.igem.org/mediawiki/2015/7/76/BIT_China_gallery_pic26.jpg" title="our team"/>
−
                    break;
+
    </li>
−
                case 2: //to bottom
+
    <li>
−
                    finalState = {
+
    <img style="height:266px;width:667px;" src="https://static.igem.org/mediawiki/2015/f/f7/BIT_China_gallery_pic22.jpg" title="Xiao Peng"/>
−
                        bottom: '-100%',
+
    </li>
−
                        left: 0
+
−
                    };
+
−
                    break;
+
−
                case 3: //to left
+
−
                    finalState = {
+
−
                        bottom: 0,
+
−
                        left: '-100%'
+
−
                    };
+
−
                    break;
+
−
                default:
+
−
                    window.console.error('error when get direction of the mouse');
+
−
            };
+
  
−
            //slide out
+
  <li>
−
            $overlay.stop().animate(finalState, instance.settings.duration, function() {
+
    <img style="height:215px;" src="https://static.igem.org/mediawiki/2015/e/e4/BIT_China_gallery_pic23.jpg" title="Xiao Peng ...You"/>
−
                $overlayContainer.remove();
+
    </li>
−
            });
+
    <li>
−
        },
+
    <img style="height:215px;" style="" src="https://static.igem.org/mediawiki/2015/1/1d/BIT_China_gallery_pic24.jpg" title="trip to taiwan"/>
−
        getDirection: function($target, event) {
+
    </li>
−
            //reference: http://stackoverflow.com/questions/3627042/jquery-animation-for-a-hover-with-mouse-direction
+
    <li>
−
            var w = $target.width(),
+
    <img style="height:215px;width:327px;" style="" src="https://static.igem.org/mediawiki/2015/4/47/BIT_China_gallery_pic1.jpg" title="Our team"/>
−
                h = $target.height(),
+
    </li>
−
                x = (event.pageX - $target.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
+
−
                y = (event.pageY - $target.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
+
−
                direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
+
−
            return direction;
+
−
        }
+
−
    };
+
  
−
    $.fn[pluginName] = function(options) {
 
−
        this.each(function() {
 
−
            if (!$.data(this, "plugin_" + pluginName)) {
 
−
                $.data(this, "plugin_" + pluginName, new SlipHover(this, options));
 
−
            }
 
−
        });
 
  
−
        // chain jQuery functions
+
<li>
−
        return this;
+
    <img style="width:1150px;" src="https://static.igem.org/mediawiki/igem.org/4/4d/IGEM_fromabove_2015.jpg" title="The Jaint Jamboree"/>
−
    };
+
    </li>
 +
<!--  new  -->
 +
    <li>
 +
    <img style="height:250px;width:380px;" style="" src="https://static.igem.org/mediawiki/2015/5/59/BIT_China_gallery_pic35.JPG" title="Our poster"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:250px;" style="" src="https://static.igem.org/mediawiki/2015/7/78/BIT_China_gallery_pic37.JPG" title="Poster time"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:250px;" style="" src="https://static.igem.org/mediawiki/2015/0/01/BIT_China_gallery_pic38.JPG" title="Poster time"/>
 +
    </li>
  
−
})(jQuery, window, document);
+
    <li>
 +
    <img style="height:250px;width:380px;" style="" src="https://static.igem.org/mediawiki/2015/4/4c/BIT_China_gallery_pic40.JPG" title="Our presentation"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:250px;" style="" src="https://static.igem.org/mediawiki/2015/a/a1/BIT_China_gallery_pic42.JPG" title="Our presentation"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:250px;" style="" src="https://static.igem.org/mediawiki/2015/3/3b/BIT_China_gallery_pic41.JPG" title="Our presentation"/>
 +
    </li>
  
−
</script>
 
  
−
<div id="div_c">  
+
 
−
    <img src="https://static.igem.org/mediawiki/2015/d/d6/BIT_school_logo.png"/>
+
    <li>
−
    <img src="https://static.igem.org/mediawiki/2015/d/d6/BIT_school_logo.png"/>
+
    <img style="height:307px;" style="" src="https://static.igem.org/mediawiki/2015/d/db/BIT_China_gallery_pic44.JPG" title="We are BIT-China"/>
−
<img src="https://static.igem.org/mediawiki/2015/d/d6/BIT_school_logo.png"/>
+
    </li>
−
    <img src="https://static.igem.org/mediawiki/2015/d/d6/BIT_school_logo.png"/>
+
    <li>
−
<img src="https://static.igem.org/mediawiki/2015/d/d6/BIT_school_logo.png"/>
+
    <img style="height:307px;" style="" src="https://static.igem.org/mediawiki/2015/0/0c/BIT_China_gallery_pic43.JPG" title="Our Banner"/>
−
+
    </li>
−
   
+
    <li>
−
   
+
    <img style="height:307px;width:207px;" style="" src="https://static.igem.org/mediawiki/2015/8/8f/BIT_China_gallery_pic51.JPG" title="Our Banner"/>
−
     </div>
+
    </li>
 +
 
 +
    <li>
 +
    <img style="height:307px;width:207px;" style="" src="https://static.igem.org/mediawiki/2015/6/6b/BIT_China_gallery_pic45.JPG" title="Chenyi Li"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:307px;" style="" src="https://static.igem.org/mediawiki/2015/b/bc/BIT_China_gallery_pic46.JPG" title="Our team"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:307px;" style="" src="https://static.igem.org/mediawiki/2015/a/ad/BIT_China_gallery_pic47.JPG" title="Sky Walk"/>
 +
    </li>
 +
 
 +
<li>
 +
    <img style="height:307px;" style="" src="https://static.igem.org/mediawiki/2015/3/35/BIT_China_gallery_pic48.JPG" title="Enjoy langouste buffet"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:307px;width:207px;" style="" src="https://static.igem.org/mediawiki/2015/e/e5/BIT_China_gallery_pic49.JPG" title="trip to Harvard Museum of Natural History"/>
 +
    </li>
 +
    <li>
 +
    <img style="height:307px;" style="" src="https://static.igem.org/mediawiki/2015/a/a9/BIT_China_gallery_pic50.JPG" title="trip to MIT"/>
 +
    </li>
 +
 
 +
     </ul></div></div>
 +
</div>
 +
 
  
 
</div></div><!---->
 
</div></div><!---->
−
<html>
+
<script>$("#container").sliphover();
 +
$(".sliphover-container").css('z-index','99');
 +
$("#menuContainer").css('z-index','99');
 +
</script>
 +
</html>

Latest revision as of 08:24, 25 October 2015



Add a banner to your wiki!

You can make the image 980px by 200px

Remember to call the file: "Team_BIT-China_banner.jpg"