I know I let this cat out of the bag every so often but I’m quite at pains to say at times I’m not a web developer. I try hard to be. I love learning new things whenever I can by expanding on what I already know and learning new things and adapting to the best practices of web design. Lucky I have a steadfast determination, desire to succeed and insatiable love of web design. And in the meantime, the web is like a playground for designers and developers who struggle with complicated web scripts and applications.
On Treehouse, the fabulous computer technology learning website, I’ve learned some wonderful new web design things I’ve already been putting into practice on client websites and my own. One of the things I’m most excited about is the use of CSS frameworks that come from Zurb Foundation and Bootstrap made by the developers at our friends from Twitter.
There’s nothing like a framework to quickly and easily make a website where otherwise you’d have to do it from scratch, which is great but can be time consuming.
It was from Foundation I came across something called “Slick”, a carousel/image slider framework from a developer called Ken Wheeler of Github.
It claims to be to be very easy to setup and use. And it is. Just not for someone like me. You take the nuts and bolts, the little code snippets you’re provided with to customise for your own needs.
Where content is an image or a piece of text, stored in the markup, inside those div tags and later animated in jQuery to fade in one by one after each other.
Then, links to the needed scripts and slick CSS file. All complicated stuff. Read it if you dare! 🙂
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
and the final piece of the jigsaw. The initialiser script that “makes it go”.
And this is what sets me apart from the rest of the planet. I sit there and scratch my head, because it clearly isn’t working, and I’m thinking “why is this page not picking up the jQuery”. It just stacks the images on top of each other one by one, each on it; own line. I’ve done everything correctly. I’ve matched the CSS class to the jQuery class. I’ve correctly linked jQuery. My code is valid and semantic. It’s all there.
Except! Silly me… I need to upload the files to my web server. It sounds so daft because you expect it all comes together locally. And yes, of course there it is! The content boxes no longer stack across each other, but now appear as a nice fade effect in one place. One spot!
All that’s left was to add a little more markup to make the images clickable on each rotation and opened in a new tab on your browser. And voilà.
Now this may not be the final solution I end up using. In fact, it probably won’t be. I’d like at least 3 images appearing at once on each animation. But at a time when I’m struggling for a little of inspiration and motivation it’s great to know one can tun to a ready made, fully available and fully customisable framework to get you started in your web project. Wonders of jquery and CSS3 never cease!