https://www.textilkunstgalerie.net/wp-content/plugins/dynamic-cont…/honeycombs/jquery.homeycombs.js?ver=3.4.12

1(function ($) {
2    /**
3     * jQuery Honeycombs
4     * jQuery plugin for displaying images in a responsive honeycomb/hexagon grid with caption and anchor
5     * 
6     * https://github.com/nasirkhan/honeycombs
7     * 
8     */
9    $.fn.honeycombs = function (options) {
10
11        // Establish our default settings
12        var settings = $.extend({
13            combWidth: 200,
14            margin: 10
15        }, options);
16
17        function initialise(element) {
18
19            $(element).addClass('honeycombs-wrapper');
20
21            var width = 0;
22            var combWidth = 0;
23            var combHeight = 0;
24            var num = 0;
25            var $wrapper = null;
26
27            /**
28             * Build the dom
29             */
30            function buildHtml() {
31                // add the 2 other boxes
32                $(element).find('.comb').wrapAll('<div class="honeycombs-inner-wrapper"></div>');
33                $wrapper = $(element).find('.honeycombs-inner-wrapper');
34
35
36
37                $(element).find('.comb').append('<div class="hex_l"></div>');
38                $(element).find('.hex_l').append('<div class="hex_r"></div>');
39                $(element).find('.hex_r').append('<div class="hex_inner"></div>');
40
41                $(element).find('.hex_inner').append('<div class="inner_span"><div class="inner-text"></div></div>');
42
43                num = 0;
44
45                $(element).find('.comb').each(function () {
46                    num = num + 1;
47                    var image = $(this).find('img').attr('src');
48                    var css = 'url("' + image + '") ';
49                    var a_href = $(this).find('a').attr('href');
50                    var a_class = $(this).find('a').attr('class');
51
52                    if (typeof (a_href) != "undefined" && a_href !== null) {
53                        if (typeof (a_class) != "undefined" && a_class !== null) {
54                            $(this).find('.hex_inner').wrapAll('<a class="' + a_class + '" href="' + a_href + '"></a>');
55                        }
56                        else {
57                            $(this).find('.hex_inner').wrapAll('<a class="" href="' + a_href + '"></a>');
58                        }
59                    }
60
61                    $(this).find('.hex_inner').attr('style', 'background-image: ' + css);
62                    $(this).find('.hex_inner').attr('style', 'background-image: ' + css);
63
64                    if ($(this).find('span').length > 0) {
65                        $(this).find('.inner_span .inner-text').html($(this).find('span').html());
66                    } else {
67                        $(this).find('.inner_span').remove();
68                    };
69
70                });
71
72                $(element).find('img, span, .inner_span').hide();
73            }
74
75            /**
76             * Update all scale values
77             */
78            function updateScales() {
79                combWidth = settings.combWidth;
80                combHeight = (Math.sqrt(3) * combWidth) / 2;
81                edgeWidth = combWidth / 2;
82
83                $(element).find('.comb').width(combWidth).height(combHeight);
84                $(element).find('.hex_l, .hex_r').width(combWidth).height(combHeight);
85                $(element).find('.hex_inner').width(combWidth).height(combHeight);
86            }
87
88            /**
89             * update css classes
90             */
91            function reorder(animate) {
92
93                updateScales();
94                width = $(element).width();
95
96                newWidth = (num / 1.5) * settings.combWidth;
97
98                if (newWidth < width) {
99                    width = newWidth;
100                }
101
102                $wrapper.width(width);
103
104                var row = 0; // current row
105                var upDown = 1; // 1 is down
106                var left = 0; // pos left
107                var top = 0; // pos top
108
109                var cols = 0;
110
111                $(element).find('.comb').each(function (index) {
112
113                    top = (row * (combHeight + settings.margin)) + (upDown * (combHeight / 2 + (settings.margin / 2)));
114
115                    if (animate == true) {
116                        $(this).stop(true, false);
117                        $(this).animate({ 'left': left, 'top': top });
118                    } else {
119                        $(this).css('left', left).css('top', top);
120                    }
121
122                    left = left + (combWidth - combWidth / 4 + settings.margin);
123                    upDown = (upDown + 1) % 2;
124
125                    if (row == 0) {
126                        cols = cols + 1;
127                    }
128
129                    if (left + combWidth > width) {
130                        left = 0;
131                        row = row + 1;
132                        upDown = 1;
133                    }
134                });
135
136                $wrapper
137                    .width(cols * (combWidth / 4 * 3 + settings.margin) + combWidth / 4)
138                    .height((row + 1) * (combHeight + settings.margin) + combHeight / 2);
139            }
140
141            $(window).resize(function () {
142                reorder(true);
143            });
144
145            $(element).find('.comb').mouseenter(function () {
146                $(this).find('.inner_span').stop(true, true);
147                $(this).find('.inner_span').fadeIn();
148            });
149
150            $(element).find('.comb').mouseleave(function () {
151                $(this).find('.inner_span').stop(true, true);
152                $(this).find('.inner_span').fadeOut();
153            });
154
155            buildHtml();
156            reorder(false);
157        }
158
159        return this.each(function () {
160            initialise(this);
161        });
162
163    }
164
165}(jQuery));