var NUM=20;
$.each(students,function(index,student){
if (index == NUM ) return false;
$("#studentTemplate").tmpl(student).appendTo("#studentInfo");
});
// Show/Hide div with more info
$('div.contact_more').hide();
var visible = true;
$('a.more').click(function() {
var morelink = $(this);
$(this).parent().next('div.contact_more').slideToggle('slow', function(){
visible = !visible;
morelink.html(visible ? '[+ MORE]' : '[- LESS]');
});
return false;
});
// Flickr API - JSON Request
// Photos from group: http://www.flickr.com/groups/squareimg/
var url='http://api.flickr.com/services/rest/?&method=flickr.groups.pools.getPhotos&group_id=17449586@N00&per_page='+NUM+'&api_key=f024df17cc5149c2c0e84d02bfa8d663&format=json&jsoncallback=?';
// With help from: http://www.viget.com/inspire/using-the-flickr-api/
$.getJSON(url, function(data){
$.each(data.photos.photo, function(key, val){
var s = "";
var photo = val;
var t_url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "t.jpg";
$('.pic:eq('+key+')').attr("src", t_url).attr("alt", photo.title).attr("width", 90).attr("height", 90);
});
});
External resources loaded into this fiddle:
<script id="studentTemplate" type="text/x-jquery-tmpl">
<div class="contact">
<div class="left">
<img class="pic" src="" />
</div>
<div class="right">
<p class="name">${FName} ${LName}</p>
<p class="type">EMAIL</p>
{{if (Email.length > 42)}}
<p class="err">ERROR: Email too long!</p>
{{else}}
<p class="value">${Email}</p>
{{/if}}
<p class="type">PHONE </p>
<p class="value">${Phone}</p>
<p class="type">FAX</p>
<p class="value">${Fax}</p>
</div>
<a href="#" class="more">[+ MORE]</a>
</div>
<div class="contact_more">
<hr>
<div class="left">
<p class="type">STATUS</p>
<p class="value">${Status}</p>
<p class="type">HEIGHT</p>
<p class="value">${Height}</p>
<p class="type">WEIGHT</p>
<p class="value">${Weight}</p>
</div>
<div class="left">
<p class="type">DATE OF BIRTH</p>
<p class="value">${DOB}</p>
<p class="type">CITY, STATE</p>
<p class="value"><a href="http://maps.google.com/maps?q=${Lat},${Lon}(${City},+${State})" target="_blank">${City}, ${State}</a></p>
<p class="type">PROFESSION</p>
<p class="value">${Profession}</p>
</div>
<div class="left">
<p class="type">QUIZES RESULTS</p>
<table>
<tr>
<td>Q1</td>
<td>Q2</td>
<td>Q3</td>
<td>Q4</td>
</tr>
<tr>
<td>${Quizzes[0]}</td>
<td>${Quizzes[1]}</td>
<td>${Quizzes[2]}</td>
<td>${Quizzes[3]}</td>
</tr>
</table>
</div>
<div class="left">
<p class="type">HOMEWORK RESULTS</p>
<table>
<tr>
<td>HW1</td>
<td>HW2</td>
<td>HW3</td>
<td>HW4</td>
</tr>
<tr>
<td>${HW1}</td>
<td>${HW2}</td>
<td>${HW3}</td>
<td>${HW4}</td>
</tr>
</table>
</div>
</div>
<br>
</script>
<div id="studentInfo">
</div>
body {
font: normal 12px/20px "helvetica", arial, sans-serif;
background-color: #F1F1F1;
color: #333333;
}
a {
color: #333333;
}
a:visited {
color: #333333;
}
a:hover {
text-decoration: none;
}
div.contact {
position: relative;
overflow: auto;
border-top: 3px solid #404040;
background-color: #E9E9E9;
width: 400px;
}
div.contact .left {
float: left;
}
div.contact .right {
margin-left: 10px;
margin-top: 1px;
float: left;
}
div.contact .pic {
margin: 5px;
border: 5px solid #F2F2F2;
}
p.name {
font: normal 20px georgia, serif;
}
p.type {
font-size: 9px;
color: #808080;
}
p.value {
margin-top: -7px;
}
p.err {
margin-top: -7px;
color: red;
}
a.more {
position: absolute;
right: 5px;
bottom: 0px;
font-size: 9px;
}
a.more:hover {
text-decoration: underline;
}
div.contact_more {
overflow: auto;
background-color: #E9E9E9;
width: 400px;
}
div.contact_more .left {
float: left;
margin-left: 20px;
margin-bottom: 8px;
}
hr {
width: 95%;
height: 1px;
border: none;
background-color: #ccc;
}
table, td {
border-top: 1px solid black;
border-bottom: 1px solid black;
font-size: 10px;
text-align: center;
}
td {
padding: 0px 2px;
display: table-cell;
}
tr {
height: 15px;
}