How I broke a javascript gallery script to make a Flash-like slideshow

This is a story about a site redesign.  The site was for the mother of a client we’ve worked with on other projects.  It was a kind of site we don’t normally do, but we took the gig because it was a referral and someone we know and like working with.  The original site was built in WordPress, and our job would be to fix it up, make it more SEO-friendly and just generally take what they did and make it better.

When I got access to the WordPress backend and found that, rather than building a new theme, the previous designers just added styles to the WordPress Default theme, I figured just how right I was to just take what they did and make it better.  They also controlled the layout via tables and built no custom page templates, all of which told me that they didn’t understand the possibilities and/or were not very skilled WordPress designers or they were just really lazy.

One of the first things I noticed on the site was that there was a lot of graphics that were mostly text.  Search engines can’t read images, so this text – much of it was the sort of keywords that would be valuable for search engines to crawl – was useless (at least from a search engine standpoint).  In addition, said text was, in many cases, jaggy and ugly.  My question: why bother making text into an image if it doesn’t look smooth and clean?  Either use a unique font you can’t get with available web fonts and make it look nice, or just use regular text.  So the first step was taking several graphics like this and removing all the text, and then adding the text to the code and styling it with CSS.  To get a more unique and attractive look (i.e. to make it look more visual and like the graphic it was replacing) I added subtle text-shadows and styled the font using @font-face.

There was also one of those Flash slideshows as a major feature of the home page.  You know, the Flash slideshows with an image and some text.  None of it is interactive; you can’t click on anything to link to a page or anything, and those images, too, had text buried in them that would be relevant for search engines, using the sorts of phrases that I would expect users to actually use in search queries.   My next question: why use a Flash slideshow when you could have the exact same effect, and make the text searchable, by using available javascript-based technologies like AJAX?  The next task, then, was to find some jQuery slideshow script similar to Dynamic Content Gallery or Featured Content Gallery.  In fact, since it was WordPress, I considered building one of those into the theme and using a redirect to point them all to the same page, but ultimately, this would be a bit of a lame hack and I found a better solution.

First, I found a simple jQuery image slide show that I could customize the code for (demo here).  Like Featured/Dynamic Content Gallery and a multitude of other slideshows like them, there was a caption that would rise up from the bottom and then slide back down when the image transitioned.  But up and down didn’t really work for the layout I was using.  I really needed it to either be there all the time (like it would be if it were a static image in a Flash slideshow) or come in from the right side.  Here’s the relevant javascript code:

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});


//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300,() {

//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);

The above lines of code control the captions displaying/hiding, the height of said caption area, opacity, etc.  In both cases, I replaced “bottom” with “right” just to see what happened.  What happened was the text didn’t slide at all – it just stayed there until the next slide – precisely what I really wanted to do anyway.  Some styling with @font-face for the captions and, voila, a working alternative to the Flash slideshow.

See the final product here: The Art of Eyebrows


2e6c0a0ecb51c9d67263485a1713294d How I broke a javascript gallery script to make a Flash like slideshowChris Reynolds is one half of Arcane Palette and writes the majority of the blog posts on this site. He also has a personal blog, jazzsequence, where he shares links, videos, thoughts about music, technology and gaming, and posts various personal music and writing projects.

so this is what pro blogging is all about

arcane palette just got our first affiliate commission. this is really exciting for us, because this is essentially like getting free money. and suddenly, i get it. i get how upstartblogger and probably countless other pro-bloggers make their living. it’s not through adsense, on which you make pennies unless you get thousands and thousands of hits a day (and even then it may not be enough revenue to support the effort), it’s through affiliate links.

segway for the lost: affiliate links are any link you get that goes to another site (generally something that sells stuff) that gives you a kickback or commission or discount or some kind of reward if they buy stuff. so, threadless has “street team” points which are redeemable for discounts on tshirts. jinx has a similar thing. with our webhost1and1 (and probably a lot of other webhosts and  businesses), we get cash back incentives. with me so far?

the theory is, if you can get enough traffic to your site, a thousand clicks a day, and you have something that gives a significant kickback reward — say $50 for a new account setup — and maybe 1% of your visitors decide “hey, that’s a good deal“, that’s 100 clicks on your affiliate link for 1000 hits to your site, which for $50 is $500. a day. the key is to get the traffic, and there’s a variety of schools and methods of how to do this and some are more sketchy than others and that’s a whole ‘nother deal.

this gets me thinking — this is a real, viable thing. something that could work. something that, for a lot of people, does work. every day. so i’m left with a quandry: do i want to sell my soul for a high traffic blog that needs constant attention, regular blog posts, and (ideally, and mostly because i am fairly strongly opposed to syndicating everything) legitimate content on a specific subject for a potentially lucrative income? i don’t know. i keep thinking that i don’t want to be writing all the time — i like writing, but i could give a million reasons why i’m not that guy, the pro-blogger guy. and i do like making art and making websites and making artful websites and if i was blogging for income that would take away from that.

on the other hand, we’re not at the point yet where we’re making buckets of cash doing web design, and probably we’ll never be making buckets. so it really comes down to whether i sell my soul or keep my soul. and yes, before i get the blogerati peanut gallery yelling at me, i know, making a living as a pro blogger does not necessarily mean selling your soul, however, it would feel like selling my soul to be doing something that’s okay for money rather than and as opposed to doing something that i love for money (no more so than any other job, but still…).


so that takes me right back to the beginning.

the thing is no matter what you do in this industry (or any for that matter), you need to sell yourself.  we sell ourselves every day when we bid on design jobs.  we sell ourselves on our website.  by going on at lenght about arcane palette, i’m selling us again right now, and as i type this, i’m selling myself again.  and every day i’m thinking of ways to get traffic to that doesn’t go against my principles of getting hits that mean something from people who are interested in our work as artists — i’m trying to selectively bump our page ranking while not resorting to black hat methods to cheat our way to the top.  everything you do in the digital world that’s public is selling your online identity.  i have a lifestream page, so that sells quite a lot of my identity for anyone to see.  so i guess it really comes down to what do you want to be doing.  thing is, if i could make a living just ranting off on this blog about whatever i felt like, i’d be pretty happy — i just don’t see that ever happening.

but then, maybe that’s what’s holding me back.

thinktank affiliate buttons, vista experience, computer woes resolved, and other stuff

so we got a new client for thinktank.  it’s a wordpress blog, and it’s mostly maintenance and updates, but it’s still pretty cool.  our client wants to build/integrate a social networking component, so i did some researching and found KickApps Social Networking Software.  the more i read into it and compared the alternatives, the cooler (and more KickAss) KickApps became.  they run a SaaS — Software as a Service, an intriguing concept Wired wrote an article about a while back.  what it means in this case is that the social networking software is provided by and hosted on KickApps’ servers.  you setup the gateway, and everything else lives on their side.  which means less twiddling, infinitely easier setup, no maintenance (other than cosmetic stuff) and also means, for them, that they get to control the flow of traffic and how things work monitarily.  you see, as a free service, they control 2/3 of the ads that show up on the site.  1 of the 3 ad banners you control and can set up as you please.  there’s an option to buy out the ads, but according to the video on their site, it starts at $100/month for 5000 clicks — not a small-scale deal.  they have an impressive client list though; professional sports teams, vibe, npr, universal music, etc.  and it plugs right into the standard cms apps.  not just joomla! and drupal but also wordpress.  it’s exciting enough of a concept to tempt me to create an account and set one up here.  even though, you know, no one visits me, really.

i also just finished optimizing this blog for search engines.  from which i learned a few things about seo-friendly coding, and hopefully does something to counter the last part of the paragraph above.  all this seo’izing and working on a new blog made me think of making affiliate buttons for thinktank.  well, the other thing that made me think of that was the email i got that said that firefox set the world record for most downloads in a 24 hour period for the firefox 3 download day campaign.  it all made me think that creating more ways for people to link back to thinktank couldn’t hurt, and the buttons are prettier than my cleverly unobtrusive “website designed by thinktank” tag at the bottom of our sites.  oh, the other thing the seo stuff taught me (or reminded me, really, i already knew it, but i wasn’t implementing it) was that it’s better to link the whole phrase “website designed by thinktank” than just the “thinktank” which is what i was doing before.

in other news, i got my computer working again, although i haven’t had a chance to look at the old hard drive, see if it’s usable, and figure out wtf happened.  for, you know, fun, and because i wanted to figure out what hardware i should get, or more accurately, if the hardware i was planning on getting would be comparable, i downloaded 3Dmark06 — the standard benchmarking tool that gaming magazines use to rate.  it seemed kind of silly to be using this benchmarking tool that i’ve read about in computer gaming world, but i wanted to see how erin’s system (roughly the equivalent of my broken system) compared with the media center which i was using (roughly the estimated equivalent of what i would be using).  i made a fatal error in doing this — while the mainboard and processors would be comparable (the mainboard i got was a mini version of the one i’m using in the media center) the fantastic graphics i was experiencing in guild wars on the media center was not due to a highly advanced onboard graphics processor which was my assumption at the time.  in fact, it was from the graphics card i got for the media center specifically because i needed s-video out to go to the tv.  as such, erin’s computer with an nvidia geforce 6600 ranked about a 600 and some change on the 3Dmark06 test.  the media center (not designed as a gaming computer by any means and only holding 1gb ram) ranked a 300.  these were, of course, piddly compared to the high scores of people who actually cared to build a gaming system and uploaded their scores to futuremark’s database.  so my plan was to get 4gb ram to overcompensate.  but, as i wrote in one more to file under “it’s always something”, i only had 2 ram slots and my power supply wasn’t spiff enough anyway.  so, having to order a new power supply, i also ordered a new graphics card as well, an off-brand nvidia geforce 8400gs.  it was the cheapest and most powerful solution.   when the power supply came, i started installing vista ultimate, and when the graphics card arrived a couple days later i started transitioning over to my new/old system.  in all, it’s performing well.  my new 3Dmark06 score is around 1600, and guild wars nightfall looks gorgeous — pretty much like the screenshots on their site.  so i’m a fairly happy camper and using a mostly functional operating system again.  while vista isn’t as simple and intuitive as osx and the start menu is all fuXX0red — seriously more messed up than previous versions imo — it works, the glass effects are pretty and it is better than XP and it’s no 95/98 by any means.   it’s definately an advance, albeit not a ground-breaking one.  there are a couple issues:

when i started using vista on the media center i discovered a problem — while i could create new folders (and new files through the right-click option) i could not NAME them.  i.e. New Folder.  New Folder (1).  New Folder (2).  etc. etc.  no matter what i did, i couldn’t get it to work.  apparently, after googling a bit, i discovered this was fairly common and required a registry hack to fix.  annoying, and a waste of a couple hours of banging my head on the computer screen.

random lockups and freezes in explorer, especially when accessing files on a shared network drive.  both vista computers do this so i can only assume this is fairly normal as well.  also, having to log in to the network drive after every reboot is obnoxious and i’m still trying to figure out how to save my password.  :/

so that’s the scoop.  a few quick, final closing remarks:

to answer the comment in my last post: avatars are user icon things for social apps like blogs and forums and messaging programs, but also are used by microsoft to visually represent different users.  it’s sort of the digitized representation of yourself to the world.

i’m planning on sending off my 8mm reels to get transferred to dvd in the next couple weeks.  once i get the dvd back i will rip the video, add new soundtracks and post them here (possibly to youtube as well).  i’m also going to do something about the gavin video and the guy in a hat video (guy in a hat might need to move to youtube also, just for kicks).

i want a google phone.

yes, i’m playing guild wars again.

look for joss whedon’s Dr. Horrible in a couple weeks.  it’s gonna be aweX0me.