This plugin seemed to have all we needed except one thing. There was a choice in navigation between arrows left and right (previous and next) OR numeric/individual item navigation below. (For this case, we’ll use actual ‘Sliders’ as our representation of the easySlider. Hungry yet?)

For the design we’re envisioning, both systems needed to be utilized. It seemed like a simple fix and I set about combining both  navigation types to show up at the same time. Problem. For some reason, the next/previous buttons weren’t behaving properly when you used the numeric navigation below to choose an item! If you clicked on an item in the numeric nav, the next button would inexplicably send the gallery zooming off into space and then slowly return to the first item in the list.

How do we fix this!? Good ol’ scheming and know-how to the rescue! I’ll give you the quick-and-dirty since I’m pretty sure that’s what you’re interested in, anyway.

First, to show both navigations, go into easySlider1.7.js and find this part:

if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};

html += options.controlsAfter;
$(obj).after(html);
};

And change it to this:

if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <div id="arrows"><span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span></div>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};

html += options.controlsAfter;
$(obj).after(html);
};

Then find this part:

if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};

And change it to this:

if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};

NOW, to make it work properly (and here’s the kicker), parseInt!!!!!

Find the ‘animate’ function (~line 140):

function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};

And insert this itttty bitty little parseInt:

function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
t = parseInt(t);
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};

Thats it! Wow, that seemed a lot harder than it was. We figured out that the two navigations were treating the current item differently (one as an integer, one as a string – who knew!) so basically we’re just telling them all to be integers so both methods will work the same.

For reference, here’s another little proof of concept we drew up. Sliders. Get it? We’re hilarious, i know. (click the pickles OR the ketchup. CRAZY!) easySlider plugin ‘Sliders’ demo

The ads can be viewed on their website at

http://www.adweek.com/aw/custom-reports/superbowl/video.html

Also, check out the classics tabs for some oldies but goodies. After all aren’t the commercials the best part most of the time?

Burger King has captured the flame broiled essence of a Whopper and put it into a cologne for men. And of course they have a hilarious website to go with it. Genius. I can’t wait to see how Hardee’s answers. And PETA for that matter.

 More at their “Fire Meets Desire” website and a Yahoo Shopping article here. Too bad they are already sold out for the holidays, that would have been a great “white elephant” gift.

“Blackbird is a web browser for the African American community. Blackbird was developed by a team of African Americans to allow you to connect to what’s going on in the African American community….Because we know that 85% of African Americans prefer online news information from the Black perspective.”

Um….Nevermind, I’ll keep my thoughts to myself on this one.

Something that never occurred to me when I purchased the iPhone in the summer (clever release date)…You can’t use it with gloves on. It only responds to your bare skin. This poses a major problem and serious annoyance, especially when you’re driving or walking around outside in the cold. It’s really not cool to have to either:

1) Scramble to take my gloves off and get to the phone in time to answer while simultaneously operating a vehicle or walking two large dogs, or…
2) Use my nose to unlock the screen and type in my password.

That little oversight has become a real annoyance.

San Diego Calc teacher sells ads on his tests to recoup money lost in budget cuts. Brilliant. I’m just glad I’m finished with school because my mother would have bought a large banner at the top of the test threatening me to fail another Calc test…

As we learned from Pulp Fiction, bacon is good. And apparently it’s good for more than eating. Just thought I’d notify you Cyber Monday shoppers of some interesting bacon gifts I discovered thanks to a friend who identifies himself as a bacon (um, we’ll just use the world “fan” instead of what he actually said).  Perpetual Kid has bacon wallets, bacon floss, and my favorite: bacon and egg breakfast bandages.

This is a web ad that was launched as part of a print and online advertising campaign for Motrin on Sept. 30th, and it’s a great example of two things:

1) Copywriting matters.

2) Word of mouth combined with web 2.0 is powerful thing.

So, what happened here is Motrin designed a campaign that is obviously targeted to a very valuable demographic: women with children. Their primary message can be found in the Clintonesque tagline they’ve used at the end of this ad: “Motrin. We feel your pain.” Nice, right? Simple enough. Makes sense. And then it all goes downhill.

Someone at Motrin decided that the best way to make this connection would be to focus on the aches and pains associated with wearable baby carriers – which have become popular with parents over the past several years because of the unique bonding experience they provide. This too, is all well and good, until you read/hear the first line of the ad:

“Wearing your baby seems to be in fashion.”

Hmmm. Right off the bat, you’ve got problems. First, this statement could (and coincidentally, did) imply that wearing your baby in a carrier has more to do with appearing fashionable or hip than bonding with your child (think Paris Hilton clutching a miniature dog on a red carpet). Generally, anything that may compare someone’s child to a celebutant’s chihuahua is unwise. But, there’s still an opportunity to clarify with the follow-up statement, which includes the phrase:

“Supposedly it’s a real bonding experience.”

So close! Replace “Supposedly” with “There’s no denying that” and you’re home free! Until this next doozy:

“I’ll put up with the pain because it’s a good kind of pain. It’s for my kid.” (getting warmer…) “Plus, it totally makes me look like an official mom.” (Cold)

Clearly, nobody ran this copy past anyone from the target audience-or a good editor (which, for the record, is almost always a wise move). As you might expect, mothers of America were none too pleased, and they voiced their dismay in a big way. The ad was pulled after two days of a massive mommy 2.0 backlash on Twitter and blogs across the internet.

Motrin’s new PR problem is a perfect example of how little appealing graphics and a good idea (or intentions) mean if the copy isn’t right.

“Agency officials say the water from the system will be cleaner than U.S. tap water.”

Maybe Bear Grylls is actually on to something…

PC World – Top 11 Lamest Blogs

I actually know of a few blogs that are lamer than these. Why is it Top 11 anyway?

1. Gas drops to $2.79/gallon
2. Milk drops to $3.50/gallon
3. US jobs exceed 138 million
4. The Twin Cities median home price returns to $233,000
5. Osama Bin Laden is captured

So, that new bike you’ve been eyeballing at the bike shop, now’s the time get it.  Maybe save $20 to $40 a month in gas, plus $20 from the gov.

http://www.bicycleretailer.com/news/newsDetail/1878.html