Photo Corners headlinesarchivemikepasini.com
A S C R A P B O O K O F S O L U T I O N S F O R T H E P H O T O G R A P H E R
Enhancing the enjoyment of taking pictures with news that matters, features that entertain and images that delight. Published frequently.
Site Tweak: Affiliate Ads
17 November 2016
We have set up so many affiliate arrangements that listing them all with their banner ads in a box on the headlines page has been taking up too much space. It was nice to see them all at once there but it wasa long scroll to get around them to the previous day's news.
We imagined a number of ways to design around that.
We could, for example, just use text links. But what's the fun in that?
Or we could show a different banner ad every time you load the page. But that would make it impossible to get to a specific affiliate. If you wanted, say, to buy something from Think Tank Photo you might have to reload the page a handful of times before it came up.
Nope, we needed something compact that would display all the ads in turn but, at the same time, let you jump to any one of them. We needed a little JavaScript ad rotator.
ROTATORS
There are a lot of them on the Web. Every one we investigated suffered from one or another design flaw.
The simple ones are a bit too simple. They randomly pick an ad from an array of ads and that's it until you reload.
The image sliders are better but not quite there. Most of them require you to have all the images the same size (as our CSS-only image slider does). And navigation isn't obvious.
We needed something compact that would display all the ads in turn but, at the same time, let you jump to any one of them.
We did find some fairly compact code by Jason M. Knight written three years ago that came close to what we wanted. It was a responsive image slider with a progress bar to indicate the timer status with a Pause/Play control and individual image selectors so you could jump around. It also had Previous and Next arrows so you could cycle through the list of ads quickly.
CODE MODS
The code for stuff like this comes in two pieces: the CSS style sheet that determines how things look (along with the HTML itself) and the JavaScript file that determines what happens. We had to modify both.
We modified the CSS to reflect our site's signature teal color highlight. And because we have so many affiliate ads, we had to shorten the length of the timer status bar.
In the HTML, we made one further tweak by wrapping the whole thing in a box (as we've been doing) to contain it. We added a little headline to the box, too, so you'd know what you're looking at.
The big problem, though, was that the ads weren't rotating. We'd get one up there and then another would sit underneath it and subsequent ones would replace the lower ad.
That's because the JavaScript was looking for image tags and what we had were image tags, links and iframes. When we changed the code to look for all three, the rotator started to behave.
We just had to shorten the time each ad was displayed. Long enough to read but short enough you weren't watching the timer's progress bar for entertainment.
RESULTS
This gives us a more compact affiliate listing showing each ad in turn but letting you quickly cycle through them with the subtle Previous and Next arrows at the side of each ad or jump around using the selector buttons at the bottom, which light up to show which ad they belong to.
And when you do see an affiliate you'd like to visit, just click it and off you'll go because the images are all links.
You'll discover some sweet deals and at the same help support what we do here with the small commission we earn when you buy something from one of our affiliates.