Template example

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="https://github.com/douglascrockford/JSON-js/raw/8e0b15cb492f63067a88ad786e4d5fc0fa89a241/json2.js"></script>
<script src="http://spaceforaname.com/galleryview-3.0/galleryview/js/jquery.galleryview-3.0b4.js"></script>
<link rel="stylesheet" href="http://spaceforaname.com/galleryview-3.0/galleryview/css/jquery.galleryview-3.0b4-dark.css">
<script src="http://spaceforaname.com/galleryview-3.0/galleryview/js/jquery.timers-1.2.js"></script>
<script src="http://spaceforaname.com/galleryview-3.0/galleryview/js/jquery.easing.1.3.js"></script>
<input type="button" id="load" value="Load without Template" />
<input type="button" id="loadTemplate" value="Load via Template" />

<ul id="gallery">
</ul>

<script id="imageTemplate" type="text/html">
    <li>
        <img src="${image}" /> 
    </li>
</script>

JavaScript

$(function() {

    var images = [
        {
        image: "http://farm4.static.flickr.com/3484/3774165094_014eda30ac.jpg",
        width: 500},
    {
        image: "http://farm1.static.flickr.com/102/272679363_2345ddd048.jpg",
        width: 500}
    ];

    //Using jquery templates
    $('#loadTemplate').click(function() {

        //Required only for jsFiddle
        //Replace this with $.getJSON('fred.json', function(result) {
        $.post('/echo/json/', {
            "json": JSON.stringify(images)
        }, function(result) {
            //Result from Server
            $("#imageTemplate").tmpl(result).appendTo("#gallery");

            //Once all ul are created call the gallery function
            $("#gallery").galleryView();
            //http://johnpatrickgiven.com/jquery/flickr-gallery/
            //$('#gallery').flickrGallery('FLICKR_SET_ID','YOUR_FLICKR_API_KEY');
        });

    });
    
    //Without Templates
    $('#load').click(function() {

        //Required only for jsFiddle
        //Replace this with $.getJSON('fred.json', function(result) {
        $.post('/echo/json/', {
            "json": JSON.stringify(images)
        }, function(result) {
            //Result from Server
             $.each(result, function() {
                 $("#gallery").append($("<li>").append($("<img>").attr("src", this.image).attr("width", this.width)));
             });

            //Once all ul are created call the gallery function
            $("#gallery").galleryView();
            //http://johnpatrickgiven.com/jquery/flickr-gallery/
            //$('#gallery').flickrGallery('FLICKR_SET_ID','YOUR_FLICKR_API_KEY');
        });

    });    
    
});