$(document).ready(function(){ //global variables = set to defaults... var currentrow = "#project1"; var currenttarget = "#project1-image1"; var currenttextblock = '#project1-text'; var scrolling = false; //AUTOLOAD FIRST PROJECT ROW... $(currentrow).find('li.loading').each(function() { //cycle through each LI item... //remove "loading" class so we don't do this again... $(this).removeClass("loading"); //store reference to the LI element var lielement = this; //create a new image element in jquery var img = new Image(); //we've stored the src url in the title attribute in each LI element - //not ideal - but because portfolio will be dynamic this allows us to not have to construct a huge array of images seperately //this may well be faster too / less resource intensive var src = $(this).attr("title"); //time to pull in the image... $(img).load(function () { //hide the image so we can fade it in $(this).hide(); //APPEND (inside) the LI element with the image. (tried replacewith and all sorts of stuff - only append worked right) $(lielement).append(img); //fade in the image $(this).fadeIn(); }).error(function () { // not doing anything if it doesn't work - but we could put console.log here to see what's going on... }).attr('src', src); //for the src = use what we stored in src variable (which was the contents of the title tag in the LI) }); //AUTOLOAD FIRST PROJECT TEXTBOX.... $(currenttextblock).fadeIn("slow"); //PROJECT NAVIGATION - ON ANY PROJECT NAV CLICK... $('#project_tn_nav a').click(function(){ //check if scrolling currently (if scrolling don't do anything) don't want stacking of events... if(!scrolling) { //get the target from the "rel" of the link clicked. This should be the ID of PORTFOLIO item in the block //which means you can add clicks for other project items in the row - not just the first item in the row var target = $(this).attr("rel"); //get position of target var loc = $(target).position(); //set the global currenttarget to the current target (for use in other/future clicks and scrolling scripts) currenttarget = target; //if we have a location... //if not - we're not gonna scroll if (loc) { //set scrolling true so we stop any scrolling scrolling = true; var symbolleft = ""; // if the location is at 0 we don't need to add a - in front of the location number (left) if (loc.left != "0") { var symbolleft = "-"; //take away 200 from the location to move out of the way of the fade. loc.left = loc.left-287 } else { //if location IS 0 then we just set the location to 200 loc.left = 287; } //if the location is at 0 we don't need to add a - in front of the location number (top) var symboltop = ""; if (loc.top != "0") { var symboltop = "-"; //20 for padding from the top... change if needed loc.top = loc.top; } //dont think we need the below anymore - delete? //scrollingto = "{\"left\": \""+symbolleft+loc.left+"px\",\"top\": \""+symboltop+loc.top+"px\"}"; //time to scroll the portfolio... $('#portfolio_photos').animate({"left":symbolleft+(loc.left)+"px","top":symboltop+(loc.top)+"px"}, 900,function(){scrolling = false;}); } //END LOCATION CHECK /** ROW IMAGE LOADER!!!!! **/ //When we click on a new project - we want to load the images (just the first time) //so HTML is set for all itms to have a "loading" class which we remove after we've loaded the images. //if the loading class is not present - means we've already done this - so just skip past... //find the parent of the target. //target will be the LI element - so parent will be the UL var parentul = $(target).parent(); //while we're here set the global currentrow variable to this parent ul currentrow = parentul; //get all the LI elements in the UL that have a class=loading... $(parentul).find('li.loading').each(function() { //cycle through each LI item... //remove "loading" class so we don't do this again... $(this).removeClass("loading"); //store reference to the LI element var lielement = this; //create a new image element in jquery var img = new Image(); //we've stored the src url in the title attribute in each LI element - //not ideal - but because portfolio will be dynamic this allows us to not have to construct a huge array of images seperately //this may well be faster too / less resource intensive var src = $(this).attr("title"); //time to pull in the image... $(img).load(function () { //hide the image so we can fade it in $(this).hide(); //APPEND (inside) the LI element with the image. (tried replacewith and all sorts of stuff - only append worked right) $(lielement).append(img); //fade in the image $(this).fadeIn(); }).error(function () { // not doing anything if it doesn't work - but we could put console.log here to see what's going on... }).attr('src', src); //for the src = use what we stored in src variable (which was the contents of the title tag in the LI) }); /** TEXTBOX LOADER!!!!! **/ //get the current row - var base = $(parentul).attr("id"); //construct the text reference of the text block //which will be in the format of the project row's text name plus "-text" at the end var newtextblock = "#"+base+"-text"; //if we've clicked the same project we are on currently, skip re-loading the text block in... if (currenttextblock != newtextblock) { //fade out the current textblock (stored in the global variable - currenttextblock $(currenttextblock).fadeOut("slow",function() { //when that one is done fading out, fade in the new text block $(newtextblock).fadeIn("slow"); //update the globbal variable currenttextblock with the text block we're now seeing... currenttextblock = newtextblock; }); //end fadeout }//end if current textblock check... //ungrey - grey out next previous links... if ($(currenttarget).prev().length) { $('#previous').removeClass('grey'); } else { $('#previous').addClass('grey'); } if ($(currenttarget).next().length) { $('#next').removeClass('grey'); } else { $('#next').addClass('grey'); } } //end check for currently scrolling (scrolling == true) }); // end project nav clicks /**** NEXT PREVIOUS slider **/ //next previous link... $('.nextpreviouslink').click(function() { //first check if we're already scrolling from another script... if(!scrolling) { var nexttarget; //create variable out here so we can use it later... //is there an element next or previous to the one we're on? isThereAnElement = false; if ($(this).attr("id") == "previous") { if ($(currenttarget).prev().length) { isThereAnElement = true; // store reference to previous element in nexttarget variable var nexttarget = $(currenttarget).prev(); } } else if ($(this).attr("id") == "next") { if ($(currenttarget).next().length) { isThereAnElement = true; // store reference to next element in nexttarget variable var nexttarget = $(currenttarget).next(); } } //if there is a next or previous element - lets go... if (isThereAnElement) { //get the location of that previous element var loc = nexttarget.position(); // update global varable current target with the new element currenttarget = nexttarget; //if we have a location = lets get going.. (if no location - we can't scroll to it) if (loc) { //set scrolling to true so no other script runs while we're doing this... scrolling = true; var symbolleft = ""; if (loc.left != "0") { //0 doesn't need a - in front of it var symbolleft = "-"; //shift over 200 pixels so we've cleared the fade loc.left = loc.left-287 } else { //if we're at 0 then we just need to move it over 200 pixels to clear the fade loc.left = 287; } var symboltop = ""; if (loc.top != "0") { var symboltop = "-"; //same as before: don't do -0px //if reusing = might need to also check that loc.top is GREATER than 20... loc.top = loc.top; } //ok - lets scroll! $('#portfolio_photos').animate({"left":symbolleft+(loc.left)+"px","top":symboltop+(loc.top)+"px"}, 900,function(){scrolling = false;}); //ungrey - grey out next previous links... if ($(currenttarget).prev().length) { $('#previous').removeClass('grey'); } else { $('#previous').addClass('grey'); } if ($(currenttarget).next().length) { $('#next').removeClass('grey'); } else { $('#next').addClass('grey'); } }//end location check }//end next/previous element check... } //end scrolling check }); //end previous slider link click });