JSON project

by Tim Morgan

HTML

<!DOCTYPE html>
<title>JSON Carousel</title>
<link href='http://fonts.googleapis.com/css?family=Wendy+One|Libre+Baskerville' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
    <div id="speakerbox">     <a href="#" id="prev_btn">&laquo;</a>
	<a href="#" id="next_btn">&raquo;</a>

        <div id="carousel"></div>
    </div>
    <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>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(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
                });
            }); //getJSON

        }); //function
    </script>
</body>

</html>

CSS

body {
	background: EEE7D5;
	font-family: 'Libre Baskerville';
}

#speakerbox {
	width: 300px;
	margin: 0 auto;
	background: #93A1A1;
	padding: 1px 20px;
	border-radius: 10px;
	overflow: hidden;
}

#speakerbox h3, #speakerbox h4 {
	font-weight: normal;
	margin: 0;
	padding: 0;
} 

#speakerbox h3 {
	font-size: 2em;
	line-height: .9em;
	font-family: 'Wendy One';
	color: #115F79;
}

#speakerbox h4 {
	color: #973C26;
	font-weight: bold;
	margin-bottom: 5px;
	line-height: 1.2em;
}

#speakerbox img {
	float: right;
	margin-left: 10px;
	border-radius: 10px;
	width: 100px;
}

#speakerbox p {
	color: #1E3A40;
	font-size: .9em;
}

#speakerbox #next_btn, #speakerbox #prev_btn {
	background: #d33682;
	padding: 5px 10px;
	border-radius: 10px;
	margin: 10px 0;
	display: inline-block;
}

#speakerbox a#next_btn, #speakerbox a#prev_btn {
	text-decoration: none;
	color: #FFF;
}

JavaScript

/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/
(function (e, t) {
    var n, r, i = typeof t,
        o = e.document,
        a = e.location,
        s = e.jQuery,
        u = e.$,
        l = {}, c = [],
        p = "1.9.1",
        f = c.concat,
        d = c.push,
        h = c.slice,
        g = c.indexOf,
        m = l.toString,
        y = l.hasOwnProperty,
        v = p.trim,
        b = function (e, t) {
            return new b.fn.init(e, t, r)
        }, x = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,
        w = /\S+/g,
        T = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
        N = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/,
        C = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
        k = /^[\],:{}\s]*$/,
        E = /(?:^|:|,)(?:\s*\[)+/g,
        S = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,
        A = /"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,
        j = /^-ms-/,
        D = /-([\da-z])/gi,
        L = function (e, t) {
            return t.toUpperCase()
        }, H = function (e) {
            (o.addEventListener || "load" === e.type || "complete" === o.readyState) && (q(), b.ready())
        }, q = function () {
            o.addEventListener ? (o.removeEventListener("DOMContentLoaded", H, !1), e.removeEventListener("load", H, !1)) : (o.detachEvent("onreadystatechange", H), e.detachEvent("onload", H))
        };
    b.fn = b.prototype = {
        jquery: p,
        constructor: b,
        init: function (e, n, r) {
            var i, a;
            if (!e) return this;
            if ("string" == typeof e) {
                if (i = "<" === e.charAt(0) && ">" === e.charAt(e.length - 1) && e.length >= 3 ? [null, e, null] : N.exec(e), !i || !i[1] && n) return !n || n.jquery ? (n || r).find(e) : this.constructor(n).find(e);
                if (i[1]) {
                    if (n = n instanceof b ? n[0] : n, b.merge(this, b.parseHTML(i[1], n && n.nodeType ? n.ownerDocument || n...