|
|
Line 7: |
Line 7: |
| | | |
| | | |
− | <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>
| |
− |
| |
− |
| |
− | <div class="honeycombs">
| |
− | <div class="comb"> <img src="images/picture_0.jpg" /> <span>jQueryScript.Net</span> </div>
| |
− | <div class="comb"> <img src="images/picture_1.jpg" /> <span><b>This is</b><br>
| |
− | a test</span> </div>
| |
− | <div class="comb"> <img src="images/picture_2.jpg" /> <span><b>This is</b><br>
| |
− | a test</span> </div>
| |
− | <div class="comb"> <img src="images/picture_3.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_4.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_0.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_1.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_2.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_3.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_4.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_0.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_1.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_2.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_3.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_4.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_0.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_1.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_2.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_3.jpg" /> </div>
| |
− | <div class="comb"> <img src="images/picture_4.jpg" /> </div>
| |
− | </div>
| |
| | | |
| | | |
| </html> | | </html> |
| {{UPMC-Paris/Footer}} | | {{UPMC-Paris/Footer}} |