陈孟林 ChanMenglin

Custom Image Slider

Wanted to experiment with this prototype of image slicing and combining the pieces together to create the full image in a slider.

	const width = window.innerWidth
	const height = window.innerHeight
	const NS = "http://www.w3.org/2000/svg"
	const svg = document.createElementNS(NS, "svg")
	const size = Math.min(width, height) * 0.75
	svg.setAttribute("viewBox", `0 0 ${size} ${size}`)
	svg.setAttribute("width", `${size}px`)
	svg.setAttribute("height", `${size}px`)
	svg.setAttribute("xmlns", NS)
	document.body.appendChild(svg)

	const width = window.innerWidth
	const height = window.innerHeight
	const NS = "http://www.w3.org/2000/svg"
	const svg = document.createElementNS(NS, "svg")
	const size = Math.min(width, height) * 0.75
	svg.setAttribute("viewBox", `0 0 ${size} ${size}`)
	svg.setAttribute("width", `${size}px`)
	svg.setAttribute("height", `${size}px`)
	svg.setAttribute("xmlns", NS)
	document.body.appendChild(svg)

	<body id="body">
	<form id="form">
	<input autocomplete="off" id="input" type="text">
	<button id="button">Go</button>
	</form>
	<svg version="1.1" baseProfile="full" height="100%" id="canvas" width="100%" xmlns="http://www.w3.org/2000/svg">
	<rect id="bg" fill="transparent" />
	<g id="constellation"></g>
	</svg>
	</body>

	const frame = new Frame("fit", 1024, 768, "#000", "#111");
	frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	let stage = frame.stage;
	let stageW = frame.width;
	let stageH = frame.height;

	// REFERENCES for ZIM at http://zimjs.com