Introducing jQuery Previewer

A demo of Previewer jQuery plugn

Innovation is the birth of something not novel but rather something that does much better than earlier similar products. And mostly our innovative minds are put to work when something doesn’t seem to fit right with us — as developers, as designers, even as users and consumers of products and services. When something seems to require more effort and time than it’s intuitively fine with us, we start to think in an innovative and creative way — figuring out a productive and non-mundane solution.

A look at the timeline of history reveals that indeed, creative and disruptive innovations are the ones that often came from the innovator’s personal dilemma and an equal drive to remedy that dilemma. The drive was often personal, not external. Most often it was not a drive targeted at wealth, fame or any of the many other reasons humans do some of the things they do. With many of the innovators that have come along in history, it has always been their personal experience with problems and the non-intuitiveness, intricacies, and convolutedness that clinched to existing working solutions for such encountered problems that turned on their innovative light bulbs. When their innovative light bulbs were lit, they began to look at the existing solutions with a second, new pair of eyes and perspective. They then ended up with questions like: “Could this solution been done in a different way?”, “Can we have something better, effective and more streamlined than what we currently have?”, “Can we be more productive with a different approach at this same problem?”. And most often than not the answer came out as YES. And that YES response has always been the portal that keeps driving this world of ours to places of unimaginable innovations.

The same is the story that led me to the creation of jQuery Previewer. Previewer is a very simplified minimalist plugin that tries not to get in the way of designers and developers aesthetic strategies for their projects. I built this plugin after spending a reasonable amount of time on the jQuery Plugin Registry and many other similar sites on the internet in search of a simple image previewer plugin. After close to 30–40 mins, I ended up with nothing that fitted well and right with the aesthetics and minimalist intent for the project I was working on at that time. I needed something that provided just a few features but the right ones. And with the many image previewer plugins that I found on the internet, they were rather plentiful with features that weren’t needed in the project I was working on. The fact that the number of unneeded features adds to the footprint of my site was the stirring up of my innovative side to consider a remedy — build exactly what you need yourself. And the outcome of building exactly what I needed by myself was Previewer.

Features of Previewer

Previewer comes out of the box with some configurable features. The following configurable options are available in the current version of Previewer.

  1. Keyboard Navigation
    Ability to use the left and right arrow keyboard keys to control the left and right navigation of the image gallery created by the Preview plugin.
  2. Pagination labels— text/bullet pagination
  3. Gallery forward flip-through with the space bar.
  4. Closing gallery in preview with the hit of the escape key.
  5. Fullscreen/Centre image gallery preview.
  6. Image gallery preview effects
    The following CSS3 transition effects are currently supported by Preview:
    1. easeIn
    2. easeOut
    3. easeInOut
    4. outCubic
    5. inBack
    6. inOutBack
  7. Image gallery auto-play

I will be glad to see you take a look at this plugin, play with it and offer some feedback on your experience with it.