/**
* jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget.
* @requires jQuery v1.2 or above
*
* http://gmarwaha.com/jquery/jcarousellite/
*
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 1.0.1
* Note: Requires jquery 1.2 or above from version 1.0.1
*/
/**
* Creates a carousel-style navigation widget for images/any-content from a simple HTML markup.
*
* The HTML markup that is used to build the carousel can be as simple as...
*
*
*
*
*
*
*
*
*
* As you can see, this snippet is nothing but a simple div containing an unordered list of images.
* You don't need any special "class" attribute, or a special "css" file for this plugin.
* I am using a class attribute just for the sake of explanation here.
*
* To navigate the elements of the carousel, you need some kind of navigation buttons.
* For example, you will need a "previous" button to go backward, and a "next" button to go forward.
* This need not be part of the carousel "div" itself. It can be any element in your page.
* Lets assume that the following elements in your document can be used as next, and prev buttons...
*
*
*
*
* Now, all you need to do is call the carousel component on the div element that represents it, and pass in the
* navigation buttons as options.
*
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev"
* });
*
* That's it, you would have now converted your raw div, into a magnificient carousel.
*
* There are quite a few other options that you can use to customize it though.
* Each will be explained with an example below.
*
* @param an options object - You can specify all the options shown below as an options object param.
*
* @option btnPrev, btnNext : string - no defaults
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev"
* });
* @desc Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward.
*
* @option btnGo - array - no defaults
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* btnGo: [".0", ".1", ".2"]
* });
* @desc If you don't want next and previous buttons for navigation, instead you prefer custom navigation based on
* the item number within the carousel, you can use this option. Just supply an array of selectors for each element
* in the carousel. The index of the array represents the index of the element. What i mean is, if the
* first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel
* will slide to the first element and so on and so forth. This feature is very powerful. For example, i made a tabbed
* interface out of it by making my navigation elements styled like tabs in css. As the carousel is capable of holding
* any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin.
* The best part is that, the tab will "slide" based on the provided effect. :-)
*
* @option mouseWheel : boolean - default is false
* @example
* jQuery(".carousel").jCarouselLite({
* mouseWheel: true
* });
* @desc The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of using buttons.
* To get this feature working, you have to do 2 things. First, you have to include the mouse-wheel plugin from brandon.
* Second, you will have to set the option "mouseWheel" to true. That's it, now you will be able to navigate your carousel
* using the mouse wheel. Using buttons and mouseWheel or not mutually exclusive. You can still have buttons for navigation
* as well. They complement each other. To use both together, just supply the options required for both as shown below.
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* mouseWheel: true
* });
*
* @option auto : number - default is null, meaning autoscroll is disabled by default
* @example
* jQuery(".carousel").jCarouselLite({
* auto: 800,
* speed: 500
* });
* @desc You can make your carousel auto-navigate itself by specfying a millisecond value in this option.
* The value you specify is the amount of time between 2 slides. The default is null, and that disables auto scrolling.
* Specify this value and magically your carousel will start auto scrolling.
*
* @option speed : number - 200 is default
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* speed: 800
* });
* @desc Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with
* different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect.
*
* @option easing : string - no easing effects by default.
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* easing: "bounceout"
* });
* @desc You can specify any easing effect. Note: You need easing plugin for that. Once specified,
* the carousel will slide based on the provided easing effect.
*
* @option vertical : boolean - default is false
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* vertical: true
* });
* @desc Determines the direction of the carousel. true, means the carousel will display vertically. The next and
* prev buttons will slide the items vertically as well. The default is false, which means that the carousel will
* display horizontally. The next and prev items will slide the items from left-right in this case.
*
* @option circular : boolean - default is true
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* circular: false
* });
* @desc Setting it to true enables circular navigation. This means, if you click "next" after you reach the last
* element, you will automatically slide to the first element and vice versa. If you set circular to false, then
* if you click on the "next" button after you reach the last element, you will stay in the last element itself
* and similarly for "previous" button and first element.
*
* @option visible : number - default is 3
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* visible: 4
* });
* @desc This specifies the number of items visible at all times within the carousel. The default is 3.
* You are even free to experiment with real numbers. Eg: "3.5" will have 3 items fully visible and the
* last item half visible. This gives you the effect of showing the user that there are more images to the right.
*
* @option start : number - default is 0
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* start: 2
* });
* @desc You can specify from which item the carousel should start. Remember, the first item in the carousel
* has a start of 0, and so on.
*
* @option scrool : number - default is 1
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* scroll: 2
* });
* @desc The number of items that should scroll/slide when you click the next/prev navigation buttons. By
* default, only one item is scrolled, but you may set it to any number. Eg: setting it to "2" will scroll
* 2 items when you click the next or previous buttons.
*
* @option beforeStart, afterEnd : function - callbacks
* @example
* jQuery(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* beforeStart: function(a) {
* alert("Before animation starts:" + a);
* },
* afterEnd: function(a) {
* alert("After animation ends:" + a);
* }
* });
* @desc If you wanted to do some logic in your page before the slide starts and after the slide ends, you can
* register these 2 callbacks. The functions will be passed an argument that represents an array of elements that
* are visible at the time of callback.
*
*
* @cat Plugins/Image Gallery
* @author Ganeshji Marwaha/ganeshread@gmail.com
*/
(function(jQuery) { // Compliant with jquery.noConflict()
jQuery.fn.jCarouselLite = function(o) {
o = jQuery.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: false,
auto: null,
speed: 200,
easing: null,
vertical: false,
circular: true,
visible: 3,
start: 0,
scroll: 1,
beforeStart: null,
afterEnd: null
}, o || {});
return this.each(function() { // Returns the element collection. Chainable.
var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
var div = jQuery(this), ul = jQuery("ul", div), tLi = jQuery("li", ul), tl = tLi.size(), v = o.visible;
if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}
var li = jQuery("li", ul), itemLength = li.size(), curr = o.start;
div.css("visibility", "visible");
li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});
var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation
var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
var divSize = liSize * v; // size of entire div(total length for just the visible items)
li.css({width: li.width(), height: li.height()});
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
div.css(sizeCss, divSize+"px"); // Width of the DIV. length of visible images
if(o.btnPrev)
jQuery(o.btnPrev).click(function() {
return go(curr-o.scroll);
});
if(o.btnNext)
jQuery(o.btnNext).click(function() {
return go(curr+o.scroll);
});
if(o.btnGo)
jQuery.each(o.btnGo, function(i, val) {
jQuery(val).click(function() {
return go(o.circular ? o.visible+i : i);
});
});
if(o.mouseWheel && div.mousewheel)
div.mousewheel(function(e, d) {
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
});
if(o.auto)
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
function vis() {
return li.slice(curr).slice(0,v);
};
function go(to) {
if(!running) {
if(o.beforeStart)
o.beforeStart.call(this, vis());
if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
} else if(to>=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -( (v) * liSize ) + "px" );
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if(to<0 || to>itemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.
running = true;
ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
if(o.afterEnd)
o.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
jQuery(o.btnPrev + "," + o.btnNext).removeClass("disabled");
jQuery( (curr-o.scroll<0 && o.btnPrev)
||
(curr+o.scroll > itemLength-v && o.btnNext)
||
[]
).addClass("disabled");
}
}
return false;
};
});
};
function css(el, prop) {
return parseInt(jQuery.css(el[0], prop)) || 0;
};
function width(el) {
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};
})(jQuery);
/* Copyright (c) 2006 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
*
* jQueryLastChangedDate: 2007-12-20 09:02:08 -0600 (Thu, 20 Dec 2007) jQuery
* jQueryRev: 4265 jQuery
*
* Version: 3.0
*
* Requires: jQuery 1.2.2+
*/
(function(jQuery) {
jQuery.event.special.mousewheel = {
setup: function() {
var handler = jQuery.event.special.mousewheel.handler;
// Fix pageX, pageY, clientX and clientY for mozilla
if ( jQuery.browser.mozilla )
jQuery(this).bind('mousemove.mousewheel', function(event) {
jQuery.data(this, 'mwcursorposdata', {
pageX: event.pageX,
pageY: event.pageY,
clientX: event.clientX,
clientY: event.clientY
});
});
if ( this.addEventListener )
this.addEventListener( (jQuery.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
else
this.onmousewheel = handler;
},
teardown: function() {
var handler = jQuery.event.special.mousewheel.handler;
jQuery(this).unbind('mousemove.mousewheel');
if ( this.removeEventListener )
this.removeEventListener( (jQuery.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
else
this.onmousewheel = function(){};
jQuery.removeData(this, 'mwcursorposdata');
},
handler: function(event) {
var args = Array.prototype.slice.call( arguments, 1 );
event = jQuery.event.fix(event || window.event);
// Get correct pageX, pageY, clientX and clientY for mozilla
jQuery.extend( event, jQuery.data(this, 'mwcursorposdata') || {} );
var delta = 0, returnValue = true;
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
// if ( jQuery.browser.opera ) delta = -event.wheelDelta;
event.data = event.data || {};
event.type = "mousewheel";
// Add delta to the front of the arguments
args.unshift(delta);
// Add event to the front of the arguments
args.unshift(event);
return jQuery.event.handle.apply(this, args);
}
};
jQuery.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
})(jQuery);
var work=0; var about=0; var blog=1; var contact=0; var recent= 1; var popular = 0; var categories = 0; var tags = 0;
var entrypage = location.hash;
function seanwork() {
if (work == 0) {
jQuery("#link-light").stop().animate({opacity: 0.5}, 300).animate( {marginTop: '-23'+'px'},0).animate({opacity: 1}, 300);
jQuery("#bracket-right").stop().animate({ marginLeft: '-85'+'px'}, 400).animate({marginLeft: '-85'+'px'}, 200).animate({ marginLeft: '360'+'px'}, 400);
jQuery("#sean-about, #sean-blog, #sean-contact").removeClass("nav-selected").addClass("nav-unselected");
jQuery("#sean-work").removeClass("nav-unselected").addClass("nav-selected");
work = 1;about = 0; blog = 0; contact = 0; };
jQuery("#about-content, #blog-content, #contact-content, #blog-dropdown").fadeOut(300);
jQuery("#work-content").animate({Top: '0px'}, 600).show(600);
jQuery(".prev, .next").animate({opacity: 1}, 600).fadeIn(600);
document.title = 'Some of my Recent Work - Sean Blakeley - Brighton Web Designer';
}; //history & entry
function seanabout() {
if (about == 0) {
jQuery("#link-light").stop().animate({opacity: 0.5}, 300).animate( {marginTop: '-9'+'px'},0).animate({opacity: 1}, 300);
jQuery("#bracket-right").stop().animate({ marginLeft: '-85'+'px'}, 400).animate({marginLeft: '-85'+'px'}, 200).animate({ marginLeft: '360'+'px'}, 400);
jQuery("#sean-work, #sean-blog, #sean-contact").removeClass("nav-selected").addClass("nav-unselected");
jQuery("#sean-about").removeClass("nav-unselected").addClass("nav-selected");
work = 0;about = 1; blog = 0; contact = 0; };
jQuery("#home-content, #work-content, #blog-content, #contact-content, .prev, .next, #blog-dropdown").fadeOut(300);
jQuery("#about-content").animate({opacity: 1}, 600).show(600);
document.title = 'A Little About me - Sean Blakeley - Brighton Web Designer';
}; //history & entry
function seanblog() {
if (blog == 0) {
jQuery("#link-light").stop().animate({opacity: 0.5}, 300).animate( {marginTop: '4'+'px'},0).animate({opacity: 1}, 300);
jQuery("#bracket-right").stop().animate({ marginLeft: '-85'+'px'}, 400).animate({marginLeft: '-85'+'px'}, 200).animate({ marginLeft: '360'+'px'}, 400);
jQuery("#sean-work, #sean-about, #sean-contact").removeClass("nav-selected").addClass("nav-unselected");
jQuery("#sean-blog").removeClass("nav-unselected").addClass("nav-selected");
work = 0;about = 0; blog = 1; contact = 0; };
jQuery("#home-content, #about-content, #work-content, #contact-content, .next, .prev").hide(300).fadeOut(300);
jQuery("#blog-dropdown").show(600);
jQuery("#blog-content").animate({opacity: 1}, 600).show(600);
document.title = 'Sean Blakeley - Brighton Web Designer';
}; //history & entry
function seancontact() {
if (contact == 0) {
jQuery("#link-light").stop().animate({opacity: 0.5}, 300).animate( {marginTop: '18'+'px'},0).animate({opacity: 1}, 300);
jQuery("#bracket-right").stop().animate({ marginLeft: '-85'+'px'}, 400).animate({marginLeft: '-85'+'px'}, 200).animate({ marginLeft: '360'+'px'}, 400);
jQuery("#sean-work, #sean-about, #sean-blog").removeClass("nav-selected").addClass("nav-unselected");
jQuery("#sean-contact").removeClass("nav-unselected").addClass("nav-selected");
work = 0;about = 0; blog = 0; contact = 1; };
jQuery("#home-content, #about-content, #blog-content, #work-content, .prev, .next, #blog-dropdown").fadeOut(300);
jQuery("#contact-content").animate({opacity: 1}, 600).show(600);
document.title = 'Get in Touch - Sean Blakeley - Brighton Web Designer';
}; //history & entry
jQuery(document).ready(function(jQuery){
// *********************** START preloading from top-margin: -200% on CSS **********************
jQuery("#container").css({marginTop: '0px'});
jQuery("#light-linkage").css({marginTop: '-23px'});
jQuery("#website-details-connector").css({marginTop: '-62px'});
jQuery(".website-details, #website-details-bg").css({marginTop: '-248px'});
// *********************** END preloading from top-margin: -200% on CSS ************************
jQuery("#carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
vertical: true,
mouseWheel: true,
scroll: 1,
visible: 18 // ie breaks without this!!!!!
});
//initial settings
if (entrypage == "#my-work" || entrypage == "#my-work/" || category == "work") {
(category = "work");
seanwork();
}; // .entry
if (entrypage == "#about-me" || entrypage == "#about-me/" || category == "about") {
(category = "about");
seanabout();
}; // .entry
if (entrypage == "#blog" || entrypage == "#blog/") {
(category = "blog");
seanblog();
}; // .entry
if (entrypage == "#contact" || entrypage == "#contact/" || category == "contact") {
(category = "contact");
seancontact();
}; // .entry
jQuery("#work-content, #about-content, #contact-content, #single-page-content, #contact-details, #blog-content, #search, #blog-details, .prev, .next, #tag-details, #popular-details, #search-details, #speech-bubble").hide();
jQuery(".website-details, #website-details-connector, #website-details-bg, #light-linkage, .ingredients").css({opacity : 0});
jQuery(".website-examples").css({opacity : 0.5});
jQuery("hr").css({opacity : 0.1});
jQuery(".website-details").css({marginLeft: '-480'+'px'});
if (category == "home" || category == "blog") {
jQuery("#blog-content").animate({opacity: 1}, 600).show(600);
jQuery("#bracket-right").animate({ marginLeft: '-85'+'px'}, 400).animate({marginLeft: '-85'+'px'}, 200).animate({ marginLeft: '360'+'px'}, 400);
jQuery("#sean-blog").removeClass("nav-unselected").addClass("nav-selected");
};
jQuery("#single-page-content").animate({opacity: 1}, 600).show(600);
jQuery("#link-light").hide().fadeIn(1200).css( {zIndex : 200});
jQuery("#category-link").css({color: '#ffffff'});
jQuery("#sean-work a").click(function(){
if (work == 0){
jQuery("#single-page-content, #single-page-info").hide(300).fadeOut(300);
};
seanwork();
}); // .history
jQuery("#sean-about a").click(function(){
if (about == 0){
jQuery("#single-page-content, #single-page-info").hide(300).fadeOut(300);
};
seanabout();
}); // .history
jQuery("#sean-blog a").click(function(){
if (blog == 0){
jQuery("#single-page-content, #single-page-info").hide(300).fadeOut(300);
};
seanblog();
}); // .history
jQuery("#sean-contact a").click(function(){
if (contact == 0){
jQuery("#single-page-content, #single-page-info").hide(300).fadeOut(300);
};
seancontact();
}); // .history
jQuery(".website-examples").hover(function(){
jQuery(this).stop().animate({opacity : 1, paddingLeft: '25'+'px'}, 300);
},function(){
jQuery(this).animate({opacity : 0.5, paddingLeft: '0'+'px'}, 600);
}); // .hover
jQuery(".work-example-1 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-1, #website-details-connector, #light-linkage, #ingredients-1").stop().animate({opacity: 1}, 400);
jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);
},function(){ jQuery("#website-details-bg, #website-details-1, #website-details-connector, #light-linkage, #ingredients-1").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-2 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-2, #website-details-connector, #light-linkage, #ingredients-2").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-2, #website-details-connector, #light-linkage, #ingredients-2").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-3 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-3, #website-details-connector, #light-linkage, #ingredients-3").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-3, #website-details-connector, #light-linkage, #ingredients-3").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-4 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-4, #website-details-connector, #light-linkage, #ingredients-4").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-4, #website-details-connector, #light-linkage, #ingredients-4").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-5 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-5, #website-details-connector, #light-linkage, #ingredients-5").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-5, #website-details-connector, #light-linkage, #ingredients-5").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-6 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-6, #website-details-connector, #light-linkage, #ingredients-6").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-6, #website-details-connector, #light-linkage, #ingredients-6").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-7 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-7, #website-details-connector, #light-linkage, #ingredients-7").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-7, #website-details-connector, #light-linkage, #ingredients-7").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-8 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-8, #website-details-connector, #light-linkage, #ingredients-8").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-8, #website-details-connector, #light-linkage, #ingredients-8").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-9 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-9, #website-details-connector, #light-linkage, #ingredients-9").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-9, #website-details-connector, #light-linkage, #ingredients-9").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-10 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-10, #website-details-connector, #light-linkage, #ingredients-10").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-10, #website-details-connector, #light-linkage, #ingredients-10").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-11 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-11, #website-details-connector, #light-linkage, #ingredients-11").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-11, #website-details-connector, #light-linkage, #ingredients-11").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-12 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-12, #website-details-connector, #light-linkage, #ingredients-12").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-12, #website-details-connector, #light-linkage, #ingredients-12").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-13 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-13, #website-details-connector, #light-linkage, #ingredients-13").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-13, #website-details-connector, #light-linkage, #ingredients-13").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-14 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-14, #website-details-connector, #light-linkage, #ingredients-14").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-14, #website-details-connector, #light-linkage, #ingredients-14").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-15 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-15, #website-details-connector, #light-linkage, #ingredients-15").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-15, #website-details-connector, #light-linkage, #ingredients-15").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-16 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-16, #website-details-connector, #light-linkage, #ingredients-16").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-16, #website-details-connector, #light-linkage, #ingredients-16").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-17 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-17, #website-details-connector, #light-linkage, #ingredients-17").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-17, #website-details-connector, #light-linkage, #ingredients-17").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-18 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-18, #website-details-connector, #light-linkage, #ingredients-18").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-18, #website-details-connector, #light-linkage, #ingredients-18").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-19 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-19, #website-details-connector, #light-linkage, #ingredients-19").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-19, #website-details-connector, #light-linkage, #ingredients-19").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-20 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-20, #website-details-connector, #light-linkage, #ingredients-20").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-20, #website-details-connector, #light-linkage, #ingredients-20").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-21 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-21, #website-details-connector, #light-linkage, #ingredients-21").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-21, #website-details-connector, #light-linkage, #ingredients-21").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-22 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-22, #website-details-connector, #light-linkage, #ingredients-22").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-22, #website-details-connector, #light-linkage, #ingredients-22").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-23 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-23, #website-details-connector, #light-linkage, #ingredients-23").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-23, #website-details-connector, #light-linkage, #ingredients-23").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-24 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-24, #website-details-connector, #light-linkage, #ingredients-24").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-24, #website-details-connector, #light-linkage, #ingredients-24").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery(".work-example-25 a").hover(function(){
jQuery(".website-details").stop().animate({opacity: 0}, 400); jQuery("#website-details-bg").stop().animate({opacity: 0.6}, 400);jQuery(" #website-details-25, #website-details-connector, #light-linkage, #ingredients-25").stop().animate({opacity: 1}, 400);
},function(){ jQuery("#website-details-bg, #website-details-25, #website-details-connector, #light-linkage, #ingredients-25").stop().animate({opacity: 0}, 400);
}); // .hover
jQuery('input[type=text], textarea').each(function() { jQuery(this).focus(function() { if(jQuery(this).val() == this.defaultValue) jQuery(this).val(""); }); jQuery(this).blur(function() { if(jQuery(this).val() == "") jQuery(this).val(this.defaultValue); });});
jQuery("#form-name, #form-email, #message-area, #search-area, #author-form, #email-form, #url-form, #comment-area").hover(function(){
jQuery(this).css({background : '#ffffff', color : '#333333'});
},function(){
jQuery(this).css({background : '#faeada', color : '#a46e9d'});
}); // .hover
jQuery(".prev").hover(function(){
jQuery(".prev").css({backgroundPosition: '0 -25'+'px'});
},function(){
jQuery(".prev").css({backgroundPosition: '0 0'});
}); // .hover
jQuery(".next").hover(function(){
jQuery(".next").css({backgroundPosition: '0 -75'+'px'});
},function(){
jQuery(".next").css({backgroundPosition: '0 -50'+'px'});
}); // .hover
jQuery("#blog-dropdown").hover(function(){
jQuery(this).stop().animate({marginTop: '0'+'px'}, 400);
},function(){
jQuery(this).stop().animate({marginTop: '-185'+'px'}, 300);
}); // .hover
jQuery("#category-link").hover(function(){
jQuery("#blog-nav ul li").css({color: '#d142de'});
jQuery("#highlight-arrow").stop().animate({left: 27+'px'}, 300);
jQuery(this).css({color: '#ffffff'});
jQuery("#tag-details, #popular-details, #search-details").stop().fadeOut(400);
jQuery("#category-details").stop().css({opacity : 1}).fadeIn(500);
},function(){
}); // .hover
jQuery("#tag-link").hover(function(){
jQuery("#blog-nav ul li").css({color: '#d142de'});
jQuery("#highlight-arrow").stop().animate({left: 128+'px'}, 300);
jQuery(this).css({color: '#ffffff'});
jQuery("#category-details, #popular-details, #search-details").stop().fadeOut(400);
jQuery("#tag-details").stop().css({opacity : 1}).fadeIn(500);
},function(){
}); // .hover
jQuery("#popular-link").hover(function(){
jQuery("#blog-nav ul li").css({color: '#d142de'});
jQuery("#highlight-arrow").stop().animate({left: 229+'px'}, 300);
jQuery(this).css({color: '#ffffff'});
jQuery("#tag-details, #category-details, #search-details").stop().fadeOut(400);
jQuery("#popular-details").stop().css({opacity : 1}).fadeIn(500);
},function(){
}); // .hover
jQuery("#search-link").hover(function(){
jQuery("#blog-nav ul li").css({color: '#d142de'});
jQuery("#highlight-arrow").stop().animate({left: 330+'px'}, 300);
jQuery(this).css({color: '#ffffff'});
jQuery("#tag-details, #popular-details, #category-details").stop().fadeOut(400);
jQuery("#search-details").stop().css({opacity : 1}).fadeIn(500);
},function(){
}); // .hover
jQuery(".blog-title a, .cat-item a").hover(
function() {
jQuery(this).animate({paddingLeft: 25+'px'}, 300);
},
function(){
jQuery(this).animate({paddingLeft: 5+'px'}, 300);
}
);
jQuery(".btn").hover(
function() {
jQuery(this).css({color: '#222222', backgroundPosition: '0 -515'+'px'}).animate({paddingLeft: 25+'px'}, 300);
},
function(){
jQuery(this).css({color: '#ffffff', backgroundPosition: '0 -495'+'px'}).animate({paddingLeft: 18+'px'}, 300);
}); // .hover
jQuery("#category-details ul li a, #tag-details ul li a").hover(
function() {
jQuery(this).css({opacity : 0}).css({color: '#222222', backgroundPosition: '0 -555'+'px'}).animate({paddingLeft: 20+'px', width : 160+'px', opacity : 1}, 300);
},
function(){
jQuery(this).css({color: '#ffffff', backgroundPosition: '0 -535'+'px', display : 'block'}).animate({paddingLeft: 0+'px', width : 160+'px'}, 300);
}); // .hover
jQuery("#popular-details ul li a").hover(
function() {
jQuery(this).css({opacity : 0}).css({color: '#222222', backgroundPosition: '0 -555'+'px'}).animate({paddingLeft: 20+'px', width : 360+'px', opacity : 1}, 300);
},
function(){
jQuery(this).css({color: '#ffffff', backgroundPosition: '0 -535'+'px', display : 'block'}).animate({paddingLeft: 0+'px', width : 380+'px'}, 300);
}); // .hover
jQuery(".read-more a").hover(
function() {
jQuery(this).stop().css({opacity: 0}).animate({paddingLeft: 23+'px', opacity : 1}, 300);
}, function(){
jQuery(this).stop().animate({paddingLeft: 5+'px', opacity : 1}, 300);
}); // .hover
jQuery(".email-address, #sean-blakeley-email").click(function(){;jQuery(".email-address, #sean-blakeley-email").attr('href','mailto:sean@seanblakeley.co.uk');});
}); // doc.ready close
* 
* 
*