https://nobts.edu/_skin/assets/base/js/scripts/pages/isotope-gallery.js

1// ISOTOPE GALLERY
2
3var IsotopeGallery = function() {
4
5	var _init = function() {
6		// BEGIN: ISOTOPE GALLERY 1 INIT
7		// init ilightbox
8		$('.c-ilightbox-image-1').iLightBox();
9
10		// init isotope gallery
11		var $grid1 = $('.c-content-isotope-gallery.c-opt-1').imagesLoaded( function() {
12			// init Isotope after all images have loaded
13			$grid1.isotope({
14				// options...
15				itemSelector: '.c-content-isotope-item',
16                layoutMode: 'packery',
17                fitWidth: true,
18                percentPosition: true,
19			});
20		});
21		// END: ISOTOPE GALLERY 1
22
23		// BEGIN: ISOTOPE GALLERY 2 INIT
24		// init ilightbox
25		$('.c-ilightbox-image-2').iLightBox({ skin: 'light'});
26
27		// init isotope gallery
28		var $grid2 = $('.c-content-isotope-gallery.c-opt-2').imagesLoaded( function() {
29			// init Isotope after all images have loaded
30			$grid2.isotope({
31				// options...
32				itemSelector: '.c-content-isotope-item',
33                layoutMode: 'packery',
34                fitWidth: true,
35                percentPosition: true,
36			});
37		});
38		// END: ISOTOPE GALLERY 2
39
40		// BEGIN: ISOTOPE GALLERY 3 INIT
41		// init ilightbox
42		$('.c-ilightbox-image-3').iLightBox();
43
44		// init isotope gallery
45		var $grid3 = $('.c-content-isotope-gallery.c-opt-3').imagesLoaded( function() {
46			// init Isotope after all images have loaded
47			$grid3.isotope({
48				// options...
49				itemSelector: '.c-content-isotope-item',
50                layoutMode: 'packery',
51                fitWidth: true,
52                percentPosition: true,
53			});
54		});
55		// END: ISOTOPE GALLERY 3
56
57		// BEGIN: ISOTOPE GALLERY 4 INIT
58		// init ilightbox
59		$('.c-ilightbox-image-4').iLightBox();
60
61		// init isotope gallery
62		var $grid4 = $('.c-content-isotope-gallery.c-opt-4').imagesLoaded( function() {
63			// init Isotope after all images have loaded
64			$grid4.isotope({
65				// options...
66				itemSelector: '.c-content-isotope-item',
67                layoutMode: 'packery',
68                fitWidth: true,
69                percentPosition: true,
70			});
71		});
72		// Filter buttons
73		$('.c-content-isotope-filter-1').on( 'click', 'button', function() {
74			var filterValue = $(this).attr('data-filter');
75			$grid4.isotope({ filter: filterValue });
76			$('.c-content-isotope-filter-1 .c-isotope-filter-btn').removeClass('c-active');
77			$(this).addClass('c-active');
78
79			// scroll to top of element on click
80			$('html, body').stop();
81			$('html, body').animate({
82		        scrollTop: $("#c-isotope-anchor-1").offset().top
83		    }, 500);
84		});
85		// END: ISOTOPE GALLERY 4
86
87		// BEGIN: ISOTOPE GALLERY 5 INIT
88		// init ilightbox
89		$('.c-ilightbox-image-5').iLightBox();
90
91		// init isotope gallery
92		var $grid5 = $('.c-content-isotope-gallery.c-opt-5').imagesLoaded( function() {
93			// init Isotope after all images have loaded
94			$grid5.isotope({
95				// options...
96				itemSelector: '.c-content-isotope-item',
97                layoutMode: 'packery',
98                fitWidth: true,
99                percentPosition: true,
100			});
101		});
102		// Filter buttons
103		$('.c-content-isotope-filter-2').on( 'click', 'button', function() {
104			var filterValue = $(this).attr('data-filter');
105			$grid5.isotope({ filter: filterValue });
106			$('.c-content-isotope-filter-2 .c-isotope-filter-btn').removeClass('c-active');
107			$(this).addClass('c-active');
108
109			// scroll to top of element on click
110			$('html, body').stop();
111			$('html, body').animate({
112		        scrollTop: $("#c-isotope-anchor-2").offset().top
113		    }, 500);
114		});
115		// END: ISOTOPE GALLERY 5
116		
117	}
118
119    return {
120        //main function to initiate the module
121        init: function() {
122
123            _init();
124
125        }
126
127    };
128}();
129
130$(document).ready(function() {
131    IsotopeGallery.init();
132});