jQuery Unveil : A very lightweight plugin to lazy load images

jQuery Unveil : A very lightweight plugin to lazy load images

A very lightweight jQuery plugin to lazy load images.This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won’t be loaded until the user scrolls to them. Lazy Load has some cool options such as custom effects, container, events or data attribute. If you’re not gonna use any of them you can reduce the file size by leaving just the essential code to show the images. That’s what I did and this is my lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays – less than 1k<.

Lightspot jQuery Slider – Standalone

Lightspot jQuery Slider - Standalone

Lightspot Slider is a standalone jQuery plugin that allows you easy and fast to create and control image slider for your page header.

Features:

  • Uses Image Preloader
  • Image links for further reading (optional).
  • Auto slideshow with pause on hover (optional).
  • Resizable width, height, thumbs width (in pixels).
  • Control number of visible thumbnails
  • Control number of visible right side buttons (can be turned off).
  • Image description box with option for individual background color (optional).
  • Thumbnail description box with option for individual background color (optional).
  • Multiple instances

JAO File Tree : A jQuery file tree plugin

JAO File Tree : A jQuery file tree plugin

Just another jQuery file tree plugin.

HeapShot : jQuery Stack Image gallery plugin

HeapShot : jQuery Stack Image gallery plugin

jQuery HeapShot plugin is an image gallery plugin with a stack effect.

Display Product Information on a Hover over Thumbnails using jQuery

Display Product Information on a Hover over Thumbnails using jQuery

Product List - This could be your portfolio list, product list, image list, etc.  Listing your products with displaying information when hovering thumbnails is useful when selling your products online. I am going to share a simple jQuery code & CSS code to achieve this trick.

Blueprint : Tooltip Menu with CSS3 & JavaScript

Blueprint : Tooltip Menu with CSS3 & JavaScript

This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available. Using Modernizr’s touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.

Menufication : jQuery Responsive Fly-Out Menu with CSS3

Menufication : jQuery Responsive Fly-Out Menu with CSS3

Navigation is one of the most important aspects of a website. The fly-out menu (with inspiration from Facebook) has been proven to be the most efficient navigation that dramatically can improve your visitors experience on your website!

Menufication is a user-friendly, customizable jQuery-plugin to transform your sites navigation to a responsive fly-out menu in Facebook fashion.

Features:

  • Utilizes CSS3-tranforms for optimal and native-like performance.
  • Swipe to open/close the menu (iOS only in v1.0).
  • Option to only generate the menu on predefined browser sizes.
  • Option to only generate the menu on mobile devices.
  • Support for hierarchical menus.
  • Several options to customize the behaviour of the menu.
  • Only dependency is jQuery.

Bootstrap Multiselect : jQuery based multiselect dropdown menu plugin

Bootstrap Multiselect : jQuery based multiselect dropdown menu plugin

Bootstrap Multiselect is a jQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.

CrSpline : jQuery animation plugin – Catmull-Rom splines

CrSpline : jQuery animation plugin - Catmull-Rom splines

Supports animation along Catmull-Rom splines based on a series of waypoints.

You provide: A series of (x,y) points that the path should follow.
Plugin provides: Animation along a smooth path that intersects all points!

Natural Language Form with Custom Input Elements in CSS3 & JS

Natural Language Form with Custom Input Elements in CSS3 & JS

An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements.The idea is to turn a classic form into one that uses natural language to obtain information from the user. For that we’ll construct a sentence where some words and parts are select elements and text inputs. We’ll then transform the select elements so that we can customize them.

Natural language forms are quite suitable for some UI cases, not for all, of course. They have a couple of limitations but they can also be more engaging for users if used in the right place and in the right way. Anyway, we wanted to give this concept a try and we’ll show you how we did it.