$(document).ready(function() { //array of project xml objects var projects = []; // if we're on the home page if($('body#home').length){ //gets the contents of the projects.xml file and loads sidebar $.ajax({ type: "GET", url: "projects.xml", dataType: "xml", error: function(request,status,error) { //console.log("error: " + status); }, success: function(data, status){ //console.log("success: " + status); //creates an array of xml projects $(data).find('project').each(function() { projects.push($(this)); }); loadSidebar(); loadThumbnails(); } }); } else if($('body#project').length){ //gets the contents of the projects.xml file, loads sidebar and $.ajax({ type: "GET", url: "projects.xml", dataType: "xml", error: function(request,status,error) { //console.log("error: " + status); }, success: function(data, status){ //console.log("success: " + status); //creates an array of xml projects $(data).find('project').each(function() { projects.push($(this)); }); //setup sidebar loadSidebar(); //setup which function is called when an ajax link is clicked $.historyInit(loadProject, "jquery_history.html"); //binds the click event on a sidebar item to loading that project $("a[rel='history']").click(function(){ // var hash = this.href; hash = hash.replace(/^.*#/, ''); // moves to a new page. // pageload is called at once. // hash don't contain "#", "?" $.historyLoad(hash); return false; }); //binds left and right arrow keys to move projects forward or backwards $(document).keyup(function(event) { if(event.keyCode == 39){ window.location = "project.html#" + nextProjectNumber(window.location.hash.replace('#','')); $('a#next').css('color', '#8FD9FF'); setTimeout("$('a#next').css('color', 'white')" , 100); } else if(event.keyCode == 37){ window.location = "project.html#" + lastProjectNumber(window.location.hash.replace('#','')); } }) } }); } //loads the thumbnails in index.html function loadThumbnails(){ $(projects).each(function() { $('#thumbnails').append( ""); }); $('#thumbnails').find('img').each(function(index, value) { setTimeout(function(){$(value).animate({opacity:1}, 600);}, 25*index); }); } //goes through all the projects the the xmls file and adds each project (item) to the sidebar, under the correct heading. Also, adds the project's order in the xml file to the anchor tag "name" attribute. This will help us load the correct project when a user clicks on it. It looks a bit messy, but it's not that bad. function loadSidebar() { $(projects).each(function() { if ($(this).find('genre').text() == "design"){ $('ul#design').append( "
  • " + $(this).find('item').text() + "
    • "); } else if ($(this).find('genre').text() == "flash"){ $('ul#flash').append( "
  • " + $(this).find('item').text() + "
    • "); } else if ($(this).find('genre').text() == "art"){ $('ul#art').append( "
  • " + $(this).find('item').text() + "
    • "); } }); } //load project from projects xml file and set the css of the appropriate sidebar item function loadProject(number) { //set the href attribute of the "next" button to the correct project link $('a#next').attr('href', "#" + nextProjectNumber(number)); //find spans that have "genre" at the beginning of their class name replaceItem($('span[class^=genre]'), $(projects[number]).find('genre')); //sets the appropriate class for the genre header switch ($(projects[number]).find('genre').text()){ case "design": //console.log("design"); $('span[class^=genre]').addClass('genre-design') .removeClass('genre-flash') .removeClass('genre-art'); break; case "flash": //console.log("flash"); $('span[class^=genre]').addClass('genre-flash') .removeClass('genre-design') .removeClass('genre-art'); break; case "art": //console.log("art"); $('span[class^=genre]').addClass('genre-art') .removeClass('genre-design') .removeClass('genre-flash'); break; } replaceItem($('span.item'), $(projects[number]).find('item')); replaceItem($('span.type'), $(projects[number]).find('type')); replaceItem($('span.date'), $(projects[number]).find('date')); replaceItem($('span.client'), $(projects[number]).find('client')); replaceItem($('span.medium'), $(projects[number]).find('medium')); $('div.description').html($(projects[number]).find('description').text()); //get rid of previous image and caption tags $('#project-unit').find('img').remove(); $('#project-unit').find('div.flash-replaced').remove(); $('#project-unit').find('p.caption').remove(); $('#project-unit').find('a.image').remove(); //for each image in the project, put an image tag at the bottom of #project-unit $(projects[number]).find('image').each(function() { var path = $(this).text(); var extension = path.substring($(this).text().length-3); if (extension == "png" || extension == "jpg" || extension == "gif"){ //if it has a link attribute, add a img tag with a link if ($(this).attr('link') != undefined){ $('#project-unit').append(""); //if the image has a caption, add it if ($(this).attr('caption') != undefined){ $('#project-unit').find('a:last').append("

    " + $(this).attr('caption') + "

    "); $('#project-unit').find('a:last').find('img').css('margin-bottom', '0px'); //gets rid of the margin-bottom for images with captions } } else { $('#project-unit').append(""); } } else if (extension == "swf"){ $('#project-unit').append("
    "); $('#project-unit').find('div.swf:last').flash({ src: path, width: $(this).attr('width'), height: $(this).attr('height')}, {version: 9}); //if the swf doesn't need margins or padding, get rid that stuff via css if($(this).attr('style') != undefined){ $('#project-unit').find('div.swf:last').addClass($(this).attr('style')).removeClass('swf'); } } }); $('#sidebar-list').find('a').each(function() { //sets previously select item as not active $(this).removeClass("active"); $(this).addClass("inactive"); //sets currently selected item as active if($(this).attr('href') == "project.html#" + number){ $(this).removeClass("inactive"); $(this).addClass("active"); } }); } //convience method for determing the "next" project to show function nextProjectNumber(n) { //when loading the next project from index.html, there is no hash tag if (n == ""){ return 0; } var length = projects.length - 1; if (n == length){ return 0; } else { n++ return n; } } //convience method for determing the "next" project to show function lastProjectNumber(n) { var length = projects.length - 1; //when loading the next project from index.html, there is no hash tag if (n == ""){ return length; } if (n == 0){ return length; } else { n-- return n; } } //convenience function for replacing text in the html file with the xml data function replaceItem(pageItem, xmlItem) { $(pageItem).text(xmlItem.text()); } });