It’s true what they say isn’t it? Some time away can really help you overcome a tricky project. I recently returned from an 10 day break during which for the most part I managed to get away from work; web design work in particular.
Most of my websites now are now built with mobile and tablet devices in mind. My hope that by the end of the year they all will be.
However since it was created in 2012, the website for my longest serving client has been missing out on the benefits of a mobile optimised display. Not just from the point of view of web layouts. It had elements served by Adobe Flash which is unfortunately on the way out for animation and interactive multimedia development and was never supported in Apple products from day 1.
One of the biggest jobs of this project was to take those out and put in replacements so that all devices would get the same experience.
Even as late as Monday of this week I was sitting there scratching my head wondering how I was going to get this new HTML5 gallery to work.
For too long I tried with this
So eventually, stripped “slick” out and worked on another solution. See below.
It’s not as if this wasn’t all that dissimilar to “slick” either. All you need to get this goingis a simple HTML structure of a div element with a unique identifer, another set of divs for your “slides”; some simple CSS styles and some jquery.
It was very easily customisable. I just had to know which css selector to bind the funtionality to. And before I knew it, I had a working functioning image gallery with buttons for “next” and “previous” slides that looked good in all screen widths and therefore device sizes. Suddenly the end goal didn’t seem so far away anymore.
But there was still one more isntance of a gallery I needed. In autoc.co.uk, a rolling web gallery of 3 images in one row was served by Flash. But as we’ve discussed this isn’t visible on apple devices. But not only this, such a system is not possible with a fixed width web asset. The 3 images in one row structure had to go.
It would have been easier to sort this with the same image slider I found from SitePoint. But try as I might, I couldn’t adapt it to apply a fade effect that matched the existing gallery with jQuery.
So to finish off I went found this custom solution for a cross fading gallery.
Again, this works the way, with a basic HTML structure containing each slide image.
It doesn’t get much simpler than that. And now the new setup is almost ready to deploy.
This will be my last blog until after I move. I’m looking forward to the next few weeks when my new working environment comes together and I can get back working some exciting web projects in earnest. And the place I’m going to is very nice too 🙂
It’ll be sad to leave Teesdale where it all started for me but new beginnings and fun times are afoot 🙂