The jAlbum family of skins has got a new member - Zigzag. This skin has a modern, responsive and clean design suitable not only to create galleries, but whole sites. We think Zigzag will be ideal for many smaller web sites presenting the works of not just photographers, but any smaller business, organization or things you are passionate about.

Zigzag doesn't use the classic index page->closeup navigation that are typical for jAlbum galleries, instead, images and videos are presented in large format along on the index page with possible longer descriptive texts. On desktop computers, the items are laid out in a zigzag fashion alternating between left and right aligned images, but on smaller devices such as tablets and mobile phones, it switches layout to alternate between images and text vertically.

 Zigzag also enables an "introduction section" at the top of the page where there is space for both a large header and corner logo, larger title and longer introduction text. Zigzag can be customized in many ways without the need to tweak the code (which is fine too by the way, -this is open source). Zigzag naturally also supports modern jAlbum features like custom pages, web locations, videos and hidpi images.

Download Zigzag today. Let us know what you think and do share your creations created with it!

Zigzag requires jAlbum 15.3 as it uses a more modern and easy API. We hope Zigzag will encourage you to to use as base for your own skins. If you know anything about css and html, check out Tools->Skin developer->Edit skin files!

The story behind

This skin is jointly developed by me, Anders and Laza ("Team jAlbum"). We share office space in Stockholm, Sweden with several companies, mainly for social networking reasons. I was then introduced to the product Braskotten by a fellow "colleague" and web designer -Jennie Hagman. This small site presents a clever way to kindle your fireplace using pine cones. I admired the site design and thought to myself "hey, a jAlbum skin could produce that kind of design too" so we set off to produce a skin with the capability to mimic that look. (We did write the code from ground-up though). Here is our initial take on it. We also added support for sub folders, so if you look at the bottom of that gallery there is a section about Pistachio ice cream making. Totally unrelated, but one of my passions :-).

Once we were able to mimic the look we set off to make the look customizable and added a skin user interface. This way of producing a skin proved to be very effective. Start by being inspired by an existing design, then set up a sample jAlbum project and create a new skin. Focus on getting the css+html right first (files "index.htt" and "common.css"), then write the skin settings user interface ("onload.bsh"). Our Developer Center is a good resource as well as checking out the source code from other skins. Here's finally another sample gallery produced with Zigzag.

I finally wish to thank Braskotten and Jennie Hagman for being able to use this design as inspiration for Zigzag.

We're proud to tell that jAlbum 15 has been awarded Editor's Pick in Informer.com - one of the leading software catalogues today. jAlbum's flexibility, ease of use and high quality result were the main factors that motivated their top rating. Read full review.

I can imagine one of the main reasons people choose jAlbum over simpler solutions is the wide choice of interaction possibilities the skins offer. For instance Turtle skin has offered a so-called feedback tool, through which visitors could have left feedback. When I made the new Tiger skin, my goal was to offer nearly the same functionality as Turtle did. There were some exclusions though, like the aforementioned feedback tool. The reason why Tiger did not offer this from the start was that I always planned to renew it. Passing a big chunk of data to the email client is impossible because of operating systems limitations. Probably this is due to security reasons, as the mechanism is the same as opening a normal web link. And once a link is longer than 2048 characters it might get suspicious.

Finally I gave in to user requests, and implemented this feature in Tiger too. Once I was there, I tried to make it better too. The new tool is based on a template, so you can customize the user experience widely. By default the tool offers commenting on the album and on selected photos, but you can easily tweak it to let visitors order photos too. There are a lot of users who would like to avoid PayPal as the only payment method. I can see the point. PayPal is not present in every country, they have a margin, and have some crazy restrictions you might not want to undertake.

With this new kiosk mode you can collect orders through email, and manage the payment by yourself. Be aware though this little tool not nearly as sophisticated as the PayPal cart. No calculations, no discount coupons, no shipping cost, and so on. It’s just the barebones, still can be sufficient for simpler tasks. In the future the possibility of sending mails through the server’s mail() function might also be added.

One another field it excels Turtle is that it can be configured to provide machine-readable output. It needs some coding knowledge – I admit – but by using this option you can automate the ordering process. Just read the email as a javascript variable, and you can decode the form with the stringify() method right away.

The limitation in sending large amount of data has also been circumvented by offering the user to copy / paste the data manually to the email client if the data is too big for the OS to pass.

Sample albums

1. Feedback

This album was made with the default Feedback options (see Settings → Tiger → Sections → Feedback). I’ve only added my email address and added instructions both in the “box” and for the popup window.

2. Kiosk

This other album was made with a customized “Feedback template” (see Settings → Tiger → Sections → Feedback → Feedback template in order to offer size and quantity boxes. Here’s the code I used:

<!-- items:start -->
<form class="inline">
	<select name="type">
		<option name="9x13">9&times;13 cm (&euro; 0.2)</option>
		<option name="10x15">10&times;15 cm (&euro; 0.3)</option>
		<option name="15x21">15&times;21 cm (&euro; 0.5)</option>
		<option name="21x30">21&times;30 cm (&euro; 1)</option>
		<option name="A1">A1 poster (&euro; 10)</option> 		
		<option name="download">Download (&euro; 5)</option> 		
	</select>
	<input type="number" name="copies" min="1" max="50" value="1" title="Copies (max. 50)" /> 
</form>
<!-- items:stop -->
<div class="row">
	<div class="large-8 large-centered medium-10 medium-centered columns"> 			
		<form name="address">
			<label for="name">Name</label>
			<input name="name" type="text" placeholder="Your name"/>
			<label for="street">Street address</label>
			<input name="street" type="text" placeholder="Street address"/> 
			<label for="city">City</label> 
			<input name="city" type="text" placeholder="City" /> 
			<label for="postcode">Post code</label>
			<input name="postcode" type="text" /> 			
			<label for="contry">Country</label> 
			<input name="country" type="text" placeholder="Country" />
		</form>
	</div>
</div>

As you might have noticed, there are two special delimiter lines (marked in red). Their purpose is to mark the repeating code that should be attached to every selected item. The code part before <!-- items:start --> will appear above the items, meanwhile the code after <!-- items:stop --> will be placed below them. Only the contents of the <input>, <textarea> and <select> fields will be sent, so you can add labels, comments – those will not get into the email – only the user input. (Naturally, the file name and path will also be sent, so you can easily identify the photo.) You can also add hidden input elements if you need some special info, e.g. <input name="filesize" type="hidden" value="${fileSize}">. As you can see the skin can process image variables too.

I hope you’ll find this little tool useful. If you have any questions, please let me know in the skin’s forum – we’re glad to help!