Coding a Lazy-Load Website Interface using Unveil.js

by Jake Rocheleau
on June 26, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

There have been a number of recent open source plugins for lazing loading images. A popular choice is Unveil.js which was just recently published onto Github. It is meant to be a lightweight version of the original LazyLoad plugin built over jQuery. After testing out a number of different features I am a huge fan of Unveil.js.

Interface design is incredibly simple once you understand the basics. It will take some practice getting used to the code samples and writing your images properly. However the lazy load plugin can showcase tremendous support across all typical web browsers. Not to mention the popularity among users who are transferring data over slow Internet connections. The lazy load plugin will shave off latency times and still provides an exhilarating user experience.

designmag jquery tutorial preview lazyload images plugin

Read More

Making Draggable Webpage Elements using jQuery

by Jake Rocheleau
on May 29, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

There are so many various plugins and scripts to use for making draggable elements. Some of them allow you to create upload forms or dynamically sorted webpage tables. However, what about just creating some very basic functionality to give users the ability for dragging items through the page? The jQuery UI Draggable feature has all of this and it is very simple to add into your website.

I want to demonstrate how using a very simple jQuery UI script will allow for any objects to be dragged along the page. Since this is all built into jQuery we have the ability to use callback functions, which are sort of like unique JS codes we write whenever a user drags or drops an item. There are so many different examples on the jQuery UI website that you should definitely go and check out. I am not using anything overly complex, but you can also see my live demo or download the source codes from the links below.

jquery ui draggable drag elements html5 howto tutorial

Read More

Building an Image Slideshow UI Switcher with jQuery

by Jake Rocheleau
on March 31, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

A lot of newer e-commerce websites and blog archives have started organizing listings in various formats. The interface will feature a set of icons to switch between different views, such as thumbnails or full details. It can be a pleasing design aesthetic for many typical webpages where you need to share a lot of content which can also be easily indexed.

For this tutorial I want to demonstrate how we can build a slideshow UI switcher for a set of photos. Users have the ability to flip forward and backwards in the photos list, or choose a specific image from the thumbnail view. I believe this interface can work with almost any type of slideshow webpage layout. And if you are running a dynamic CMS then you could build a page template which includes dynamic images inside the unordered list element.

Read More

How to Build an iOS-Style Content Slider using jQuery

by Jake Rocheleau
on February 25, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

There are loads of tutorials online which are related to dynamic slideshows and image galleries. Typically web developers have been using jQuery to enhance the media in these content sliders. Many other ideas have come to fruition and this has spurred a generation of brand new plugins for jQuery developers.

In this tutorial I want to focus on one of these plugins called iosSlider. This is an open source project with numerous options for customizing your own media slideshow. This includes typical animations and effects for when the user clicks or hover over slideshow items. Additionally we will include some dynamic text as seen on the website demo. This UI style is perfect for improving the creativity of more generic or bland website layouts.

jquery plugin slideshow slides ios demo tutorial preview

Read More
Page 4 of 25« First...23456...Last »