Difference between revisions of "Template:UPMC-Paris"

Line 5: Line 5:
 
<!-- HTML-->
 
<!-- HTML-->
  
−
</html>
 
  
 +
 +
<style>
 +
.honeycombs{
 +
position: relative;
 +
overflow: hidden;
 +
width: 100%;
 +
text-align: center;
 +
}
 +
 +
.honeycombs .inner_span{
 +
display: block;
 +
height: 100%;
 +
width: 100%;
 +
background-color: #f7cd07;
 +
font-family: sans-serif;
 +
color: #000;
 +
}
 +
.honeycombs .inner-text{
 +
padding-top: 30%;
 +
}
 +
 +
.honeycombs .honeycombs-inner-wrapper{
 +
display: inline-block;
 +
overflow: hidden;
 +
width: 700px;
 +
position: relative;
 +
height: 1200px;
 +
}
 +
 +
.honeycombs .comb{
 +
position: absolute;
 +
display: inline-block;
 +
}
 +
 +
.honeycombs .hex_l,
 +
.honeycombs .hex_r{
 +
overflow: hidden;
 +
position: absolute;
 +
/* -webkit-backface-visibility: hidden; */
 +
}
 +
 +
.honeycombs .hex_l{
 +
visibility: hidden;
 +
-moz-transform: rotate(60deg);
 +
-ms-transform: rotate(60deg);
 +
-o-transform: rotate(60deg);
 +
-webkit-transform: rotate(60deg);
 +
 +
transform: rotate(60deg);
 +
}
 +
 +
.honeycombs .hex_r{
 +
visibility: hidden;
 +
-moz-transform: rotate(-120deg);
 +
-ms-transform: rotate(-120deg);
 +
-o-transform: rotate(-120deg);
 +
-webkit-transform: rotate(-120deg);
 +
 +
transform: rotate(-120deg);
 +
}
 +
 +
.honeycombs .hex_inner{
 +
display: block;
 +
visibility: visible;
 +
-moz-transform: rotate(60deg);
 +
-ms-transform: rotate(60deg);
 +
-o-transform: rotate(60deg);
 +
-webkit-transform: rotate(60deg);
 +
 +
transform: rotate(60deg);
 +
 +
background-position: center;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
 +
cursor: pointer;
 +
 +
}
 +
</style>
 +
 +
<script>
 +
(function($) {
 +
 +
    $.fn.honeycombs = function(options) {
 +
 +
        // Establish our default settings
 +
        var settings = $.extend({
 +
            combWidth: 250,
 +
            margin: 10
 +
        }, options);
 +
 +
        function initialise(element) {
 +
           
 +
            $(element).addClass('honeycombs-wrapper');
 +
           
 +
            var width = 0;
 +
            var combWidth = 0;
 +
            var combHeight = 0;
 +
            var num = 0;
 +
            var $wrapper = null;
 +
           
 +
            /**
 +
            * Build the dom
 +
            */
 +
            function buildHtml(){
 +
                // add the 2 other boxes
 +
                $(element).find('.comb').wrapAll('<div class="honeycombs-inner-wrapper"></div>');
 +
                $wrapper = $(element).find('.honeycombs-inner-wrapper');
 +
               
 +
                $(element).find('.comb').append('<div class="hex_l"></div>');
 +
                $(element).find('.hex_l').append('<div class="hex_r"></div>');
 +
                $(element).find('.hex_r').append('<div class="hex_inner"></div>');
 +
 +
                $(element).find('.hex_inner').append('<div class="inner_span"><div class="inner-text"></div></div>');
 +
               
 +
                num = 0;
 +
               
 +
                $(element).find('.comb').each(function(){
 +
                    num = num + 1;
 +
                    var image = $(this).find('img').attr('src');
 +
                    var css = 'url("'+image+'") ';
 +
                   
 +
                    $(this).find('.hex_inner').attr('style', 'background-image: '+css);
 +
                   
 +
                    if($(this).find('span').length > 0){
 +
                        $(this).find('.inner_span .inner-text').html($(this).find('span').html());
 +
                    }else{
 +
                        $(this).find('.inner_span').remove();
 +
                    };
 +
                });
 +
               
 +
                $(element).find('img, span, .inner_span').hide();
 +
            }
 +
           
 +
            /**
 +
            * Update all scale values
 +
            */
 +
            function updateScales(){
 +
                combWidth = settings.combWidth;
 +
                combHeight = ( Math.sqrt(3) * combWidth ) / 2;
 +
                edgeWidth = combWidth / 2;
 +
               
 +
               
 +
                $(element).find('.comb').width(combWidth).height(combHeight);
 +
                $(element).find('.hex_l, .hex_r').width(combWidth).height(combHeight);
 +
                $(element).find('.hex_inner').width(combWidth).height(combHeight);
 +
            }
 +
           
 +
            /**
 +
            * update css classes
 +
            */
 +
            function reorder(animate){
 +
               
 +
                updateScales();
 +
                width = $(element).width();
 +
               
 +
                newWidth = ( num / 1.5) * settings.combWidth;
 +
               
 +
                if(newWidth < width){
 +
                    width = newWidth;
 +
                }
 +
               
 +
                $wrapper.width(width);
 +
               
 +
                var row = 0; // current row
 +
                var upDown = 1; // 1 is down
 +
                var left = 0; // pos left
 +
                var top = 0; // pos top
 +
               
 +
                var cols = 0;
 +
               
 +
                $(element).find('.comb').each(function(index){
 +
                   
 +
                    top = ( row * (combHeight + settings.margin) ) + (upDown * (combHeight / 2 + (settings.margin / 2)));
 +
                   
 +
                    if(animate == true){
 +
                        $(this).stop(true, false);
 +
                        $(this).animate({'left': left, 'top': top});
 +
                    }else{
 +
                        $(this).css('left', left).css('top', top);
 +
                    }
 +
                   
 +
                    left = left + ( combWidth - combWidth / 4 + settings.margin );
 +
                    upDown = (upDown + 1) % 2;
 +
                   
 +
                    if(row == 0){
 +
                        cols = cols + 1;
 +
                    }
 +
                       
 +
                    if(left + combWidth > width){
 +
                        left = 0;
 +
                        row = row + 1;
 +
                        upDown = 1;
 +
                    }
 +
                });
 +
               
 +
                $wrapper
 +
                    .width(cols * (combWidth / 4 * 3 + settings.margin) + combWidth / 4)
 +
                    .height((row + 1) * (combHeight + settings.margin) + combHeight / 2);
 +
            }
 +
           
 +
            $(window).resize(function(){
 +
                reorder(true);
 +
            });
 +
           
 +
            $(element).find('.comb').mouseenter(function(){
 +
                $(this).find('.inner_span').stop(true, true);
 +
                $(this).find('.inner_span').fadeIn();
 +
            });
 +
           
 +
            $(element).find('.comb').mouseleave(function(){
 +
                $(this).find('.inner_span').stop(true, true);
 +
                $(this).find('.inner_span').fadeOut();
 +
            });
 +
           
 +
            buildHtml();
 +
            reorder(false);
 +
        }
 +
 +
        return this.each(function() {
 +
            initialise(this);
 +
        });
 +
 +
    }
 +
 +
}(jQuery));
 +
</script>
 +
 +
</html>
 
{{UPMC-Paris/Footer}}
 
{{UPMC-Paris/Footer}}

Revision as of 06:00, 5 August 2016