https://www.rpglifesciences.com/assets/js/examples/examples.portfolio.js

1/*
2Name: 			Portfolio - Examples
3Written by: 	Okler Themes - (http://www.okler.net)
4Theme Version:	6.2.1
5*/
6(function($) {
7
8	'use strict';
9
10	/*
11	Portfolio on Modal
12	*/
13	$('a[data-portfolio-on-modal]').magnificPopup({
14		mainClass: 'portfolio-modal',
15		type: 'inline',
16		gallery: {
17			enabled: true
18		},
19		callbacks: {
20		  	open: function() {
21		  		$('.owl-carousel').owlCarousel('refresh');
22		  	},
23		  	change: function() {
24		  		setTimeout(function(){
25			  		$('.owl-carousel').owlCarousel('refresh');
26		  		}, 1);
27		  	}
28		}
29	});
30
31	$('a[data-portfolio-close]').on('click', function(e) {
32		e.preventDefault();
33		$.magnificPopup.instance.close();
34		return false;
35	});
36
37	$('a[data-portfolio-prev]').on('click', function(e) {
38		e.preventDefault();
39		$.magnificPopup.instance.prev();
40		return false;
41	});
42
43	$('a[data-portfolio-next]').on('click', function(e) {
44		e.preventDefault();
45		$.magnificPopup.instance.next();
46		return false;
47	});
48
49	/*
50	Carousel
51	*/
52	if ($.isFunction($.fn.revolution)) {
53		$("#revolutionSliderCarousel").show().revolution({
54			sliderType: "carousel",
55			sliderLayout: "fullwidth",
56			dottedOverlay: "none",
57			delay: 4000,
58			navigation: {
59				keyboardNavigation: "off",
60				keyboard_direction: "horizontal",
61				mouseScrollNavigation: "off",
62				onHoverStop: "off",
63				arrows: {
64					style: "tparrows-carousel",
65					enable: true,
66					hide_onmobile: false,
67					hide_onleave: false,
68					tmp: '',
69					left: {
70						h_align: "left",
71						v_align: "center",
72						h_offset: 30,
73						v_offset: 0
74					},
75					right: {
76						h_align: "right",
77						v_align: "center",
78						h_offset: 30,
79						v_offset: 0
80					}
81				}
82			},
83			carousel: {
84				maxRotation: 65,
85				vary_rotation: "on",
86				minScale: 55,
87				vary_scale: "off",
88				horizontal_align: "center",
89				vertical_align: "center",
90				fadeout: "on",
91				vary_fade: "on",
92				maxVisibleItems: 5,
93				infinity: "on",
94				space: -150,
95				stretch: "off"
96			},
97			gridwidth: 600,
98			gridheight: 600,
99			lazyType: "none",
100			shadow: 0,
101			spinner: "off",
102			stopLoop: "on",
103			stopAfterLoops: 0,
104			stopAtSlide: -1,
105			shuffle: "off",
106			autoHeight: "off",
107			disableProgressBar: "on",
108			hideThumbsOnMobile: "off",
109			hideSliderAtLimit: 0,
110			hideCaptionAtLimit: 0,
111			hideAllCaptionAtLilmit: 0,
112			debugMode: false,
113			fallbacks: {
114				simplifyAll: "off",
115				nextSlideOnWindowFocus: "off",
116				disableFocusListener: false,
117			}
118		});
119	}
120
121	/*
122	Medias
123	*/
124	if ($.isFunction($.fn.revolution)) {
125		$("#revolutionSliderMedias").show().revolution({
126			sliderType: "standard",
127			sliderLayout: "auto",
128			dottedOverlay: "none",
129			delay: 9000,
130			navigation: {
131				keyboardNavigation: "off",
132				keyboard_direction: "horizontal",
133				mouseScrollNavigation: "off",
134				onHoverStop: "off",
135				tabs: {
136					style: "hesperiden hesperiden-custom",
137					enable: true,
138					width: 250,
139					height: 80,
140					min_width: 250,
141					wrapper_padding: 20,
142					wrapper_color: "#ffffff",
143					wrapper_opacity: "1",
144					tmp: '<div class="tp-tab-content">  <span class="tp-tab-date">{{param1}}</span>  <span class="tp-tab-title">{{title}}</span></div><div class="tp-tab-image"></div>',
145					visibleAmount: 5,
146					hide_onmobile: false,
147					hide_onleave: false,
148					hide_delay: 200,
149					direction: "horizontal",
150					span: false,
151					position: "outer-bottom",
152					space: 0,
153					h_align: "left",
154					v_align: "bottom",
155					h_offset: 0,
156					v_offset: 0
157				}
158			},
159			gridwidth: 1230,
160			gridheight: 692,
161			lazyType: "smart",
162			shadow: 0,
163			spinner: "off",
164			stopLoop: "on",
165			stopAfterLoops: 0,
166			stopAtSlide: 1,
167			shuffle: "off",
168			autoHeight: "off",
169			disableProgressBar: "on",
170			hideThumbsOnMobile: "off",
171			hideSliderAtLimit: 0,
172			hideCaptionAtLimit: 0,
173			hideAllCaptionAtLilmit: 0,
174			debugMode: false,
175			fallbacks: {
176				simplifyAll: "off",
177				nextSlideOnWindowFocus: "off",
178				disableFocusListener: false,
179			}
180		});
181	}
182
183	/*
184	Ajax on Page
185	*/
186	var ajaxOnPage = {
187
188		pages: [],
189		currentPage: 0,
190		total: 0,
191		$ajaxBox: $('#porfolioAjaxBox'),
192		$ajaxBoxContent: $('#porfolioAjaxBoxContent'),
193
194		build: function() {
195
196			var self = this;
197
198			$('a[data-ajax-on-page]').each(function() {
199				self.add($(this));
200			});
201
202			$(document).on('mousedown', 'a[data-ajax-on-page]', function (ev) {
203				if (ev.which == 2) {
204					ev.preventDefault();
205					return false;

206				}
207			});
208
209			// Key Press
210			$(document.documentElement).on('keyup', function(e) {
211
212				if( !$('.mfp-wrap').get(0) ) {
213
214					// Next
215					if (e.keyCode == 39) {
216						self.next();
217					}
218
219					// Prev
220					if (e.keyCode == 37) {
221						self.prev();
222					}
223
224				}
225
226			});
227
228		},
229
230		add: function($el) {
231
232			var self = this,
233				href = $el.attr('data-href');
234
235			self.pages.push(href);
236			self.total++;
237
238			$el.on('click', function(e) {
239				e.preventDefault();
240				self.show(self.pages.indexOf(href));
241			});
242
243		},
244
245		events: function() {
246
247			var self = this;
248
249			// Close
250			$('a[data-ajax-portfolio-close]').on('click', function(e) {
251				e.preventDefault();
252				self.close();
253			});
254
255			if (self.total <= 1) {
256
257				$('a[data-ajax-portfolio-prev], a[data-ajax-portfolio-next]').remove();
258
259			} else {
260
261				// Prev
262				$('a[data-ajax-portfolio-prev]').on('click', function(e) {
263					e.preventDefault();
264					self.prev();
265				});
266
267				// Next
268				$('a[data-ajax-portfolio-next]').on('click', function(e) {
269					e.preventDefault();
270					self.next();
271				});
272
273			}
274
275			// Carousel
276			if ($.isFunction($.fn['themePluginCarousel'])) {
277
278				$(function() {
279					$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
280						var $this = $(this),
281							opts;
282
283						var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
284						if (pluginOptions)
285							opts = pluginOptions;
286
287						$this.themePluginCarousel(opts);
288					});
289				});
290
291			}
292
293		},
294
295		close: function() {
296
297			var self = this;
298
299			self.$ajaxBoxContent.empty();
300			self.$ajaxBox.removeClass('ajax-box-init').removeClass('ajax-box-loading');
301
302		},
303
304		next: function() {
305
306			var self = this;
307
308			if(self.currentPage + 1 < self.total) {
309				self.show(self.currentPage + 1);
310			} else {
311				self.show(0);
312			}
313		},
314
315		prev: function() {
316
317			var self = this;
318
319			if((self.currentPage - 1) >= 0) {
320				self.show(self.currentPage - 1);
321			} else {
322				self.show(self.total - 1);
323			}
324		},
325
326		show: function(i) {
327
328			var self = this;
329
330			self.$ajaxBoxContent.empty();
331			self.$ajaxBox.removeClass('ajax-box-init').addClass('ajax-box-loading');
332
333			$('html, body').animate({
334				scrollTop: self.$ajaxBox.offset().top - 100
335			}, 300, 'easeOutQuad');
336
337			self.currentPage = i;
338
339			if (i < 0 || i > (self.total-1)) {
340				self.close();
341				return false;
342			}
343
344			// Ajax
345			$.ajax({
346				url: self.pages[i],
347				complete: function(data) {
348				
349					setTimeout(function() {
350
351						self.$ajaxBoxContent.html(data.responseText).append('<div class="row"><div class="col-md-12"><hr class="tall mt-4"></div></div>');
352						self.$ajaxBox.removeClass('ajax-box-loading');
353
354						self.events();
355
356					}, 1000);
357
358				}
359			});
360
361		}
362
363	}
364
365	if($('#porfolioAjaxBox').get(0)) {
366		ajaxOnPage.build();
367	}
368
369	/*
370	Ajax on Modal
371	*/
372	$('a[data-ajax-on-modal]').magnificPopup({
373		type: 'ajax',
374		tLoading: '<div class="bounce-loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>',
375		mainClass: 'portfolio-ajax-modal',
376		gallery: {
377			enabled: true
378		},
379		callbacks: {
380			ajaxContentAdded: function() {
381
382				// Wrapper
383				var $wrapper = $('.portfolio-ajax-modal');
384
385				// Close
386				$wrapper.find('a[data-ajax-portfolio-close]').on('click', function(e) {
387					e.preventDefault();
388					$.magnificPopup.close();
389				});
390
391				// Remove Next and Close
392				if($('a[data-ajax-on-modal]').length <= 1) {
393					
394					$wrapper.find('a[data-ajax-portfolio-prev], a[data-ajax-portfolio-next]').remove();
395
396				} else {
397
398					// Prev
399					$wrapper.find('a[data-ajax-portfolio-prev]').on('click', function(e) {
400						e.preventDefault();
401						$('.mfp-arrow-left').trigger('click');
402						return false;
403					});
404
405					// Next
406					$wrapper.find('a[data-ajax-portfolio-next]').on('click', function(e) {
407						e.preventDefault();
408						$('.mfp-arrow-right').trigger('click');
409						return false;
410					});
411
412				}
413
414				// Carousel
415				$(function() {
416					$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
417						var $this = $(this),
418							opts;
419
420						var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
421						if (pluginOptions)
422							opts = pluginOptions;
423
424						$this.themePluginCarousel(opts);
425					});
426				});
427
428			}
429		}
430	});
431
432	/*

433	Load More
434	*/
435	var portfolioLoadMore = {
436
437		pages: 0,
438		currentPage: 1,
439		$wrapper: $('#portfolioLoadMoreWrapper'),
440		$btn: $('#portfolioLoadMore'),
441		$btnWrapper: $('#portfolioLoadMoreBtnWrapper'),
442		$loader: $('#portfolioLoadMoreLoader'),
443
444		build: function() {
445
446			var self = this
447
448			self.pages = self.$wrapper.data('total-pages');
449
450			if(self.pages <= 1) {
451
452				self.$btnWrapper.remove();
453				return;
454
455			} else {
456
457				self.$btn.on('click', function() {
458					self.loadMore();
459				});
460
461				// Infinite Scroll
462				if(self.$btn.hasClass('btn-portfolio-infinite-scroll')) {
463					self.$btn.appear(function() {
464						self.$btn.trigger('click');
465					}, {
466						data: undefined,
467						one: false,
468						accX: 0,
469						accY: 0
470					});
471				}
472
473			}
474
475		},
476		loadMore: function() {
477
478			var self = this;
479
480			self.$btn.hide();
481			self.$loader.addClass('portfolio-load-more-loader-showing').show();
482
483			// Ajax
484			$.ajax({
485				url: 'ajax/portfolio-ajax-load-more-' + (parseInt(self.currentPage)+1) + '.html',
486				complete: function(data) {
487
488					var $items = $(data.responseText);
489
490					setTimeout(function() {
491
492						self.$wrapper.append($items)
493
494						self.$wrapper.isotope('appended', $items);
495
496						self.currentPage++;
497
498						if(self.currentPage < self.pages) {
499							self.$btn.show().blur();
500						} else {
501							self.$btnWrapper.remove();
502						}
503
504						// Carousel
505						$(function() {
506							$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
507								var $this = $(this),
508									opts;
509
510								var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
511								if (pluginOptions)
512									opts = pluginOptions;
513
514								$this.themePluginCarousel(opts);
515							});
516						});
517
518						self.$loader.removeClass('portfolio-load-more-loader-showing').hide();
519
520					}, 1000);
521
522				}
523			});
524
525		}
526
527	}
528
529	if($('#portfolioLoadMoreWrapper').get(0)) {
530		portfolioLoadMore.build();
531	}
532
533	/*
534	Pagination
535	*/
536	var portfolioPagination = {
537
538		pages: 0,
539		$wrapper: $('#portfolioPaginationWrapper'),
540		$filter: $('#portfolioPaginationFilter'),
541		$pager: $('#portfolioPagination'),
542
543		init: function() {
544
545			var self = this;
546
547			self.$filter.on('filtered', function(event, laidOutItems) {
548				self.build();
549				self.$filter.find('.active').trigger('click');
550			});
551
552		},
553
554		calcPages: function() {
555
556			var self = this,
557				filter = self.$wrapper.attr('data-filter'),
558				itemsPerPage = parseInt(self.$wrapper.attr('data-items-per-page')),
559				$activeItems = self.$wrapper.find(filter + '.isotope-item');
560
561			self.$wrapper.find('.isotope-item').removeAttr('data-page-rel');
562
563			$activeItems.each(function(i) {
564				var itemPage = Math.ceil((i+1)/itemsPerPage);
565
566				$(this).attr('data-page-rel', ((itemPage == 0) ? 1 : itemPage));
567
568				if (itemPage > 1) {
569					$(this).hide();
570				}
571			});
572
573			self.$wrapper.isotope('layout');
574
575			return Math.ceil($activeItems.length/itemsPerPage);
576		},
577
578		build: function() {
579
580			var self = this;
581
582			self.pages = self.calcPages();
583
584			self.$wrapper.removeAttr('data-current-page');
585
586			self.$pager.empty().unbind();
587
588			if(self.pages <= 1) {
589
590				return;
591
592			} else {
593
594				self.$wrapper.attr('data-current-page', 1);
595
596				self.$pager.bootpag({
597					total: self.pages,
598					page: 1
599				}).on('page', function(event, num) {
600					self.$wrapper.attr('data-current-page', num);
601					self.$filter.find('.active').trigger('click');
602				});
603
604			}
605
606			self.$filter.find('.active').trigger('click');
607
608			self.$pager.find('li').addClass('page-item');
609			self.$pager.find('a').addClass('page-link');
610
611		}
612
613	}
614
615	if($('#portfolioPagination').get(0)) {
616		portfolioPagination.init();
617	}
618
619	/*
620	Combination Filters
621	*/
622	if($('#combinationFilters').get(0)) {
623
624		$(window).on('load', function() {
625
626			setTimeout(function() {
627
628				var $grid = $('.portfolio-list').isotope({
629					itemSelector: '.isotope-item',
630					layoutMode: 'masonry',
631					filter: '*',
632					hiddenStyle: {
633						opacity: 0
634					},
635					visibleStyle: {
636						opacity: 1
637					},
638					stagger: 30,
639					isOriginLeft: ($('html').attr('dir') == 'rtl' ? false : true)
640				});
641
642				var filters = {},
643					$loader = $('.sort-destination-loader');
644
645				$('.filters').on('click', 'a', function(e) {
646					
647					e.preventDefault();
648					
649					var $this = $(this);
650
651					var $buttonGroup = $this.parents('.portfolio-filter-group');
652					var filterGroup = $buttonGroup.attr('data-filter-group');
653					
654					filters[filterGroup] = $this.parent().attr('data-option-value');
655					
656					var filterValue = concatValues(filters);
657					
658					$grid.isotope({
659						filter: filterValue
660					});
661				});
662
663				$('.portfolio-filter-group').each(function(i, buttonGroup) {
664					var $buttonGroup = $(buttonGroup);
665					$buttonGroup.on('click', 'a', function() {
666						$buttonGroup.find('.active').removeClass('active');
667						$(this).addClass('active');
668					});
669				});
670
671				var concatValues = function(obj) {
672					var value = '';
673					for (var prop in obj) {
674						value += obj[prop];
675					}
676					return value;
677				}
678
679				$(window).on('resize', function() {
680					setTimeout(function() {
681						$grid.isotope('layout');
682					}, 300);
683				});
684
685				if ($loader) {
686					$loader.removeClass('sort-destination-loader-showing');
687
688					setTimeout(function() {
689						$loader.addClass('sort-destination-loader-loaded');
690					}, 500);
691				}
692
693			}, 1000);
694
695		});
696
697	}
698
699}).apply(this, [jQuery]);