XPANDA Gallery
XPANDA Gallery

XPANDA Gallery

XPANDA is a commercial jQuery plugin that enables a user to expand the teaser item or thumbnail image to reveal content related to the image or element.

Overview

We should learn from our failures. To fail gives us opportunities to try again. That is how XPANDA came to be for what it is today. A four year journey from a aborting a feature to a 5 star jQuery plugin on Envato.

Early in 2013 I was working on a client's website navigation, which had the requirement of displaying menu items in a grid-like format. Along with that, the client wanted each navigation item to expand, revealing a short description underneath, once a user clicked on it.

  • Year: 2018
  • Agency: Envato
  • Scope: jQuery Plugin
  • Tools: HTML, CSS, jQuery
Visit Website

Challenge

I was quite challenged to make sure once an item has been expanded it doesn’t "break" the layout of the surrounding items. As previously mentioned, it was 2013 and support for flexbox was poor across various browsers and I could solely depend on css floats.

XPANDA Gallery

Failure

To be completely transparent, after a few days of struggling to build this menu I realised I was just not going to make it work. Fortunately, the client changed his mind on this solution and I aborted immediately...

Although it felt like I failed, I kept this idea in the back of my mind as I saw some potential.

Redemption

Four years later, while working on another project a fresh opportunity arose. I finally had a chance to redeem myself. This time I can tackle the problem with a new hope as I have gained more experience and my javascript skills have improved greatly.

The requirement from this client however; was to have his team members’ photos display in a grid and once one has been clicked, show his/her biography, contact details as well as links to their social profiles.

With flexbox ready to be used across the majority of browsers I set off to work. It was not even 3 hours later and I managed to code the core functionality. The client was happy… but I was ecstatic!

XPANDA Gallery

Results

I’m sure I am not the only Front-End Developer out there that recieved such a request from a client before so I decided to make a stand-alone plugin so others can use it too. I searched the www to see if there might be a similar plugin but I honestly could not find one.

This was the start of XPANDA, a responsive expandable gallery. I forked and refactored the code, built in a couple of additional features, wrote thorough documentation, created a few examples with accompanying themes and today, you can find it on the Envato marketplace.

The plugin is fully responsive and has been optimized for Chrome, Firefox, Safari, Opera, Internet Explorer 11+, Microsoft Edge and various mobile browsers.

View XPANDA on Envato
XPANDA Gallery
XPANDA Gallery
XPANDA Gallery