HODA CODEX: The Story – part 2 – Isotope plugin

Isotope - Metafizzy

Isotope by Metafizzy

As I mentioned in the previous post, it is when I discovered the Isotope plugin that I imagined the current version of the hodacodex, for me it was obvious that replacing the colored squares by the portraits of the heroes would give a superb effect.
But I had a lot of work to do before I got there !

I am not a web developer and apart from some basic knowledge in HTML and CSS, I had never really practiced php or javascript …. so I had to learn to code with these tools first.

I had a clear idea of what I wanted to do with Isotope and I needed a pop-up system to display the hero information.
I found Overlib, a Javascript popup library by Erik Bosrup, essential for managing the display of descriptive popups of heroes and also picked up some scripts from the Dynamicdrive website.

After a lot of time and work, it’s in April 2015 that I put online a version in static Html but which already contains a large number of filters.

hodacodex 1st static version

Probably too much ….. 😉

Thanks to the project The Wayback Machine, there’s still a slow but relatively functional copy of this version at the following address: https://bit.ly/2ICavsv

The whole site was entirely in French but I decided to display the name in English at the bottom left of the hero’s card.

All the graphic elements of the current version were already present:
For example, I had created some icons to quickly identify hero’s target, or the icon of the eye to display big picture of the hero.
But above all, I was proud to have succeeded in setting up what I wanted, directly inspired by the Isotope plugin.
All worked very well !

….. to be continued

Hodacodex.com – The Story


  1. Pas encore de commentaire.
(ne sera pas publié)