Annoying.js

The file itself is commented with “functionality”, so I won’t bother repeating it here. You can invoke different functions via the Annoying object: Annoying.noSelect(); will disable text selection, Annoying.noRightClick(); will disable the context menu, and Annoying.kitchensink(); Will turn all the functionality on. But you’re not going to use it anyway, right? ;)

JavaScript is evil!

As you can see, you can do some pretty bad things with JavaScript that will certainly drive your visitors away (or insane!). So why is this kind of functionality available? Some functions is actually very useful if you’re writing complex “html5″ web applications. By disabling text-selection on interface elements you can make the application easier to use, and you can re-implement the right click menu using your own options.

Breaking out of iframes is something I think more websites should implement, actually, if only to prevent the “OMG!!!! Look What this Kid did to his School after being Expelled! ” scams that all of my friends on Facebook keep falling for.

Using JavaScript to resize someone’s browser without consent should be reason enough to revoke someone’s license to making websites, though.

Let me know if you have any horrible additions!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Annoying.js: How to be an asshole

Getting the profile picture the normal way

Getting via the normal way is quite easy, it’s this link:

http://graph.facebook.com/<user.id>/picture?type=large

If you’re happy with a 200px wide image, you’re best off using this link.

Impossible?

All questions I found regarding getting a full size profile picture ended in “it can’t be done”. But I’m a stubborn guy, so I asked about it again on the Facebook developer forums and then went to work with the (horribly underdocumented) Facebook JavaScript SDK. I got it working and a couple of days later someone posted an FQL method as a reply to my forum thread. Both methods take two API calls, so it’s a matter of preference which one you want to use. I’m posting them both.

Assumptions

The following scripts assume a couple of things:

• You’re obviously using the Facebook javascript SDK
• You have an authenticated Facebook user
• You have requested permission to access user_photos
• All you care about is the URL of the full size profile image

Graph API method

The following Graph API method works by doing two API calls: The first requests all the user albums and gets the ID of the album with the name “Profile pictures”, the second gets the first image from that album. Conveniently, the current profile picture is always the first in the returned list.

//Get a list of all the albums
FB.api('/me/albums', function (response) {
  for (album in response.data) {

    // Find the Profile Picture album
    if (response.data[album].name == "Profile Pictures") {

      // Get a list of all photos in that album.
      FB.api(response.data[album].id + "/photos", function(response) {

        //The image link
        image = response.data[0].images[0].source;

      });
    }
  }
});

FQL method

The FQL method also requires two api calls: one to get the user id, and a second FQL query for that user’s profile picture. You could lower this to one API call if you store the user id sometime earlier.

//get the current user id
FB.api('/me', function (response) {

  // the FQL query: Get the link of the image, that is the first in the album "Profile pictures" of this user.
  var query = FB.Data.query('select src_big from photo where pid in (select cover_pid from album where owner={0} and name="Profile Pictures")', response.id);
  query.wait(function (rows) {

    //the image link
    image = rows[0].src_big;
  });
});

There you go!

A full size Facebook profile picture, free for you to do all sorts of cool stuff with. Let me know if you build a cool Facebook app and have been able to use this!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Full size profile picture via the Facebook JavaScript SDK

SenCSs

When last written about, SenCSs was at version 0.7. We’re currently at version 0.8.1, with a bunch of vertical rhythm fixes, mostly for form elements, and added support for HTML5 elements. You can now add it to the list of “HTML5 CSS frameworks”. ;) Though, “framework” it is not, so I decided to just rename it to what it is: a Baseline.

Get more info at SenCSs.kilianvalkhof.com

F.lux for Ubuntu

After releasing F.lux for Ubuntu this summer, It went from 1.1.1 to 1.1.8 mostly improving stability and making different parts of the application (such as the preview button) work more like users expect. I’ve also been working on KDE/XFCE support, which was kind of finnicky due to the way I select the indicator applet icon. Version 1.1.9, which will be released soon, will hopefully bring this support. After that, it’s onward to 1.2, which will include the ‘turn off for an hour’ functionality.

Get more info at stereopsis.com/flux/linux.html

Trimage

After announcing Trimage in March of this year, I’ve gone from 1.0.0-beta to 1.0.5, with a slew of added functionality in between. I’ve gotten a lot of help from people such as Tarnay Kálmán and Thomas Lété in adding cool new functions. Here’s what has changed since 1.0.0:

• Correct unicode support for all filenames
• Adding a notification area icon
• Using a threadpool for processing (much faster)
• Showing more statistics when compressing
• Window geometry and last opened directory are now remembered
• Ability to drag in entire folders
• Prevent Trimage from overwriting already smaller images
• Add PNGcrush to get even better compression
• Miscelanious speed improvements

A while ago I tried getting Trimage into Debian via debian-mentors. This was unfortunately a very opaque process and in the end no-one wanted to sponsor Trimage despite numerous changes to the build system. I’d still like to get Trimage into the main repositories, so if anyone wants to help me out, that would be greatly appreciated.

For 1.1, Paul is going to update the command line options and generally use his python-fu to improve stuff.

Get more info at trimage.org

Grafico

Announced at the beginning of this year, Grafico has seen a bunch of cool improvements. Within a week, Jan Paul Posma implemented stream graph functionality (after I mentioned the math was much too hard for me, ahem…). Since then, David Parry added stacked bar charts, Rémy Coutable greatly improved my hover code while Jaap van der Meer improved the control of text in the hovers, Menno van der Sman implemented an awesome axis-value algorithm and a lot of options have become much more customizable. Most charts now support negative values as well as positive values, and I’ve done a whole slew of bug fixes and speed improvements.

Get more info at Grafico.kilianvalkhof.com

All in all, a whole bunch of work by a whole bunch of awesome people!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Open source updates

I encountered this bug while building Lystener. I change the location hash there quite often, and each time I did, the favicon would disappear. Finding the root cause took me quite a while, and apart from the bug report I could not find any page describing why this happens and what to do about it. So I figured that I’d write a quick post about it to make it Google-able at least.

Luckily, there is an easy fix: Just reset the favicon after changing the window.location.hash. Here’s a jQuery function that does just that:

function setFavicon() {
  var link = $('link[type=image/x-icon]').remove().attr("href");
  $('<link href="'+ link +'" rel="shortcut icon" type="image/x-icon" />').appendTo('head');
}

It’s fairly straightforward: We find the current <link> referencing the favicon, remove it, and then, making use of jQuery’s standard of functions returning themselves, get the href attribute of the just-deleted link. Then we simply set that as the href in a newly created link element, and add that to the head.

Just execute that function each time you change the window.location.hash, and you’re all set!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

The case of the disappearing favicon

Demo

If you’re the impatient type, I’ve set up a simple demo: A simple list filter with jQuery.

The HTML

The basic HTML you need for this is simple: just a header and a simple unordered list. They both have id’s so we can easily and uniquely find them:

<h1 id="header">List of countries</h1>

<ul id="list">
  <li><a href="/australia">Australia</a>&lt/li>
  <li><a href="/austria">Austria</a>&lt/li>
  <li><a href="/belgium">Belgium</a>&lt/li>
  …
<ul>

With the HTML ready, here is what the filter function needs to do:

1. Add an input to the header
2. Set up events to check when someone is typing in the input
3. Check the value of the input, and compare it to the countries in the list
4. Hide the non-matching ones, while showing the matching ones

Step 1: add an input to the header

We’ll start with a simple function, we’ll call it listFilter:

function listFilter(header, list) {
  …
}

As you see, the function takes two arguments. We’ll use jQuery to select the aforementioned header and list and give them as arguments to our function. Next, we need to create a form with an input in it, and append it to the header:

function listFilter(header, list) {
  // create and add the filter form to the header
  var form = $("<form>").attr({"class":"filterform","action":"#"}),
      input = $("<input>").attr({"class":"filterinput","type":"text"});

  $(form).append(input).appendTo(header);
  …
}

Using $(“<form>”) (with brackets) we can create new elements, and by inserting the input into the form using append(), and then using the appendTo() function to add the form (with the input in it) to the header, we easily add it into the page. For easy of use I’ve given both the form and the input classes, so you can style them easily.

That’s step one done, but it doesn’t do anything yet, for that we need to…

Step 2: set up events

To check for text in the input, we can use the change event. This fires every time the value of the input has changed, but only when you exit the input. However, this doesn’t work with a letter-for-letter filter. For that, we need to watch the keyup event a well. We use keyup instead of keydown because it fires after you pressed the key, and so the value of the input then includes the just-typed letter. With keydown, the event gets fired before the letter is added, so JavaScript can’t pick it up in the value of the input.

While using two events, there is no need to do double work. When we receive a keyup event, we just fire a change event:

function listFilter(header, list) {
  …
  $(input).change( function () {
    …
  }).keyup( function () {
    // fire the above change event after every letter
    $(this).change();
  });
  …
}

We’re now all set to start with the actual checking!

Step 3: compare the values

jQuery has a way to check for matched elements easily: the :contains() selector. Using this, you can very easily select all element containing the text between the parenthesis:

function listFilter(header, list) {
  …
  $(input).change( function () {
    var filter = $(this).val(); // get the value of the input, which we filter on
    $(list).find("a:contains(" + filter + ")").parent().slideDown();
  });
  …
}

The code above works like this: in the list, which is the <ul> element. it finds all the shows all the <a> elements that contain the value in the input. It then selects the parents of those <a> elements, the <li>‘s. Those li’s then get shown. However, since we filter the list, we need to also hide all the li’s that do not contain that value. For this, jQuery offers the :not() selector, and we can just wrap that around the :contains() selector, like so:

function listFilter(header, list) {
  …
  $(input).change( function () {
    var filter = $(this).val(); // get the value of the input, which we filter on
    $(list).find("a:not(:contains(" + filter + "))").parent().slideUp();
    $(list).find("a:contains(" + filter + ")").parent().slideDown();
  });
  …
}

There, now with each keystroke, we check the list for matching elements, and hide the ones that don’t match. Easy-peasy.

But wait. What happens when you clear the input? Then $(this).val(); will be empty, and nothing matches with empty. So all list items will be hidden, the exact opposite of what we want. This can be remedied by just checking if $(this).val(); has any value, and if not, just showing everything:

function listFilter(header, list) {
  …
  $(input).change( function () {
    var filter = $(this).val();
    if (filter) {
      $(list).find("a:not(:contains(" + filter + "))").parent().slideUp();
      $(list).find("a:contains(" + filter + ")").parent().slideDown();
    } else {
      $(list).find("li").slideDown();
    }
  });
  …
}

Typing in letters now filters down the list, and removing them all shows the entire, now unfiltered, list again. Is that all we need? Well, It would be, except that :contains() is case-sensitive. so if you filter with “austria”, you won’t find Austria!

Building a case-insensitive :contains()

jQuery allows you to add your own selector expressions, and we can use that to build our own contains filter that’s a bit more sensible:

jQuery.expr[':'].Contains = function(a,i,m){
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

This adds a :Contains() (note the uppercase) option to your selectors that does the same as :contains(), but it first converts all text to uppercase, and then compares them. So once we add this to your JavaScript, all we have to do in our listFilter function is replace :contains() with Contains() and we have a fast, simple, progressively-enhanced way to filter down a large list!

Demo

If you want to browse through the entire, documented code, and see it in action, check out the example page: A simple list filter with jQuery.

Please let me know in the comments what you would use this for, and please let me know your remarks and questions!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

How to build a fast, simple list filter with jQuery

Graphs

This means you get awesome graphs such as stacked area charts and sparklines, but no pie charts or bar charts with every bar a different color. There are a lot of bad charts out there, and Grafico will do it’s best to prevent you from adding charts onto that pile. ;)

Website, Documentation (might be slow on some browsers due to all the examples)

Grafico requires Raphaël 1.0+ and Prototype.js 1.6+

Each graph type has numerous API options to customize it’s look and behavior. Many examples of this can be found in the documentation. Some highlights: pop-up hovers, meanlines and watermarks. Minified, Grafico is about 30kb and available under the MIT license.

Grafico is also available on Github and includes a minification script made by Menno using the Google Closure Compiler.

History

In april 2009 I started working on new visualizations for Wakoopa. I had set it my target to provide unique and interesting graphs. One thing that particularly inspired me was the stream graph, but the math behind it scared the crap out of me. I decided to focus on stacked area graphs instead.

After doing extensive research on the available JavaScript charting libraries, and being slightly disappointed by most, Ico by Alex Young was the most promising. In the (almost ) year I worked on it, the graphs, code and API changed considerably. To avoid confusion I decided to rename my version to Grafico.

Todo

As always, there are points of improvement. The major one is speed. Grafico is very speedy on modern browsers, but of course IE lags behind. When building graphs, drawing pop-up hovers for all data points takes too much time and I have yet to find a way to improve this. The project lives on Github, so if you have improvements, fork away and I’ll gladly pull them!

Update! (16 Feb 2010)

Jan Paul Posma wrote the code to implement the aforementioned stream graphs into Grafico. Which is awesome. I have updated the links in this article accordingly.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Grafico: Javascript charting library

Typeselect

Let’s take a look at the new kid on the block. Typeselect is based on version 0.12 of Typeface.js, and defines it’s goal boldly in a custom, text-selectable font on it’s homepage:

You shouldn’t have to compromise the design or the user’s experience to have selectable text.

Amen!

Typeselect acts as a layer above Typeface.js. You should take this as literal as possible, since the way Typeselect works is by adding transparent text on top of your replaced text. Script-wise, added to Typeface.js are jQuery 1.3.2 and their own js file, typeselect.js that takes care of the actual selection of text.

Including Typeselect in your website

<head>
…
  <script type="text/javascript" src="js/typeface-custom.js"></script>
  <script type="text/javascript" src="fonts/nilland_regular.typeface.js"></script>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/typeselect.js"></script>
…
</head>

While it takes two more javascript files when compared to Typeface.js and Cufón, chances are that you already use jQuery and you can always choose to combine multiple javascript files. When we move on though, actually changing the font is pretty easy. By adding the class select to the elements you want to replace, and adding your typeface.js converted font to the css, the font will be replaced!

<div class="myclass select">
…
h1,  h2 {
  font-family:nilland, Georgia, Serif;
  font-style:italic;
}

Future?

It seems that Typeselect aims to be a layer above typeface.js and Cufón to provide selectable text for both. Apart from that, better rendering of the fonts is on the roadmap as well as a host of other things. Only… Typeface.js currently has it’s own, very similar, implementation of selectable text built right in. Actually, as far as I can see, it’s identical. So without Cufón support, I’m not sure if Typeselect is the best choice you can make.

Typeface.js

Typeface.js added text selection in version 0.13 in the same way as Typeselect: selectable text is implemented by overlaying real, transparent text on top of the rendered text. Pretty smart! AS you can see on Typeface.js’ download page, it works really well.

However, by doing this, performance goes down a bit. Not enough to really notice it, but if you want to disable it, there’s an app option for that. By adding the following to your <head> in a script element, selecting text gets disabled:

_typeface_js.configure({ disableSelection: true })

Cufón?

So, where does that leave Cufón? Well, text selection is planned in version 1.2. Right now Cufón is at version 1.08, so we’ll have to wait a little longer.

Conclusion

For now, Typeface.js is pretty much the best way to use good looking fonts while also allowing selectable text, cross-browser. However, with some work, @font-face can be made working in Firefox 3.5, Safari 3.1+, Opera 9+, Internet explorer 4+ and Chrome 0.3+. So, basically every browser. However, it is a lot of work compared to using Typeface.js, Cufón or Typeselect.

Personally I think that in most browsers, using the javascript replacement results in better looking text, and it’s definitely easier to implement. In terms of forward compatibility, @font-face is a better choice. It’s up to you!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

The state of selectable text-replacement

Canvas

…is pretty easy. There are good guides available, not the least the one from Dive into HTML5, Let’s Call It A Draw(ing Surface). You need them, because there are a couple of gotcha’s. For example, to get different colored lines, you need to explicitly start new paths (but you don’t have to explicitly end them, just draw them on the canvas before starting another line). Once you get the way this works, it’s pretty much straightforward from there.

Another example is that in canvas, pixels are seen as small squares (yes, really.) When you draw a line from a pixel, it actually draws the line centered in the top-left corner of the pixel. When it renders, that means that the line gets blurred because it’s actually drawn on two pixels. This means that in order to correctly draw a 1px wide line, on a single pixel, you actually need to position it 0.5 pixel further. (so it’s in the ‘middle’ of the pixel). It turns out, that sort of fails in Firefox (but not in Safari) because of a rounding error. If I used +0.5, Some lines just wouldn’t appear! However, if you just subtract 0.5, then everything works as expected.

Download and demo

The whole project is hosted at github as well: gridBuilder.js on Github. gridBuilder.js is 4kb unpacked, uses jQuery and works in real browsers*. It’s dual licensed under the GPL and MIT licenses.

*A real browser here is defined as one that supports both canvas and data-url’s. The latter is being used to set the canvas as a background image for your element.

Code

Since it’s a jQuery plugin, gridBuilder.js works for any jquery element. gridBuilder.js offers 5 customizable settings, a primary and secondary color for gridlines and secondary gridlines (positioned in the middle between two gridlines), a height for the vertical rhythm, a width for the horizontal strokes and a gutter (spacing) for between the strokes.

Entering false for any of the options will disable that particular option, so you can for example just have a vertical rhythm and no horizontal strokes, or disable the secondary gridlines. The default settings are shown below.

$(document).ready(function(){
  $("body").gridBuilder({
    color:          '#eee',    // color of the primary gridlines
    secondaryColor: '#f9f9f9', // color of the secondary gridlines
    vertical:       18,        // height of the vertical rhythm
    horizontal:     140,       // width of horizontal strokes
    gutter:         40,        // width of the gutter between strokes
  });
});

While this is a plugin you’d primarily use while building a website, should you want to remove it via javascript, you can call this function:

$("body").destroyGrid();

Future improvements

I would like to add a floating panel where you can enter all options and have the grid regenerate on the fly, as well as giving you the javascript code to invoke that particular grid. This would make it easier to tweak your grid, since you wouldn’t have to edit your file, save it and then refresh.

It’s hosted on Github, so feel free to fork it and do with it whatever you like :)

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

gridBuilder.js, background grid generator in canvas

How does it work?

Cufón and Typeface.js both work by converting a regular font file into an internal format. On execution, they display the font using Canvas in modern browsers, and VML in Internet Explorer. The benefits of doing it this way is that you do not need to load the Flash plugin. This makes it faster compared to sIFR, and visible on more computers.

Quick stats

Cufón and Typeface are very similar, here’s a quick list of their properties:

Font Conversion

Both Typeface.js and Cufón have an online font converter:

• Font converter for Cufón
• Font converter for Typeface.js

You upload your font, select which glyph groups (which are sets like uppercase, lowercase, numbers, punctuation etc.) you want to include and it returns a .js file containing your font. Typeface.js only supports TrueType (.ttf) fonts. Cufón also supports OpenType (.otf), Printer Font Binary and postscript. The converter for Typeface.js has a build-in check for the font license, and will refuse to convert any font that doesn’t allow embedding.

On uploading, Typeface.js forwards to a page where you can select your glyphs and download your file. Cufón lets you select the glyphs on the first page, and also give you the option to include a bold and an italic variant in the same file. Besides that, it allows you to restrict usage to certain domains, and set the quality of the font (lower quality is faster performance).

I used both to convert Optimer with uppercase, lowercase, numerals, punctuation and extended latin. Cufón’s file is called Optimer_400.font.js and is 27.3kb while Typeface.js’ file is called optimer_regular.typeface.js and is 68.7kb.

Including Cufón or Typeface.js in your website

Cufón and Typeface.js both work by linking to their javascript file and the font file in your <head>:
Cufón

<head>
  …
  <script src="cufon-yui.js" type="text/javascript"></script>
  <script src="Optimer_400.font.js" type="text/javascript"></script>
  …
</head>

Typeface.js

<head>
  …
  <script src="typeface-0.11.js" type="text/javascript"></script>
  <script src="optimer_regular.typeface.js" type="text/javascript"></script>
  …
</head>

To select which elements to convert, you have to add the following <head> for Cufón:

<script type="text/javascript">
  Cufon.replace('h1');
  //If you also include a library, you can add complex selectors like #content h1
</script>

Typeface.js does things a bit differently, and in my opinion, easier. Typeface.js automatically changes all heading elements that reference Typeface.js fonts (which is the first part of your font file name, in our case optimer, and any element that has the class typeface-js:

<div class="myclass typeface-js">
…
h1,  h2 {
  font-family:optimer;
}

Multiple fonts

Both Typeface.js and Cufón allow you to load in multiple fonts. Typeface.js finds them automatically when you specify them in your CSS, and Cufón allows you to use multiple fonts by specifying the font-family in it’s initial function:

Cufón.replace('h2', { fontFamily: 'Qlassik Medium' }); 

Internet Explorer 7

No party would be complete without someone trying to ruin it for everyone, so here’s internet explorer’s problem: for both Cufón and Typeface.js, the script can have a couple of milliseconds of delay, causing the text to ‘flicker’. To stop it from doing so, place the following code right before the closing </body> body tag:

Cufón:

<script type="text/javascript"> Cufon.now(); </script>

Typeface.js

<script type="text/javascript"> _typeface_js.renderDocument(); </script>

Side by Side

Of course, all this is fun, but it would be nice to see them in action besides each other. No worries, I’ve made a Demo Comparison Page.

On rendering, you can see a number of spacing differences. There are especially noticeable when looking at the spacing in the typographic scale, where Cufón performs much better than Typeface.js

Conclusion

Which one is better? Cufón or Typeface.js? In terms of functionality, the difference is small. Cufón supports more filetypes, Typeface.js supports more CSS properties. Both however, support the stuff you’re most likely to need. Typeface.js is easier to use (just use the right font-family and, if it’s not a header, add a class), Cufón is about 40kb smaller in total and handles spacing better out of the box.

For now, Cufón performs slightly better due to handling spacing better, but I don’t think there is a clear winner. That just means that the race is on: the first one to add selectable text wins!

Next Week

Come back next week for an article on how to combine these techniques with @font-face!

Translations

Belorussian translation

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Cufón vs. Typeface.js, which one is better?

How it works

This version is an edit of the original Fancyzoom, available at http://www.fancyzoom.com.

I’m used to writing JavaScript with a library like jQuery or Prototype, but since Fancyzoom was library-free, I decided not to add additional dependencies. Turns out, regular JavaScript makes you type a whole lot more. Here’s what I did:

For next and previous links to work we need to know which images are next and previous, and even if there is a next or previous image. So on initialisation I compose an array of ‘candidate images’. When you then open an image, it checks the position of the current image in the array, and adds or hides the previous/next links accordingly. The first image doesn’t get a previous, the last image doesn’t get a next, everything in between gets both links.

When displaying the links, I add the corresponding image number to the previous and next links (current image number minus one for previous, and plus one for next). When you click either of the links, it finds the image in the array, sets up an onload event, and displays the loading spinner. Once the image is loaded, I remove the spinner and update the previous and next links.

Keystrokes

Now, one of the cool things of Fancyzoom is it’s keystrokes. esc closes the image overlay, ctrl and alt are click-throughs (no overlay, just open the image). Like in OSX you can press shift while clicking to make the zoom effect go really slow. Since I was adding next and previous links, I wanted the arrow keys to work as well.

I started with PPK’s key reference page to see which charcode I had to use. PPK then gave me a smart tip: “Use keydown, not keypress. Saves you a lot of hassle.”. Fancyzoom used keypress, which indeed make things more annoying to do cross-browser. I changed it to keydown, and it worked without having to change any of the other code. In the end it worked so well that for kicks I also added the spacebar as a way to go to the next image.

The above is of course only a cursory view of the changes made, but the fancyzoom.js and fancyzoomhtml.js files themselves are well documented so with minimal JavaScript knowledge you should be able to follow what’s happening. (and if not, don’t hesitate to ask!)

Download

Fancyzoom exists out of two files, and I added a third CSS file to it (which you can just copy/paste into your own css file)

• Fancyzoom.js
• Fancyzoomhtml.js
• Fancyzoom.css

License: this is free for personal use. For all other uses, refer to the full license in the fancyzoom.js file.

You can see it in action on the numerous software pages on Wakoopa, for example the Safari page or the Openoffice page.

Let me know what you think, and if you have improvements I’d love to hear them!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Fancyzoom image gallery functionality