Our responsive layout is coming on in leaps and bounds, so let’s crank it up even further! Today we’ll look at various jQuery plugins which we’ll use to pull Twitter and Flickr feeds into our page, plus a responsive slider plugin for our features area at the top.
Note: It’s worth mentioning that some of the jQuery plugins mentioned in this tutorial may be out of date (for example, Twitter have made changes to their API which prevent Tweet! from working). Feel free to try alternatives and share your thoughts in the comments!
Preparing the Footer
Before we start implementing various jQuery toys, let’s first tidy up our footer area. We’ll tackle the diagonal line styling behind the h4 elements, place our secondary logo, add the generic dummy content and finish styling the lists.
Having dealt with most of the styling, we can now grab the Twitter and Flickr jQuery plugins which will pull feeds into our document. As we’re starting to add quite a lot of code to the foot of our page, we’ll make a point of compiling that all into a single .js file.
Last, but not least, the responsive slider plugin. We’ll be using the hugely capable Flexslider plugin (recently acquired by WooThemes) and implementing it to show off a few PhotoDune images.
Some useful links to further build on what’s been covered in these videos.
Images courtesy of PhotoDune.