https://carstairs.ca/Scripts/gallery.js

1(function() {
2	
3	var thumbsSpacing = 15;
4
5	$('.filter').css('margin-bottom', thumbsSpacing + 'px');
6	//$('.thumbnail').addClass('showThumb').addClass('fancybox').attr('rel', 'group');
7	$('.thumbnail').addClass('showThumb').addClass('fancybox').attr('rel', 'group');
8
9	$('a.sortLink').on('click', function(e) {
10		e.preventDefault();
11		$('a.sortLink').removeClass('selected');
12		$(this).addClass('selected');
13
14		var category = $(this).data('category');
15		filterThumbs(category);
16	});
17	var firstCategory = $('a.selected').data('category');
18	filterThumbs(firstCategory);
19	setInterval(checkViewport, 500);
20
21	function checkViewport() {
22
23		var photosWidth = $('.photos').width(),
24			thumbsContainerWidth = $('.thumbnail_wrap').width(),
25			thumbnailWidth = $('a.thumbnail:first-child').outerWidth();
26
27		if ( photosWidth < thumbsContainerWidth ) {
28			positionThumbs();
29		}
30
31		if ( (photosWidth - thumbnailWidth) > thumbsContainerWidth ) {
32			positionThumbs();
33		}
34	}
35
36	function filterThumbs(category) {
37		
38		$('a.thumbnail').each(function() {
39			var thumbCategory = $(this).data('categories');
40
41			if ( category === 'all' ) {
42				$(this).addClass('showThumb').removeClass('hideThumb').attr('rel', 'group');
43			} else {
44				if ( thumbCategory.indexOf(category) !== -1 ) {
45					$(this).addClass('showThumb').removeClass('hideThumb').attr('rel', 'group');
46				} else {
47					$(this).addClass('hideThumb').removeClass('showThumb').attr('rel', 'none');
48				}
49			}
50		});
51
52		positionThumbs();
53
54	}
55
56	function positionThumbs() {
57
58		$('a.thumbnail.hideThumb').animate({
59			'opacity': 0
60		}, 0, function() {
61			$(this).css({
62				'display': 'none',
63				'top': '0px',
64				'left': '0px'
65			});
66		});
67
68		var containerWidth = $('.photos').width(),
69			thumbRow = 0,
70			thumbColumn = 0,
71			thumbWidth = $('.thumbnail img:first-child').outerWidth() + thumbsSpacing,
72			thumbHeight = $('.thumbnail img:first-child').outerHeight() + thumbsSpacing,
73			maxColumns = Math.floor( containerWidth / thumbWidth );
74
75		$('a.thumbnail.showThumb').each(function(index){
76			var remainder = ( index%maxColumns ) / 100,
77				maxIndex = 0;
78
79			if( remainder === 0 ) {
80				if( index !== 0 ) {
81					thumbRow += thumbHeight;
82				}
83				thumbColumn = 0;
84			} else {
85				thumbColumn += thumbWidth;
86			}
87
88			$(this).css('display', 'block').animate({
89				'opacity': 1,
90				'top': thumbRow + 'px',
91				'left': thumbColumn + 'px'
92			}, 0);
93
94			var newWidth = thumbColumn + thumbWidth,
95				newHeight = thumbRow + thumbHeight;
96			$('.thumbnail_wrap').css({
97				'width': newWidth + 'px',
98				'height': newHeight + 'px'
99			});
100		});
101
102		findFancyBoxLinks();
103	}
104
105	function findFancyBoxLinks() {
106
107		$('a.fancybox[rel="group"]').fancybox({
108			'transitionIn' : 'elastic',
109			'transitionOut' : 'elastic',
110			'titlePosition' : 'over',
111			'speedIn' : 500,
112			'overlayColor' : '#000',
113			'padding' : 0,
114			'overlayOpacity' : .75
115		});
116	}
117
118})();