Boxshot 3D Packaging Mockup Software
Download Download Download
Download for Windows Download for Mac Download for Mac Dropdown arrow

Creating Snapshot Buttons with JavaScript

Koru automatically creates snapshot buttons for you and you can style them up with CSS, which covers most of the possible usage cases, but sometimes you may need a very different way to control snapshots and the default buttons may not work at all. What’s then?

No worries, Koru lets you go even further and control the buttons yourself. All you need is to tell Koru that you’ll take care about the buttons with a single JavaScript command. Koru will not create the default buttons and the rest is up to you. This tutorial will show you how.

Creating a Template

When Koru exports a scene, it wraps it up in some HTML called “template”. Template decides whether the scene will be fullscreen or not, template customizes snapshot buttons and can do some other scene control. Finally, template may simply add your logotype to the caption of the page. Any time you need a custom HTML output in Koru, you make a template.

You can read more about templates here, but best of all you don’t really need to start from scratch. Koru comes with a couple of pre-defined templates that you can use to kick-start your own. Let’s clone one of the existing ones now.

Start Koru and click its File menu. In the drop-down list select Open Templates Library item. You will see a folder on your disk where Koru stores its templates. Find a folder called snapshots and make a clone of it. On Mac you need to right-click it and select Duplicate, on Windows you can simply copy and paste it. Rename the new folder to my-snapshot-buttons and enter that folder.

You will see three files inside:

Open _readme.txt with your text editor and modify its first line, so it contains just two words “Javascript Buttons”, then replace the rest of the file with a brief description of what this template is for. The end result should look like this:

Javascript Buttons
This template disables standard buttons and creates its own with javascript.

Save the file, then switch back to Koru and make a simple scene with some snapshots. Then try to export it to disk using the new template Javascript Buttons - you will see the buttons look different. This happens because the snapshots template we cloned already has the javascript code that creates buttons by the snapshots from the scene.

Let’s have a look at it. Make sure you are familiar with JavaScript before reading further.

Enumerating Snapshots

Open the _template.html file in the javascript-buttons folder you’ve just created with your favourite HTML editor and scroll down to the bottom of the file where the script is located. You will see the script like this:

<script type="text/javascript">
function koruInit(koru) {
	koru.createSnapshotButtons = false;
	koru.addEventListener('loadend', onLoadEnd);
}
function onLoadEnd(event) {
	var koru = event.koru;
	var row = document.getElementById('snapshots-row');
	for (var i in koru.snapshots) {
		var snapshot = koru.snapshots[i];
		if (snapshot.visible) {
			var a = document.createElement('a');
			a.href = "javascript:void(0)";
			a.snapshot = snapshot;
			a.onclick = function(event) {
				this.snapshot.apply();
			};
			a.innerHTML = snapshot.name;
			row.appendChild(a);
		}
	}
}
</script>

It has two functions: koruInit() and onLoadEnd(). The first one gets called when the Koru engine is started. It sets up a handler for “loadend” event that Koru sends when it finishes loading the scene. The other thing is that it sets createSnapshotButtons property to false which tells Koru that you don’t need the standard buttons.

When Koru loads the scene it doesn’t create the default buttons as you asked it and finally it calls your onLoadEnd() function. The function gets Koru object and also gets the HTML element with “snapshots-row” identifier that will contain the new buttons.

The function then loops through the snapshots, check if snapshot is visible and makes a link-based button for each of the snapshots. It also adds a handler to each button that activates the snapshot.

That is all, easy!

More Options

You are not limited with buttons when dealing with snapshots manually. That’s HTML and JavaScript, so you can make a list, drop-down control, links or buttons the way you need. You may add buttons directly to HTML code, add handlers for them that look for specific snapshots and activate them.

You can use the same idea to automatically start a snapshot when the scene is loaded. Just replace the loop in the code above with getting the first (or any other) snapshot and directly calling that apply() method on it.

That’s All!

If this is too much for you and all you need is to change the buttons appearance, have a look at our other tutorial that shows how to customize snapshot buttons with CSS.