Interactive Features for Digital Publications

7 jQuery Plugins

We look at seven exciting jQuery plugins for making interesting and compelling digital publications.

Crafting a story for online publication is a task that involves more than words. The web is an exciting, interactive medium, with many ways to delight and engage readers.

Some of the tools at our disposal are about engagement – smart commenting, social sharing etc. Others are about design and interaction, from simple slideshows to fancy parallax scrolling. There’s also the ‘behind-the-scenes’ tools that ensure a great experience regardless of screen sizes or use cases. Or simply the tools that make life easier.

Here, we’ve taken seven jQuery plugins that complement the digital publishing process, from making sure videos are responsive, to making life easier for the publisher, to styling cool headlines.

One caveat – make sure that no matter what plugins you use, that your content can still work without them, and that your content is still accessible. It’s also worth looking at minifying and combining scripts, to improve load times for your readers.

7 Great jQuery Plugins for Digital Publications

Lettering

image

Lettering.js (http://letteringjs.com/) allows you to do exciting things with text, by applying spans around individual words and letters. This is a great tool for enabling exciting headlines with colour ranges, better text shadows and more complex layouts.

Flexslider

image

Flexslider (http://flexslider.woothemes.com/) is, one the surface, just another image gallery plugin. What makes it interesting is that it’s responsive, so it works great at different screen sizes, and that it’s touch-enabled, so it works great on touch devices like tablets. There’s also a lot of customisation options. It’s truly a flexible slider plugin.

Touchswipe

image

The Touchswipe jQuery plugin (http://labs.rampinteractive.co.uk/touchSwipe/demos/) gives you access to the touch features of touch input devices such as the iPad and iPhone. It lets you detect inputs like swipes and pinches with lots of variables and thresholds. This means you can do things like page swiping, scrolling etc.

Tooltipster

image

Simple but effective, the Tooltipster (http://calebjacob.com/tooltipster/) plugin lets you add great looking tooltips. Provide definitions, biographies or tangental information with a simple piece of code.

Fitvids

image

Most video embed scripts (such as YouTube & Vimeo) include fixed size dimensions for the video player. This is so the aspect ratio is correct. The problem – this isn’t responsive. We want our videos to fill containers as they get bigger or smaller on different devices. FitVids (http://fitvidsjs.com/) solves this – it calculates the aspect ratio of the embedded video and recalculates the dimensions on the fly. FitVids works with the popular video hosting services, but you can add your own too.

Dotdotdot

image

Another ‘behind the scenes’ plugin, dotdotdot (http://dotdotdot.frebsite.nl/) adds ellipsis (these three dots, though it’s actually a character in itself …)  to the end of blocks of text that overflow their container. Say your design allows for three lines of text in descriptions, but you have a slightly longer piece of text; or you use headlines as navigations, but want to have a maximum character length. Dotdotdot will figure this out for you once you fix a container size, and make sure your clipped text looks good.

Jquery-Include

image

jquery-include (https://code.google.com/p/jquery-include/) is really simple way to include common HTML snippets. You probably have text blocks that are common throughout your publication (for example, the footer) or chunks of code that are reused everywhere (maybe a table of contents). Include lets you, well, include them as separate files, making updates a lot easier.

Leave a Reply

Your email address will not be published. Required fields are marked *