Inlux Slideshow

Inlux Slideshow

A Javascript Portfolio Slideshow

The Challenge

As mobile views continued to grow, and mobile devices cracked the top 10 of my Analytics, it became clear that a Flash portfolio slideshow was becoming a liability.  

I knew it was possible to use javascript to create an animated slideshow, however at the time the prefab options were basically non-existent. There were two, maybe three available, and while they worked, none of them looked professional enough for production use.  

My Solution

Having a clear vision of what I wanted - scaling images, with an overflowing slider as opposed to crossfades - I was able to start breaking down how such a thing could possibly come together. In this process, I became aware of jQuery, and quickly realized that it would provide the ease of use that I, a first timer, would need to get this done.

I started by coding out the image scaling logic, which I eventually split off into my scaleImages plugin. This solved a problem which to this day is widespread amongst photographers - images that are in no way optimized for the viewport size. It was much worse then, with no to very little support for modern features that can help this situation - media queries, vw and vh, calc, etc.  

Luckily at this time Chrome, Firefox and Safari javascript animation performance was getting pretty good, definitely usable for this purpose.  Although I had to dumb down the animation for IE, I was still able to achieve the overflowing slider I wanted, and most importantly it looked really good on mobile.

The last problem was, unsurprisingly, image size.  There was no srcset, and loading 100+ images large enough to fill large laptop displays would create a ton of lag until the images finished loading.  I eventually added lazy loading, loading the minimum number of images necessary.

In my opinion, this was a relatively ambitious first javascript project, and throughout the process I learned the fundamentals of both javascript and jQuery, while gaining a solid understanding of the underlying ideas that drive a javascript app. Ever since, although I don't have every object and method memorized, I know enough to find the answers I need.