https://bayalagbuteegch.mn/js/view.home.js

1/*
2Name: 			View - Home
3Written by: 	Crivos - (http://www.crivos.com)
4Version: 		2.0
5*/
6
7(function() {
8
9	"use strict";
10
11	var Home = {
12
13		initialized: false,
14
15		initialize: function() {
16
17			if (this.initialized) return;
18			this.initialized = true;
19
20			this.events();
21
22		},
23
24		events: function() {
25
26			// Home Carousel
27			$(window).load(function () {
28				Home.homeCarousel();
29				Home.revolutionSlider();
30			});
31
32			/*// Home Player
33			$("#homeVideoPlay").magnificPopup({
34				disableOn: 700,
35				type: 'iframe',
36				mainClass: 'mfp-fade',
37				removalDelay: 160,
38				preloader: false,
39
40				fixedContentPos: false
41			});*/
42
43		},
44
45		revolutionSlider: function(options) {
46
47			$("#topRevolutionSlider").each(function() {
48
49				var slider = $(this);
50
51				var defaults = {
52					delay:9000,
53					startheight:580,
54					startwidth:960,
55
56					hideThumbs:10,
57
58					thumbWidth:100,
59					thumbHeight:50,
60					thumbAmount:5,
61
62					navigationType:"both",
63					navigationArrows:"verticalcentered",
64					navigationStyle:"round",
65
66					touchenabled:"on",
67					onHoverStop:"on",
68
69					navOffsetHorizontal:0,
70					navOffsetVertical:20,
71
72					stopAtSlide:0,
73					stopAfterLoops:-1,
74
75					shadow:0,
76					fullWidth:"on",
77					videoJsPath: "vendor/rs-plugin/videojs/"
78				}
79
80				var config = $.extend({}, defaults, options, slider.data("plugin-options"));
81
82				// Initialize Slider
83				var sliderApi = slider.revolution(config).addClass("slider-init");
84
85				// Set Play Button to Visible
86				sliderApi.bind("revolution.slide.onloaded ",function (e,data) {
87					$(".home-player").addClass("visible");
88				});
89
90			});
91
92		},
93
94		homeCarousel: function() {
95
96			if(!$(".main-carousel").get(0)) {
97				return false;
98			}
99
100			var i = 0,
101				max = 0,
102				min = 0,
103				maxScale = 1,
104				minScale = 0,
105				blurEnabled = true,
106				mainCarouselEl = $(".main-carousel"),
107				homeTop = $(".home-top"),
108				overlayTimeout = false,
109				slideSpeed = 600,
110				owlCarouselEl = mainCarouselEl.find(".owl-carousel");
111
112			// Random Positions
113			owlCarouselEl.find("> div").each(function() {
114
115				if (i%2 == 0) {
116					max = 120;
117					min = 50;
118					minScale = 0.9;
119				} else {
120					max = -50;
121					min = -120;
122					minScale = 0.55;
123				}
124
125				var top = Math.random() * (max - min) + min;
126				var scale = (Math.random() * (maxScale - minScale) + minScale).toFixed(2);
127
128				$(this).css({
129					"top": top,
130					'-moz-transform': 'scale(' + scale + ')',
131					'-webkit-transform': 'scale(' + scale + ')',
132					'transform': 'scale(' + scale + ')',
133				}).find("a").attr("data-scale", scale);
134
135				i++;
136			});
137
138			// Nav
139			mainCarouselEl.prepend(
140				$("<a />")
141					.addClass("carousel-nav prev")
142					.attr({
143						"href": "#",
144						"id": "mainCarouselPrev"
145					})
146					.append(
147						$("<i />")
148							.addClass("icon icon-chevron-left")
149					)
150			);
151
152			mainCarouselEl.prepend(
153				$("<a />")
154					.addClass("carousel-nav next")
155					.attr({
156						"href": "#",
157						"id": "mainCarouselNext"
158					})
159					.append(
160						$("<i />")
161							.addClass("icon icon-chevron-right")
162					)
163			);
164
165			// Nav Overlays
166			mainCarouselEl.prepend(
167				$("<div />")
168					.addClass("carousel-nav-overlay prev")
169			);
170
171			mainCarouselEl.prepend(
172				$("<div />")
173					.addClass("carousel-nav-overlay next")
174			);
175
176			// Clone
177			mainCarouselEl.prepend(
178				$("<div />")
179					.attr("id", "mainCarouselClone")
180					.addClass("carousel-clone")
181			);
182
183			var mainCarouselClone = $("#mainCarouselClone");
184
185			owlCarouselEl.clone(false).prependTo( "#mainCarouselClone" );
186
187			// Slider Init
188			var slider = owlCarouselEl.owlCarousel({
189				items: 6,
190				slideSpeed : slideSpeed,
191				navigation: true,
192				mouseDrag: false,
193				rewindSpeed: 2000,
194				afterInit: function(slider) {
195					slider.addClass("owl-carousel-init");
196				}
197			});
198
199			// Overlay
200			owlCarouselEl.after(
201				$("<div />")
202					.attr("id", "mainCarouselOverlay")
203					.addClass("carousel-overlay")
204			);
205
206			mainCarouselEl.prepend(
207				$("<div />")
208					.addClass("carousel-clone-overlay")
209			);
210
211			// Blur Start
212			if(!blurEnabled) {
213				mainCarouselEl.css("visibility", "visible");
214				Home.revolutionSlider();
215				return false;
216			}
217
218			// Init Clone Slider
219			var cloneOwlCarouselEl = mainCarouselClone.find(".owl-carousel");
220
221			var cloneSlider = cloneOwlCarouselEl.owlCarousel({
222				items: 6,
223				slideSpeed : slideSpeed,
224				navigation: true,
225				mouseDrag: false,
226				rewindSpeed: 2000
227			});
228
229			var cloneSliderInstance = cloneOwlCarouselEl.data().owlCarousel;
230
231			cloneSliderInstance.jumpTo(cloneSliderInstance.$owlItems.length);
232
233			cloneSliderInstance.$owlItems.slice(0,6).clone(false).prependTo( "#mainCarouselClone .owl-wrapper" );
234
235			setTimeout(function() {
236				cloneOwlCarouselEl.addClass("owl-carousel-init");
237			}, slideSpeed);
238
239			// Custom Navigation Events
240			$("#mainCarouselNext").click(function(e) {
241				e.preventDefault();
242				slider.trigger("owl.next");
243				cloneSlider.trigger("owl.prev");
244			});
245
246			$("#mainCarouselPrev").click(function(e) {
247				e.preventDefault();
248				slider.trigger("owl.prev");
249				cloneSlider.trigger("owl.next");
250			});
251
252			// Blur Images
253			mainCarouselEl.css("visibility", "visible");
254
255			// Rotate Clone Elements
256			mainCarouselEl.find(".flex-next").on("click", function() {
257				cloneOwlCarouselEl.OwlCarousel("prev");
258			});
259
260			mainCarouselEl.find(".flex-prev").on("click", function() {
261				cloneOwlCarouselEl.OwlCarousel("next");
262			});
263
264			// Tooltip
265			$("body").append(
266				$("<div />")
267					.attr("id", "mainCarouselTooltip")
268					.addClass("main-carousel-tooltip")
269			);
270
271			var mainCarouselTooltip = $("#mainCarouselTooltip");
272
273			mainCarouselEl.find(".thumb-info").hover(function() {
274
275				var top = $(this).offset().top,
276					left = $(this).offset().left,
277					title = $(this).attr("data-tooltip"),
278					scale = $(this).attr("data-scale");
279
280				if(left < 10 || (left + mainCarouselTooltip.width()) > $(window).width()) {
281					return;
282				}
283
284				mainCarouselTooltip.stop().html(title).css({
285					opacity: 0,
286					top: (top-$(mainCarouselTooltip).height()),
287					left: (($(this).outerWidth()*scale) - mainCarouselTooltip.outerWidth())  / 2 + left + 'px'
288				}).animate({
289					top: "-=30",
290					opacity: 1
291				}, 200);
292
293				$(this).find(".thumb-info-action-icon-center").addClass("appear-animation bounceIn");
294
295			}, function() {
296
297				mainCarouselTooltip.stop().animate({
298					top: "+=30",
299					opacity: 0
300				}, 200);
301
302				$(this).find(".thumb-info-action-icon-center").removeClass("appear-animation bounceIn");
303
304			});
305
306		}
307
308	};
309
310	Home.initialize();
311
312})();