https://italianshotclub.com/js/videohandler.js

1enable_vid_swiping = 1;
2enable_vid_hover = 1;
3let interv;
4let animate_selector = '.stdvideo:not([controls]), .stdimage[cnt][cnt!=1]';
5this.stdthis = function (idx) {
6	if (idx == null) {
7		return;
8	}
9	cnt = idx.children("img").attr('cnt');
10	v = idx.children("img").attr('v');
11	v = parseInt(v);
12	v = (v + 1) % cnt;
13	sr  = idx.children("img").data('srcset' + v);
14	src = idx.children("img").data('src' + v);
15	idx.children("img").attr('v', v);
16	if (idx.children("img").attr("srcset") != sr) {
17		idx.children("img").attr('srcset', sr);
18	}
19	if (idx.children("img").attr("src") != src) {
20		idx.children("img").attr('src', src);
21	}
22	if (v == 0 && idx.attr("nolooptrigger") == "1") {
23		clearInterval(interv);
24		ovidimg = currvidimg;
25		currvidimg = (currvidimg + 1) % $(animate_selector).length;
26		startvidimg();
27		return;
28	}
29}
30// Determines the image zoom level
31// If iwidth and swidth aren't passed along, this is a general purpose
32// combination of retina level * zoom level
33// If iwidth and width are passed along, the zoom level
34// for an individual image is calculated.
35function pixelRatioZoom(iwidth, swidth) {
36	zr = 1;
37	if (!!("undefined" != typeof document.documentElement.ontouchstart)) {
38		zr = screen.width / $(window).width();
39	}
40	let dpr = (window.devicePixelRatio) ? window.devicePixelRatio : 1;
41	let zm = NaN;
42	if (isNaN(zm)) {
43		try {
44			zm = document.documentElement.clientWidth / window.innerWidth;
45		} catch (e) {
46			zm = NaN;
47		}
48	}
49	if (isNaN(zm)) {
50		try {
51			zm = screen.deviceXDPI / screen.logicalXDPI
52		} catch (e) {
53			zm = NaN;
54		}
55	}
56	zm = (isNaN(zm)) ? 1 : zm;
57	ret = zm * dpr * zr;
58	if (typeof iwidth == "undefined" || iwidth == 0) {
59		return ret;
60	}
61	if (typeof swidth == "undefined" || swidth == 0) {
62		return ret;
63	}
64	// If the image display width and the actual image width are defined, factor that into image zoom.
65	return zm * dpr * zr * (iwidth / swidth);
66}
67// Given an image, calculate the zoom level for the image
68// And subsequently, what suffix it recommends.
69function getSuffixFileZoom(v, pfix) {
70	let ret = {};
71	if (typeof pfix == "undefined") {
72		pfix = "src0";
73	}
74	ret.zoom = pixelRatioZoom(v.width, $(v).attr(pfix + "_1x_width"))
75	ret.suffix = "_1x";
76	ret.src = "";
77	// Uncomment this if you want to disable retina images.
78	// Uncomment and change to 2.0 if you want to force retina images.
79	// ret.zoom = 1.0;
80	if (ret.zoom > 3.3 && ($(v).attr(pfix + "_4x") != undefined)) {
81		ret.src = $(v).attr(pfix + "_4x");
82		ret.suffix = "_4x"
83	} else if (ret.zoom > 2.3 && ($(v).attr(pfix + "_3x") != undefined)) {
84		ret.src = $(v).attr(pfix + "_3x");
85		ret.suffix = "_3x"
86	} else if (ret.zoom > 1.3 && ($(v).attr(pfix + "_2x") != undefined)) {
87		ret.src = $(v).attr(pfix + "_2x");
88		ret.suffix = "_2x"
89	} else {
90		if ($(v).attr(pfix + "_1x") != undefined) {
91			ret.src = $(v).attr(pfix + "_1x");
92		} else {
93			ret.src = $(v).attr(pfix);
94		}
95	}
96	return ret;
97}
98suffix = "_1x";
99let zoom = pixelRatioZoom();
100let z_w = NaN;
101let z_h = NaN;
102try {
103	z_w = window.innerWidth;
104	z_h = window.innerHeight;
105} catch (e) {
106	alert(e)
107}
108// This will swap in new images if page is scrolled
109// Or zoomed in.
110function szhandler() {
111	let newzoom = pixelRatioZoom();
112	let z_nw = NaN;
113	let z_nh = NaN;
114	try {
115		z_nw = window.innerWidth;
116		z_nh = window.innerHeight;
117	} catch (e) {
118		return;
119	}
120	if (isNaN(z_w) || isNaN(z_h) || isNaN(z_nw) || isNaN(z_nh)) {
121		return;
122	}
123	// If this is just scrolling, return
124	// If zooming or resizing, do not return.
125	if ((z_w == z_nw) && (z_h == z_nh) && (newzoom == zoom)) {
126		return;
127	}
128	z_w = z_nw;
129	z_h = z_nh;
130	zoom = newzoom
131	$(".stdimage").each(function (index) {
132		o_img = $(this).attr("src");
133		let imageinfo = getSuffixFileZoom(this);
134		n_img = imageinfo.src;
135		if (n_img != o_img) {
136			$(this).attr("src", n_img);
137		}
138	});
139	$(".stdvideo").each(function (index) {
140		o_img = $(this).attr("poster");
141		let imageinfo = getSuffixFileZoom(this, "poster");
142		n_img = imageinfo.src;
143		if (n_img != o_img) {
144			$(this).attr("poster", n_img);
145		}
146	});
147}
148// zoom / scroll handler.
149sch = 0;
150if (sch == 0) {
151	try {
152		document.addEventListener("scroll", szhandler, true);
153		sch = 1;
154	} catch (e) { }
155}
156if (sch == 0) {
157	try {
158		window.attachEvent("onscroll", szhandler);
159		sch = 1;
160	} catch (e) { }
161}
162$(window).resize(function () {
163	szhandler();
164});
165interv = 0;
166// video loading code
167let loadnew = 0;
168let currvidimg = -1;
169let ovidimg = -1;
170let disable_vidimgcheck = 0;
171this.StdImageHandler = function () {
172	imgs = [];
173	$(".stdimage").ready(function () {
174		//! Put .stdimage images into place.
175		$(".stdimage").each(function (index) {
176			let imageinfo = getSuffixFileZoom(this);
177			$(this).attr("src", imageinfo.src);
178		});
179		//! Preload .stdimage rotated images.
180		$(".stdimage").each(function (index) {
181			cnt = $(this).attr('cnt')
182			if (cnt < 2) {
183				return;
184			}
185			let imageinfo = getSuffixFileZoom(this);
186			let suffix = imageinfo.suffix;
187			for (c = 0; c < cnt; c++) {
188				if ($(this).attr('src' + c + suffix) != undefined) {
189					itr = imgs.length;
190					imgs[itr] = new Image;
191					imgs[itr].src = $(this).attr('src' + c + suffix)
192				}
193				if ($(this).attr('src' + c) != undefined) {
194					itr = imgs.length;
195					imgs[itr] = new Image;
196					imgs[itr].src = $(this).attr('src' + c)
197				}
198			}
199		});
200	});
201	//! Load .stdvideo 1x/2x/3x/4x poster into place.
202	$(".stdvideo").ready(function () {
203		$(".stdvideo").each(function (index) {
204			let imageinfo = getSuffixFileZoom(this, "poster");
205			$(this).attr("poster", imageinfo.src);
206		});
207	});
208	//! Different behavior for mouse vs tablet
209	if (matchMedia('(pointer:fine)').matches) {
210		if (enable_vid_hover == 1) {
211			init_mousehoverbehavior();
212		}
213	} else {
214		init_touchbehavior();
215	}
216}
217function init_touchbehavior() {
218	if ($(animate_selector).length != 0) {
219		vidimgcheck();
220		startvidimg();
221	}
222}
223function init_mousehoverbehavior() {
224	$(".stdvideo:not([controls])").hover(function (e) {
225		$(this).next(".videoloadline").addClass("videoloadline_on");
226		$(this).get(0).play();
227	}, function () {
228		$(".videoloadline").removeClass("videoloadline_on");
229		$(this).get(0).pause();
230		$(this).get(0).load();
231	});
232	$('.stdvideo:not([controls])').on('playing', function () {
233		setTimeout(() => $(".videoloadline").removeClass("videoloadline_on"), 800);
234	});
235	$(".stdimage").hover(function (e) {
236		stdthis($(this));
237		interv = setInterval(stdthis, 800, $(this));
238	},
239		function (e) {
240			clearvidimg(this)
241		});
242}
243function clearvidimg(e) {
244	if ($(e).get(0).nodeName == "VIDEO") {
245		$(e).get(0).load();
246		$(e).removeAttr("loop");
247		$(".videoloadline").removeClass("videoloadline_on");
248	} else {
249		cnt = $(e).children("img").attr('cnt');
250		if (cnt > 1) {
251			$(e).children("img").attr('v', 0);

252			$(e).children("img").attr('srcset', $(e).children("img").data('srcset0'));		
253			$(e).children("img").attr('src', $(e).children("img").data("src0"));
254			
255		}
256	}
257	clearInterval(interv)
258	interv = 0;
259}
260let restart_check = 0;
261function vidimgcheck() {
262	if (disable_vidimgcheck == 1) {
263		return;
264	}
265	if (restart_check == 1) {
266		startvidimg();
267		restart_check = 0;
268		return;
269	}
270	let is_new = 0;
271	if (currvidimg == -1) {
272		currvidimg = 0;
273		is_new = 1;
274	}
275	vd = $(animate_selector).get(currvidimg);
276	if (vd == undefined) {
277		currvidimg = 0;
278		startvidimg();
279		return;
280	}
281	if ($(vd).get(0).nodeName == "VIDEO") {
282		if (!loadnew && !vd.paused && !isScrolledIntoView(vd)) {
283			loadnew = 1;
284			if (is_new == 0) {
285				clearvidimg(vd)
286				$(animate_selector).off();
287			}
288			startvidimg();
289			is_new = 0;
290			return;
291		}
292	} else {
293		if (!loadnew && !isScrolledIntoView(vd)) {
294			clearvidimg(vd)
295			$(animate_selector).off();
296			startvidimg();
297			return;
298		}
299	}
300}
301function startvidimg() {
302	if (disable_vidimgcheck == 1) {
303		return;
304	}
305	if (enable_vid_swiping == 1) {
306		$(animate_selector).bind('touchstart', function (e) {
307			disable_vidimgcheck = 1;
308			vlx = this
309			// Unbind all video activity
310			$(animate_selector).unbind("ended");
311			$(".stdvideo:not([controls])").each(function (e) {
312				if ($(vlx)[0] !== $(this)[0]) {
313					if (!$(this).get(0).paused) {
314						$(this).get(0).load();
315					}
316					$(this).next(".videoloadline").removeClass("videoloadline_on");
317				}
318			});
319			// Unbind all photo activity and reset to slot.
320			$(".stdimage").each(function () {
321				clearvidimg(e);
322			});
323			if ($(this).get(0).nodeName == "VIDEO") {
324				$(this).attr("loop", "loop")
325				if (!$(this).get(0).paused) {
326					$(this).next(".videoloadline").removeClass("videoloadline_on");
327				} else {
328					$(this).next(".videoloadline").addClass("videoloadline_on");
329					this.play();
330				}
331			} else {
332				$(this).removeAttr("nolooptrigger");
333				stdthis($(this));
334				interv = setInterval(stdthis, 800, $(this));
335			}
336		});
337	}
338	if ($(animate_selector).length == 0) {
339		return;
340	}
341	let loopcount = 0;
342	do {
343		loopcount++;
344		vd = $(animate_selector).get(currvidimg);
345		if (vd == undefined) {
346			currvidimg = (currvidimg + 1) % $(animate_selector).length;
347			continue;
348		}
349		isv = isScrolledIntoView(vd)
350		if (!isv) {
351			currvidimg = (currvidimg + 1) % $(animate_selector).length;
352			if (loopcount > $(animate_selector).length) {
353				// Nothing is on screen. We wait until the user scrolls or screen is resized to try again.
354				currvidimg = -1;
355				loadnew = 0;
356				restart_check = 1;
357				return;
358			}
359		}
360	} while (!isv);
361	if (ovidimg != -1 && currvidimg != ovidimg) {
362		olvd = $(animate_selector).get(ovidimg);
363		if ($(olvd).get(0).nodeName == "VIDEO") {
364			$(olvd).get(0).load();
365		} else {
366			clearInterval(interv)
367		}
368	}
369	if ($(vd).get(0).nodeName == "VIDEO") {
370		// Take out loops on video
371		$(vd).removeAttr("loop");
372	}
373	$(animate_selector).off();
374	// Only applies for video
375	$(animate_selector).on('ended', function () {
376		ovidimg = currvidimg;
377		currvidimg = (currvidimg + 1) % $(animate_selector).length;
378		startvidimg();
379		return;
380	});
381	// Only applies for videos
382	$(animate_selector).on('playing', function () {
383		$(".videoloadline").removeClass("videoloadline_on");
384	});
385}
386function isScrolledIntoView(elem) {
387	if (!$(elem).is(":visible")) {
388		return false;
389	}
390	let docViewTop = $(window).scrollTop();
391	let docViewBottom = docViewTop + $(window).height();
392	let docViewLeft = $(window).scrollLeft();
393	let docViewRight = docViewLeft + $(window).width();
394	let elemTop = $(elem).offset().top;
395	let elemBottom = elemTop + $(elem).height();
396	let elemLeft = $(elem).offset().left;
397	let elemRight = elemLeft + $(elem).width();
398	return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && (elemRight <= docViewRight) && (elemLeft >= docViewLeft));
399}
400// INITIALIZE
401$(document).ready(function () {
402	StdImageHandler();
403});