Poudro's blog
CTO / Data Scientist / Problem Solver - Consultant

The Wall Gallery

The Wall Gallery - poudro.com développeur web freelance

I like taking pictures and I like sharing them, but I don’t want to upload my pictures to a third party site… What to do? Build my own gallery system !

This is basically the third instalment of my gallery. It is totally rewritten from scratch. It is going to grow with a few more features and especially have its own WordPress plugin so it could easily be integrated with any WP theme. It’s all open-source, so anyone can use it and modify it. Please let me know if you do.

Check out the demo here.

Once the page is loaded, all you need to do is click on an image to show the full sized picture. When in zoomed mode, navigation works several ways. By hovering the center image, arrows appear to either side and, when clicked, take you to the previous/next picture in order. You can click on any of the thumbnails surrounding the center image to bring that one to the center. Also, you can use keyboard arrow keys, left/right/up/down, to navigate in the corresponding direction. Finally, on devices, you can swipe in the direction of choice to move in the same way as with keyboard keys. To return to normal mode, click any of the close icons that appear when hovering the center image or simply press the escape key.

The whole point is to make things simple, so there are few options in the javascript itself and some CSS styling for looks. For starters, this is powered by the Mootools framework. I like mootools because it integrates well effects and selectors into a lightweight package. It’s pretty fast and has nice objective definitions. So you’ll require your own copy (or the google API version or anything else). At the time of writing this, the Mootools Core version is 1.3.2. The gallery also requires the “Asset” item from the Mootools More builder (version right now). Nothing else is required and you can get these in the bundle. You’ll need to include Wall.js in your code after mootools.

In the html, you need to put all your pictures into a single element which has an id (in the demo it is “global”). To speed up initial loading, I like to create thumbnails of the full-sized pictures, but this is not compulsory (although the zoomed version of the thumbnails is the full size of the thumbnail). What is compulsory though, is that what is shown when the page loads are the <img> tags (where I put the thumbnails) and these need to be set within <a> anchors to the full-sized pictures (or possibly themselves). It could look something like this :

  <div id="global">
    <a href="bigpic.jpg"><img src="thumbnail.jpg" alt="some text about the image"/></a>

For those unfamiliar with mootools, once everything is loaded, to launch the Wall you simply need to write (replacing ‘global’ with the id you have chosen for the container) :

  <script type="text/javascript">
    var gallery;
      gallery = new Wall('global');

and you’re done.

As a mootools Class, there are options you can pass upon instantiation of the gallery. These are mostly useful to control the ‘title’ text of the added elements. The complete list and defaults :

showAlt: true   => displays the alt text of the thumbnail on hover within the gallery
magnify: true   => if set to false, you cannot go to zoom mode (not really of any use...)

magnifyText: 'Magnify'   => the title text of the magnify icon
closemagnifyText: 'Back to gallery mode'   => the title text of the close buttons

callbackOnImLoad:null   => a callback function for image loads, it takes one argument : the image element

(and a few more only those that know mootools will want to see and they are self explanotory within the code...)

To use these options, you need to modify the syntax of the instantiation to something like this :

gallery = new Wall('global', {option1:value1, option2:value2...});

If, like me, you use an analytics, you might find useful the ‘callbackOnImLoad’ option. It allows the definition of a callback function triggered when a picture is ‘seen’ by the user. As an example, in the demo it is integrated with my google analytics tracker and sends an event whenever an image is loaded (in zoomed mode only, the hover doesn’t do any tracking). That way, in the “Event Tracking” submenu of “Content” on my analytics page, I can see what pictures are the most popular.

As for styling, most of it is done via CSS. The classes you might need to modify are all present in the wall.css included in the bundle. The parts that are not in the CSS concern image positionning and things like that, so shouldn’t be of concern.

Please feel free to contact me with any feedback and/or suggestions you might have using my contact page. Have fun… :)

17 Aug 2011
Tags :