10 Useful jQuery Image Gallery Plugins

10 Useful jQuery Image Gallery Plugins

For a recent project I was looking a jQuery image gallery that could overflow hidden gallery items and display them horizontally outside a grid container.

I found exactly what I was looking for and settled on using the jQuery plugin created by @basilio called responsiveCarousel.

I thought I would share with you the other handy jQuery image gallery plugins that I stumbled upon and bookmarked for future reference.

10 Useful Time Saving Responsive Frameworks

10 Useful Time Saving Responsive Frameworks

The time spent building a new web project can be greatly reduced if you choose to use a prebuilt HTML5/CSS framework.

A front-end framework can provide you with tons of prebuilt web elements such as responsive grids, JS sliders, complex menus, model windows, icon fonts – pretty much everything you may need to get your website up and running fast.

Here are ten useful, time saving web design frameworks that you should bookmark for future use in your projects.

7 Useful Parallax jQuery Plugins

7 Useful Parallax jQuery Plugins

Going into 2014 I am sure the parallax scrolling effect is going to become even more of a widely used effect. When used correctly, the parallax effect is a great way to add an extra visual dimension, combined with the users scrolling it is a great way to guide the user through your site.

Here are 7 useful parallax jQuery plugins that will allow you to easily implement the effect on your website.

25 Best Tutorials for Building a Custom Portfolio Website

25 Best Tutorials for Building a Custom Portfolio Website

Web development tutorials often cater towards beginner starting topics. However there are plenty of intermediate-to-advanced level tutorials focused on complex development techniques. Even people with years of practice may one day look towards an online tutorial to educate themselves on an unfamiliar topic.

In this gallery I’ve put together a handful of brilliant tutorials related to designing and coding a personal portfolio. You can find help on HTML/CSS, jQuery, and Photoshop design mockups. Some articles will be pretty simple while others get into the more nitty-gritty details. Take a look over these headlines and see if there’s anything you may want to learn about.

30 Open Source CSS3 Code Samples for Web Developers

30 Open Source CSS3 Code Samples for Web Developers

Open source web development has seen a tremendous explosion in popularity. You can download free code snippets, plugins, WordPress themes, and the list is always growing. I have been infatuated with the amazing effects possible in CSS3 and some related JavaScript libraries.

In this gallery I want to share 30 powerfull frontend code snippets for web developers. Some of these effects are built entirely with CSS, and others utilize jQuery or some other JavaScript techniques. You can download a local copy of any script or try duplicating the effect into your next project. And if you know about any other fun code snippets, just drop a comment in the post discussion area.

Ten Useful jQuery Plugins For Fullscreen Images

Ten Useful jQuery Plugins For Fullscreen Images

On a recent project I needed to serve an image as a full size background on both a page and a block level element, the image had to be scaled correctly and also be responsive on small devices.

Serving fullsized images onto backgrounds or block level elements can pretty much be done with pure CSS3, however I wanted to explore what possibilities and improvements jQuery offered in terms of serving a better quality image and handling different device sizes.

Here are ten jQuery plugins that are perfect for serving fullwidth image backgrounds, I personally chose to use the Backstretch plugin.

Tutorial: How To Build Input Fields with Tag-Style Item Blocks

featured-tag-input-fields

Many newer social media communities and web applications are pushing the boundaries of interface design. Form inputs have changed a lot over just the past 4-5 years. One such feature is the tag select input field, where users can enter tags which appear as block items within the field itself.

For this tutorial I want to demonstrate how we can build this effect to be used in any website. To save time I’ll be using the jQuery Tags Input Plugin which is free and open source to use on any project. I prefer this plugin over some others because of the many parameters and options for customizing the experience. Take a peek at my live demo to see what we will be creating.

10 Useful jQuery Video & Audio Players

10 Useful jQuery Video & Audio Players

Using a custom skinned jQuery audio/video player in your website is often more aesthetically pleasing then simply embedding a video from a third party website on your website.

Being able to use a custom designed jQuery player also enables you to pair the design with your branding and design.

Within the new WordPress 3.6 there is also native support for audio and video post type. With this in mind I wanted to explore the various jQuery plugins available that will allow me to enhance the UI when using audio and video within a website.

CSS3 Animated Image Slideshows with Flux Slider

CSS3 Animated Image Slideshows with Flux Slider

There are so many JavaScript image slideshow plugins out on the Internet, it can be difficult pinpointing what you need. Developers who are not looking to start from scratch often search the web targeting the perfect solution. And although each technique has its drawbacks, the wide assortment of choices will offer plenty of rewards and something to fit your layout.

In this tutorial I want to focus on using a library called Flux Slider which was created by Joe Lambert. This image slideshow plugin is unique in that it defaults to using CSS3 transitions with JavaScript-controlled alternatives. All modern CSS3-compliant browsers will support the native features which can be set using jQuery or Zepto.js as the core library. Catch a glimpse of the demo we are building in my live example below.