We are constantly improving Galleria and one of our main tasks is to adapt the gallery presentation to the device trends that emerges through time. And for the upcoming 1.3 version we are adding a true native-style touch navigation interaction for a more fluid and intimate feel when navigating through images on touch devices.
One of the most popular questions from Galleria users is: “How can I add a menu that loads different sets into my gallery when clicked?”. This small guide/tutorial will explain step by step how this is done. At the same time we will create a nice looking gallery that you can use as a starting point when building your Galleria-powered portfolio site.
A much requested feature in Galleria is the ability to add plain HTML above the image that also follows the chosen transition. Think of it as an integrated layer with HTML content above the image that follows the image. This is useful f.ex if you want presentational text or captions in combination with the images in presentations or galleries of any kind.
In 1.2.5 we are adding a new data key called layer. Using this, you can add any HTML that will be placed above and stretched across the image. You can add the layer data using JSON or extract HTML using the dataConfig option.
We just pushed a new Picasa plugin to the repo. This plugin works much the same as the Flickr plugin, with a few exceptions such as a more limited set of methods available and a wider range of cached thumbnails.
Just a quick thanks to Kamil Kloch, who recommended us to use translate3d for some CSS3 animations; mobile Safari now displays really smooth animations for all transitions. Try the 1.2.4b5 version yourself in your mobile (we also added a swipe option):
http://aino.github.com/galleria/demos/translate3d/
The 1.2.4b5 code is here:
As a part of improving Galleria for mobile devices, we are now looking over the touchstart event. Up to 1.2.3, we replaced many click events with touchstart for mobile devices to create a snappier experience. While this normally works quite well, it also interferes with other default behaviours and the result can sometimes be a “buggy” experience.
A feature we have been talking about since launch is the ability to animate transitions using CSS3 for better performance on mobile safari and desktop browsers like Chrome and firefox 4. But since FF4 was still in beta and we needed a stable fallback, we paused this idea and focused on stable jQuery-powered animations instead.
For the 1.2.4 launch, we are adding CSS3 transitions for many animations, such as all image transitions and carousel animations. We built a new Utils method for handling all animations, falling back to jQuery if CSS3 animations are not supported.
Just a quick post to let you know that we stabilized the 1.2.4 version to beta 1. You can try the beta today at GitHub.
The 1.2.4 version adds much better error handling to spot fatal errors easier on all platforms. We also added an experimental canvas-based technique for rescaling thumbnails.
Changelog for 1.2.4 so far:
We pushed Galleria 1.2.3 to cdnjs yesterday, wich means that you can use their Amazon-powered cloud CDN to host the galleria core files.
F.ex, the 1.2.3 minified source can now be accessed here:
http://ajax.cdnjs.com/ajax/libs/galleria/1.2.3/galleria.min.js
Hopefully this project will be maintained and that the authors will find a way to monetize the service eventually, since running a CDN is a big responsibility. There is a discussion at their support forums that brings up the subject, but the authors are still convinced that a few pledged dollars will be sufficient since hosting scripts is very lightweight.
You can use the CDN right now by replacing thelocal galleria-1.2.3.min.js script tag with:
<script src="http://ajax.cdnjs.com/ajax/libs/galleria/1.2.3/galleria.min.js"></script>