How to use the panzoom.interval function in panzoom

To help you get started, we’ve selected a few panzoom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github marijnkampf / Random-Photo-Screensaver / RPS 4 / data / js / monitor.js View on Github external
// Fix video pausing after show animation completes
	if (settings.mediatype == "video") $("video",card).on(videoFixEvents.join(" "), function (e) { }).one("suspend pause",function(){this.play()})
	var effect = "";
	effectCSS = "";
	if (settings.animated == "true" && settings.effect != undefined) {
		effect = JSON.parse(settings.effect);
		if (effect.effect == "panzoom") {
			effectCSS = " \
				@keyframes panzoom { \
					from { transform: scale(" + settings["panzoom.scale.from"] + ") " + settings["panzoom.offset.from"] + settings["panzoom.rotate"] + " } \
					to { transform:  scale(" + settings["panzoom.scale.to"] + ") " + settings["panzoom.offset.to"] + settings["panzoom.rotate"] + " } \
				} \
				\
				.front { \
					animation: panzoom " + settings["panzoom.interval"] + "s linear alternate infinite; \
				} \
			";
			effect.effect = "fade";
		}
	}
	try {
		$("#panzoom")[0].innerHTML = effectCSS;
	} catch(e) { }

	// ToDo: Wait for images to finish rendering before start show
	$("#rolodex").waitForImages().done(function(source, settings) {
		if (settings.animated == "true" && settings.effect != undefined) card.show(effect);
		else card.show("fade", 250);
		while($("#rolodex .card").length > 2) {
			first = $("#rolodex .card").first();
			first.hide();

panzoom

Extensible, mobile friendly pan and zoom framework (supports DOM and SVG).

MIT
Latest version published 3 years ago

Package Health Score

56 / 100
Full package analysis