'Net Features : jQuery plugins

Supersize Image-Based Websites

Michael Garrity — Thu, 09 May 2013 19:00:00 GMT

They say a picture is worth a thousand words, so imagine how much you could convey on your website with an attractive, full-screen background slideshow.

Well, you no longer just have to imagine it, thanks to the Supersized jQuery plugin that does just that.

This advanced full-screen background plugin allows designers to display a photo or set of photos as a slideshow that takes up the full width and height of a Web page. And although this may not be ideal for all websites, it can be incredibly beneficial for creative professionals that want to display their work, like photography sites, designer portfolios or event sites.

Supersized integrates with Flickr, so users can incorporate images from their Flickr accounts into their websites. Among the features available on default “Shutter” theme for Supersized are a progress bar, a slide in/out thumbnail tray, a fluid thumbnail bar based on Thumb Reel and an option for mouse-responsive thumbnail scrubs. It also supports multiple transition effects, including carousel, fade and slide right.

Sam Dunn of One Mighty Roar created Supersized as a Build Internet project.

Lettering.js Ensures Truly Fontastic Web Designs

Michael Garrity — Thu, 09 May 2013 18:45:00 GMT

A good font can make all of the difference between an attractive website that effectively communicates its message to visitors and one that, well, doesn’t do that.

Unfortunately, at present, CSS doesn’t offer a complete down-to-the-letter control option that allows designers to tweak individual aspects And that’s why a jQuery plugin like Lettering.js can go a long way in improving the look, feel and, most importantly, readability of your website.

Lettering.js works by splitting the textual content of a letter element into distinct individual spans (using ordinal .char# classes). This allows designers to style each letter individually, thus giving them considerably more control over the typography on their websites, and how visitors will view their messages.

The plugin was developed by the Paravel development team, and is currently employed by a number of notable websites, including Crayola. It is also available on GitHub.

Parallax Scrolling, Responsive Design Make Nice

Michael Garrity — Thu, 09 May 2013 18:40:00 GMT

Responsive design is top-of-mind these days for website owners and designers, alike. Plenty of developers are also talking about another hot new trend sweeping the Web known as parallax scrolling.

If you haven’t heard, parallax scrolling is where different layers of a Web page move across the screen at different speeds as the user scrolls up or down, allowing for a site contained entirely in a single page with sectional transitions taking place through the act of scrolling. And if you’re unfamiliar with responsive design, it’s a tactic that designers employ to ensure that a website or page renders in an optimal, user-friendly way on any device that someone may be visiting from.

However, while both of these topics are of interest to many Web developers, it can be difficult to make them work together, largely because of the technical complexities that can be involved in parallax scrolling. But one solution to this problem is the jQuery plugin known as Cool Kitten, a framework collection of HTML/CSS and JavaScript files that creates a beautiful, and responsive, parallax scrolling effect.

The plugin was created by Jalxob using Treehouse, Stellar.js, Normalize.css and other resources. It is currently available on the open source project hosting service GitHub.

Extend Image Value by Tagging with Rich Content

Michael Garrity — Thu, 09 May 2013 18:11:00 GMT

Image tagging is a popular new way to make pictures on a website more informative and engaging for users.

Now, website owners and designers can bring that engagement to their own images with the iPicture jQuery plugin that allows users to create interactive image walkthroughs that use the pictures already one their websites.

iPicture makes it incredibly easy to overlay little tooltips and hints on top of the image, which will appear to viewers as small circles with a + sign in the middle (see image below). When users scroll over these icons, they’ll see additional information that comes in the form of various types of rich content, such as HTML, photos or even videos.

The plugin is easy to integrate into a website and can be customized and extended using CSS. Even the individual tooltip icons, themselves, can be altered to match the look and feel of a site.

jQuery Plugins for Increasing Interaction

Michael Garrity — Thu, 24 Jan 2013 20:55:00 GMT

There is one thing that every website, no matter what kind it may be, always wants to see: more user interactions.

However, despite the universal desire to increase interaction on one’s website, the route that each designer and/or developer takes to make it happen can vary greatly. Often, their choices are dependent on the type of site (e.g. content-based, e-commerce, service providers, etc.) or brands that they’re working with. Thus, there are many different ways to go about enticing visitors to engage with a website.

So if you’re one of the many webmasters, designers or developers interested in improving user interactions on your website, check out these 10 cool jQuery plugins designed to do just that, either through easier navigation, greater customization or added functionality.

jQuery Page Peel
Like it says, this plugin makes it easy to create a page peel animation for you Web page that sits at the top of the screen on the right-hand side. When users hover their cursors over that area, the page will peel down and reveal more content behind it. While many websites like to place advertisements behind this peel, it can be used in more effective ways to draw attention to extra content or other website features.

Image Overlay Plugin
Images are a great way to capture the interest of visitors, especially if it’s their first time on your site. With the Image Overlay Plugin, you can reel them in, and then present more text-based information about the pictures that will appear (see image below) when users hover over the images. This way, you can still share information about the images without adding distracting, unnecessary text to your Web page.

jSlideRelatedPages
jSlideRelatedPages is a scroll sliding plugin that helps you engage users when they get to the bottom of your Web pages by displaying a sliding animation (see image below) when they get down there. On the slider is a list of related pages on your site that the user may also be interested in based on the content of the page they are currently on, so that you can keep them on your site and looking at more of your content for a longer period of time.

jFontSize
One of the more overlooked reasons for early site abandonment is poor readability for certain users because of the font size on a particular page (or set of pages). The jFontSize plugin helps to alleviate this problem by making it easy to create those “A+” and “A-“ buttons that some site’s have that allow users to alter the site’s font size, which will make your website far more accessible to a much wider range of visitors.

Overscroll
Users are so comfortable with accessing the Internet on mobile phones and tablet devices these days that it may behoove you to make your whole website mimic the mobile scrolling experience on desktop browsers. Luckily, the Overscroll jQuery plugin does just that by adding a “draggable drift” to overflowed DOM elements and a set of fading “thumbs” to a site. In other words, it allows users to simply click on the site and drag their mouse to move around the site, just like they would using their fingers on an iPhone. While Overscroll works best with Safari 5+, Chrome 5+ and Firefox 3+, it says it should work just fine on pretty much any modern browser.

SimpleModal
SimpleModal gives users a powerful interface for modal dialog development that offers greater flexibility to develop whatever they can envision in the box, while mostly doing away with many cross-browser user interface development issues. The real benefit is that designers and developers can totally customize these modal boxes to fit the style and theme of a website, while also being incredibly easy to implement and manage.

PikaChoose
Anyone who has spent an inordinate amount of time getting lost scrolling through Instagram or Facebook photos will tell you about how great image galleries are for capturing a user’s attention and encouraging them to interact with your site. If you want a simple way incorporate a thumbnail image gallery onto your website, look no further than PikaChoose (cute, no?), which is lightweight and super easy to integrate into any website.

jQuery TextAreaResizer
This plugin is ideal for any website that is using an iFrame to display a Web page, image(s) or form(s), especially if the iFrame uses a fixed height, which can be very inconvenient for users, as they’re difficult to resize across different browsers. That’s no longer a problem though thanks to this plugin, which makes it easy to resize iFrames by equipping them with a grip bar.

Responsly.js
In 2013, more users than ever are going to be accessing your website from mobile devices, so responsive design is going to be absolutely essential to ensuring all of your visitors are going to be willing and able to interact with your site. This lightweight plugin will scale to everything from small smartphone screens to large desktop monitors with minimal dependence on jQuery for convenience. It’s uses pure CSS styling and CSS3-based transitions, meaning it can be heavily customized, and it comes compartmentalized so that developers can use only the features that they want.

Single Drop Down Menu
Add multi-level navigation menus to your website that will keep users interacting with your tabs and links while they search for the content that they came looking for. The Single Drop Down Menu (or Single-ddm) applies mouseovers to a preformatted list and a timer that lets users customize the drop down menu’s stall time. It also supports metadata, meaning each list can have its own special features without multiple function calls.

Bonus: Raptorize
Because who doesn’t want a digital velociraptor run across their website, complete with a raptor screeching sound? It’ll get your visitors’ attention, at least.

Ten Totally Awesome jQuery Plugins

Linc Wonham — Thu, 01 Dec 2011 21:00:00 GMT

December has finally arrived, which means that the Web will be flooded with end-of-the-year lists for the next thirty days. For our part, we decided to kick off the celebration with the following compilation of some of WM's favorite jQuery plugins that either made their debuts or underwent significant updates in 2011.

If jump-starting your designs or just simplifying the development process are on your list of resolutions for 2012, take a look at these jQuery plugins from the past year:

jRumble
Released in October 2011, jRumble gets viewers’ attention by adding a vibrating – or rumbling – effect to any element on a page. It can be used as an effective hover tool or will merely make certain elements of your design stand out.

Simple Overlay
Users can add lightweight, flexible overlays to the entire page or confine them to a single element, and display the overlays using jQuery’s fade effect, slide effect or no effect at all.

FlexSlider (image below)
Released over the summer, FlexSlider is a responsive jQuery slider designed to serve beginning designers/developers as well as providing the more seasoned professionals with a tool they can use with confidence.

My QR Code (image below)
Generate QR codes for mobile devices using the Google Chart API, and the plugin will generate the codes for the URLs of each page. Users can also specify the text, encoding and size of their QR codes.

NivoSlider
Version 2.7 of this image slider was released in November with an added random-start setting, a new flashing caption feature and a data-transition attribute that allows users to set custom transitions per slide.

Reveal
Reveal is a lightweight (1.75KB) modal window solution that has become popular for its style and movement. The plugin is cross-browser compatible with modern browsers and allows users to set up modals in three simple steps.

FitText
Achieve scalable headlines, titles and other large-display text with this plugin that makes font sizes flexible. Users can implement FitText in their fluid or responsive layouts to help fill the width of the most prominent elements.

Isotope
A wonderful tool for creating smart designs, Isotope allows users to hide and reveal item elements and re-order item elements without sorting. The plugin’s animation engine takes advantage of the best browser features when available but will also fall back to JavaScript animation for lesser browsers.

Ajax PayPal Cart
Released in April, this new plugin allows developers to add an AJAX-powered PayPal shopping cart to their sites, and no refresh is required when updating the cart.

Supersized (image below)
Supersized is a full-screen background slideshow that’s been built using the jQuery library, and the latest version of the popular plugin was released just this week with an array of new examples to serve as foundations for your next project.

Roundabout jQuery Plugin

Pete Prestipino — Tue, 29 Dec 2009 03:41:00 GMT

Those who follow the WM daily weblog know our affinity for jQuery and we came across a doozy today (hat tip to WebAppers).

Roundabout is a beautiful jQuery plugin that converts a structured of static HTML elements into a customizable turntable-like interactive area. The plugin works very well with ordered and unordered lists but can also work with a set of nested elements after some basic configuration.

Don't like the turntable effect? No worries, checkout Roundabout Shapes which offers additional paths for elements to rotate. From the "Lazy Susan" to the "Water Wheel" there is going to be something for every design you incorporate this plugin into.

Created by Fred LeBlanc, Roundabout and Roundabout Shapes is offered under the BSD license.

Delay Loading of Images (In Long Pages)

Pete Prestipino — Fri, 23 Oct 2009 15:06:00 GMT

If you're a reader of Website Magazine's Design & Development Digest you are well aware of our affinity (actually it's nearing an obsession) with jQuery. Many of the plugins bring so much value to the Web experience that it's nearly criminal to not metnion those that really stand out when you come across them. Case in point - Lazy Load - a jQuery plugin developed by Mika Tuupola that delays the loading of images in long web pages.

If you've got a long web page with a lot of images then you're going to be impressed with Lazy Load. The plugin forces images outside of the viewport (the visible part of a web page) to not load until the user scrolls to them. The result is that pages load much faster.

Designers can set the threshold on how close to the edge an image should come before it is loaded. You can also set a placeholder image and a custom event to trigger loading. There's a lot more that goes along with it but those are the highlights. Enjoy and let us know what you think!

Stay up to date on the latest Internet trends:
Request a professional subscription to Website Magazine,
the most popular print publication on Web success.

jQuery Plugins For Twitter: Web 2.0 Nirvana

Pete Prestipino — Thu, 07 May 2009 19:33:00 GMT

Don't you love it when a plan comes together? In this case our "plan" is to bring you interesting design and development tools and techniques to make you (or your clients) more successful on the Web.

Today, let's look at a few recent jQuery plugins that will help you tap into the overwhelming popularity of... Twitter.

Tweetlink is a very handy jQuery plugin that enables website visitors to select a button or link (using TweetLink) and when clicked, automatically shortens the URL of the current page using bit.ly, sending the user to Twitter with the status box already filled in.

JTwitter is a jQuery API plugin that when given a Twitter username retrieves and returns a JavaScript object with user details such as followers & following counts, full name, homepage URL, etc.

Juitter is a jQuery plugin that is being used actively by quite a few developers. The plugin can show a live "tweet" stream, tweets from or to a user, and tweets containing a specific word. Juitter has support for multiple users, and developers have the option of restricting search by language. And of course, it's fully customizable with a stylesheet. Here's a quick screenshot of how Juitter could look on your Web property:

TweetQuote is another jQuery plugin (combining Twitter's open Search API and a few basic AJAX calls) that pulls the latest Twitter tweets based on search terms for display on a website. Simply change the load parameter to a desired phrase and you're off and running. Users can even add advanced options (everything from refresh rates to animation speeds and language requests) and the styling of their choice. Here's a sample screenshot of the default TweetQuote install using the Tweet search for "Obama":

Flip! It - A jQuery Plugin

Pete Prestipino — Tue, 16 Dec 2008 21:20:00 GMT

If jQuery were a beautiful woman I would marry it.

I say that because I keep coming across these amazing jQuery plugins that I believe absolutely any website can use to add a splash of interactivity - not because you can actually marry JavaScript libraries. The latest that caught my attention is Flip, a plugin for jQuery that essentially "flips" elements of your website in four directions (bottom to top or left to right and vice versa).

The options this jQuery plugin has are very interesting as well. Designers and developers can define the content of the flipping box (works with HTML, text or a jQuery object), the direction they want that content to flip, the background starting and ending color as well as the speed.

Here are a few recent posts related to jQuery from Website Magazine:

Blow Users Minds With Three jQuery Plugins
jQuery is a JavaScript library that emphasizes interaction between JavaScript and HTML. jQuery is considered quite fast and lightweight and helps designers simplify how they handle HTML documents and events, perform animations and add Ajax interactions to their web pages. I know, I know - snooze.

jQuery Design: Pan & Cross Fade Animations
If you want a little more activity in your images, look no further than CrossSlide, a jQuery plugin which renders slide-show animations through Javascript. The plugin builds on jQuery's animation facility so it's accessible across browsers.

jQuery Design: Pan & Cross Fade Animations

Pete Prestipino — Thu, 25 Sep 2008 15:31:00 GMT

If you want a little more activity in your images, look no further than CrossSlide, a jQuery plugin which renders slide-show animations through Javascript. The plugin builds on jQuery's animation facility so it's accessible across browsers.

There are quite a few effects that render with CrossSlide; Slide and Cross-fade, a Static cross-fade and what the creator calls the Ken Burns effect (panning, zooming and fading to specific points to "guide the eye of the viewer and convey meaning). The latter provides a gorgeuous effect that is sure to impress users. I did my best to capture the effect on video but it did not render well (perhaps due to the animation itself).

Blow Users Minds With Three jQuery Plugins

Pete Prestipino — Tue, 22 Jul 2008 14:59:00 GMT

jQuery is a JavaScript library that emphasizes interaction between JavaScript and HTML. jQuery is considered quite fast and lightweight and helps designers simplify how they handle HTML documents, events, perform animations and add Ajax interactions to their web pages. I know, I know - snooze. But once you see what you can do with it, jQuery gets a lot more interesting. Here are five popular jQuery plugins that you may have seen around the Web and consider implimenting on your own site:

jQuery Virtual Tour: Plugin that allows designers to add interactivity and transform a panoramic image into a virtual tour, providing much more detail within image galleries. Screenshot below:

jQuery Shoutbox: Provides a chat feature for websites that allows visitors to leave messages without any registration. Shoutbox can be styled with CSS, is easy to set up and an archive is available for download.

jQZoom: A plugin that enables designers to magnify an image - essentially providing an additional window layer for the close up. You can see this feature in action on popular ecommerce sites hosted by Volusion.