How to build a carousel using JSON and template engine

This is a prototype of a project done on a client website. For their home page, the client wanted to have an events panel with a carousel of all the speakers at their upcoming event. The carousel was to include the speaker’s name, avatar, and a short bio.

To keep the speaker’s information easy for the client to update, we decided to build out a JSON file with the speaker’s name, short name to find the avatar image, and a short bio. This time we decided to template the JSON file using mustache.js.

What is a JSON file?

JSON stands for Javascript Object Notation. It is a text file used to exchange data between browser and server. The data is stored as javascript objects.

Example of a JSON file

{ "speakers" : [
{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham",
"reknown":"Royal Academy of Painting and Sculpture",
"bio":"Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled \"The Un-Collection\" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different"
}
}

Why Use Templating?

• Templating makes working with data a breeze. It is essentially a combination of data and layout.
• The advantage of using templating is to keep the data and how that data is presented, separate from each other.
• It is usually used for repeating data records which are then merged with one layout and presented to the user.
• The data is in the JSON file and the layout is specified in the template script embedded in the HTML.
• Placeholders are placed in the layout to specify which parts of the data records are going to be used.
• Both the data and the layout are fed to the templating engine to create the finished HTML layout.
• One application that uses repeating data records and presents it using one layout is Twitter.

About Mustache Templating

Mustache is an open-source template system developed for languages like Javascript and PHP. We are using Mustache as the templating system for this project. Mustache Templates have tags as indicators for the placeholders where data will be added in the final layout

Mustache Templating snippet:

<script id="speakerstpl" type="text/template">
{{#speakers}}
<div class="speaker">
<img src="images/{{shortname}}_tn.jpg" alt="Photo of {{name}}" />
<h3>{{name}}</h3>
<h4>{{reknown}}</h4>
<p>{{bio}}</p>
</div>
{{/speakers}}
</script>

The html code on the page for the carousel

<div id="speakerbox">
<a href="#" id="prev_btn">&laquo;</a>
<a href="#" id="next_btn">&raquo;</a>
<div id="carousel"></div>
</div>

jQuery code snippet

$(function() {
$.getJSON('data.json', function(data) {
var template = $('#speakerstpl').html();
var html = Mustache.to_html(template, data);
$('#carousel').html(html);
$('#carousel').cycle({
fx: 'fade',
pause: 1,
next: '#next_btn',
prev: '#prev_btn',
speed: 500,
timeout: 10000
});
});
});

I hope you found this article useful and interesting.