https://www.perzonalization.com/wp-content/themes/startuply/js/custom-isotope-portfolio.js?ver=1.0

1
2if (!$) $ = jQuery;
3
4// Isotope for Portfolio
5
6$(document).ready(function() {
7	$('.vivaco-grid[id^="gridwrapper_"]').each( function() {
8		var $div = $(this),
9			token = $div.data('token'),
10			settingObj = window['vsc_grid_' + token],
11			$container = null,
12			$optionSets = null,
13			grid_gutter_width = settingObj.gutter_width;
14
15		if (typeof settingObj === 'undefined') {
16			$container = $(".grid_portfolio");
17			$optionSets = $('#gridwrapper_portfolio #options .option-set');
18
19		}else {
20			$container = $(".grid_"+settingObj.id+"");
21			$optionSets = $('#gridwrapper_'+settingObj.id+'  #options .option-set');
22
23		}
24
25		colWidth = function () {
26			var w = $container.width(),
27				columnNum = 1,
28				columnWidth = 0;
29
30			vals = settingObj.vals
31
32			// apply default settings
33			if (vals.grid_manager != 1) {
34				if (w > 1440) {
35					columnNum  = 4;
36
37				} else if (w > 1365) {
38					columnNum  = 3;
39
40				} else if (w > 1279) {
41					columnNum  = 3;
42
43				} else if (w > 1023) {
44					columnNum  = 3;
45
46				} else if (w > 767) {
47					columnNum  = 2;
48
49				} else if (w > 479) {
50					columnNum  = 2;
51
52				}
53
54			}else { // apply custom settings
55				if (w > 1440) {
56					columnNum  = vals.grid_very_wide;
57
58				} else if (w > 1365) {
59					columnNum  = vals.grid_wide;
60
61				} else if (w > 1279) {
62					columnNum  = vals.grid_normal;
63
64				} else if (w > 1023) {
65					columnNum  = vals.grid_small;
66
67				} else if (w > 767) {
68					columnNum  = vals.grid_tablet;
69
70				} else if (w > 479) {
71					columnNum  = vals.grid_phone;
72
73				}
74			}
75
76
77			columnWidth = Math.floor(w/columnNum);
78
79			$container.find('.grid-item').each(function() {
80				var $item = $(this),
81					gwidth = 0;
82
83				if (vals.grid_manager == 1) {
84					gwidth = grid_gutter_width;
85
86				}
87
88				$item.css({'margin': Math.floor(gwidth/2)});
89
90				if ($item.hasClass('item-wide')) {
91					if (w < 480) {
92						$item.css({
93							'width' : ((columnWidth)-gwidth) + 'px',
94							'height' : Math.round(((columnWidth)-gwidth) * 0.7777777) + 'px'
95						});
96
97						$item.find('img').css({
98							'width' : ((columnWidth)-gwidth) + 'px',
99							'height' : '100%'
100						});
101
102					}else {
103						$item.css({
104							'width' : ((columnWidth*2)-gwidth) + 'px',
105							'height' : Math.round(((columnWidth*2)-gwidth) * 0.7777777) + 'px'
106						});
107
108						$item.find('img').css({
109							'width' : ((columnWidth*2)-gwidth) + 'px',
110							'height' : '100%'
111						});
112
113					}
114				}
115
116				if ($item.hasClass('item-small')) {
117					$item.css({
118						'width' : ((columnWidth)-gwidth) + 'px',
119						'height' : Math.round(((columnWidth)-gwidth) * 0.7777777) + 'px'
120					});
121
122					$item.find('img').css({
123						'width' : ((columnWidth)-gwidth) + 'px',
124						'height' : '100%'
125					});
126
127				}
128
129				if ($item.hasClass('item-long')) {
130					if (w < 480) {
131						$item.css({
132							'width' : ((columnWidth)-gwidth) + 'px',
133							'height' : Math.round(((columnWidth)-gwidth) * 0.7777777/2) + 'px'
134						});
135
136						$item.find('img').css({
137							'width' : ((columnWidth)-gwidth) + 'px',
138							'height' : '100%'
139						});
140
141					}else {
142						$item.css({
143							'width' : ((columnWidth*2)-gwidth) + 'px',
144							'height' : Math.round(((columnWidth)-gwidth) * 0.7777777) + 'px'
145						});
146
147						$item.find('img').css({
148							'width' : ((columnWidth*2)-gwidth) + 'px',
149							'height' : '100%'
150						});
151
152					}
153				}
154
155				if ($item.hasClass('item-high')) {
156					$item.css({
157						'width' : ((columnWidth)-gwidth) + 'px',
158						'height' : Math.round(((columnWidth*2)-gwidth) * 0.7777777) +'px'
159					});
160
161					$item.find('img').css({
162						'width' : ((columnWidth)-gwidth) + 'px',
163						'height' : '100%'
164					});
165
166				}
167			});
168
169			return columnWidth;
170		}
171
172		// Isotope Call
173		gridIsotope = function () {
174			$container.isotope({
175				layoutMode : 'masonry',
176				itemSelector: '.grid-item',
177				animationEngine: 'jquery',
178				resizable: false,
179				masonry: { columnWidth: colWidth(), gutter: 35, isFitWidth: true }
180			});
181		};
182		gridIsotope();
183		$(window).smartresize(gridIsotope);
184
185
186		// Portfolio Filtering
187		$optionLinks = $optionSets.find('a');
188
189		$optionLinks.click(function() {
190			var $this = $(this);
191			var $optionSet = $this.parents('.option-set');
192
193			// don't proceed if already selected
194			if ( $this.hasClass('selected') ) return false;
195
196			$optionSet.find('.selected').removeClass('selected');
197			$this.addClass('selected');
198
199			// make option object dynamically, i.e. { filter: '.my-filter-class' }
200			var options = {},
201				key = $optionSet.attr('data-option-key'),
202				value = $this.attr('data-option-value');
203
204			// parse 'false' as false boolean
205			value = value === 'false' ? false : value;
206			options[ key ] = value;
207
208			if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
209				changeLayoutMode( $this, options ); // changes in layout modes need extra logic
210
211			} else {
212				$container.isotope( options ); // otherwise, apply new options
213
214			}
215
216			return false;
217		});
218	});
219});