background preloader

8 Responsive jQuery Slider Plugins

8 Responsive jQuery Slider Plugins
Whether you’re already a pro at creating responsive web sites or your just learning what it’s all about, it’s good to have some scripts handy that you can easily integrate into your site. We all know how popular image and content sliders are now, and for good reason. So we decided to round up some jQuery slider plugins that are already responsive – meaning they will adapt to the size of their container. Flexslider FlexSlider is an awesome, fully responsive jQuery slider plugin. In other words, it resizes to fit the screen on which it is displayed, and looks good doing it. Blueberry Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts. unoslider unoslider is a fully responsive, touch enabled, mobile optimized jQuery slider plugin. Responsive Thumbnail Gallery Plugin jQuery Plugin for creating image galleries that scale to fit their container. wmuSlider Elastislide – A Responsive jQuery Carousel Plugin Related:  Responsive Web

How to Build a Responsive Thumbnail Gallery Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works. One major component of mastering responsive design is to figure out how to approach specific tasks and adjust to problems as they arise within the context of larger projects. Sneak Peek Before we get started, take a quick look at what we’re building. Demo: Click here to launch the demo. Initial HTML Let’s jump into this project with some basic HTML. To add items to the gallery, simply copy and paste the galleryItem div (our example will use ten of these). Container Styles To begin our CSS, let’s set a width to the container and center it on the page. Notice that I’ve set the width with a percent. Basic Gallery Styles Now let’s attack the galleryItem class basic styles. I also added some image styling here. Flowing the Columns Where It Gets Ugly

Create a Responsive Slider Plugin With FlexSlider for WordPress Sliders seem to be all the rage these days, and for good reason! You can add photos, content, videos, and more to an eye-catching, animated area of your website. While there is a wealth of slider plugins out there (my current favorite is the one for Nivo Slider), there is not one for FlexSlider, a slider that has keyboard shortcuts and works with swipe on touch screens. In this tutorial, we'll create that plugin! Step 1 Plugin Setup The first thing we need to do is set up the plugin. I also like to set up some constants for information I'll be using a lot throughout the plugin. I create three constants: the plugin's path, the plugin's name, and the plugin's version, which is used for upgrades, and to notify the WordPress Plugin Directory of changes, if needed. Now that we have the setup done, let's add in the FlexSlider files & code. Step 2 Adding FlexSlider It's time to add the important part: the javascript & CSS for FlexSlider. Step 3 The Shortcode and Template Tag A Couple of Notes

Responsive 3D Panel Layout A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects. View demo Download source Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. Please notice that this is very experimental. Some of the jQuery plugins used for this: jQuery Transit for most of the CSS transitionsModernizr for checking browser support of the CSS properties The placeholder text is from Veggie ipsum. An example for the HTML structure is the following: The first slide, which is a list item, will contain four images in this example. Each element/image can have a data attribute for the transition effect. The structure that we will create dynamically is the following: Each image or element will be wrapped in a division with the class sg-box. The background images will have the style background-size: cover which will make them cover the whole panel. To call the plugin, simply do:

10 jQuery Plugins that Will Make your Life Easier jQuery has changed the way developers write JavaScript and the way users interact with websites and web applications. If you’re a developer, you know what a pleasure it can be to work with jQuery, especially the convenience of plugins. In this post, we’ve rounded up 10 jQuery Plugins that Will Make your Life Easier. In this collection of plugins, you’ll find a wide range of functionality, from navigation enhancements to image viewing. blur.js blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements. Gips Gips is a clean and simple jQuery plugin and is based on Gips Freebie . Nestable Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin) notify Notify! hammer.js A javascript library for multi-touch gestures TypeButter TypeButter allows you to set optical kerning for any font on your website. Websanova Paint iPicture iPicture is a jQuery Plugin to create interactive pictures with extra descriptions. Adipoli The Wookmark jQuery plugin

A fix for iPhone viewport scale bug Jeremy first raised his concern (about iPhone viewport scaling) and later by Andreas. My early view was stated here. Since this issue was raised, I have been trying to find ways to work around this problem. Below is a proof of concept of how to preserve the accessibility (scaling) without affecting the usability for the majority. All we need to do to solve this problem is to dynamically reset the scale factors to default when user zoom the page. Here is a demo: JavaScript: Here is the code explanation: 1. we need to know what are the default minimum-scale, maximum-scale values, on iPhone’s official document, it’s mentioned the minimum-scale value is 0.25 by default, and the maximum-scale value is 1.6 by default. 2. we need to know when to set this, this is very easy, iPhone has gesture event listener we can use to target the document body, here is how to do so: document.addEventListener("gesturestart", gestureStart, false); 3.

Responsive web design If you’ve been working in the web design field for the past couple of years you should know that designing a fixed interface for a widescreen computer is not enough. Most of the clients you’ll be dealing with from now are going to request that their site is not only desktop-compliant but is also optimized for smartphones and tablets. This issue presents the necessity of working with different screen resolutions in order to guarantee that a website looks good in all sorts of devices. But if the devices’ production continues at the same speed that it has for the past couple of years, the amount of screen resolutions and formats that designers will have to deal with is going to become unbearable. On this article we’ll be discussing one of the most effective solutions to face this problem with a certain easiness, we’re of course talking about responsive web design. So, what’s responsive web design? Flexible grid Screen resolution Aspects to consider Responsive Typography Flexible images JavaScript

Hacking for Artists Nestable Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin) Download on GitHub PLEASE NOTE: I cannot provide any support or guidance beyond this README. If this code helps you that's great but I have no plans to develop Nestable beyond this demo (it's not a final product and has limited functionality). Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Serialised Output (per list) Draggable Handles Responsive Web Design foreword by Jeremy Keith From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Contents Our Responsive WebThe Flexible GridFlexible Images (Read this chapter online)Media QueriesBecoming Responsive

Making Wordpress images responsive - Blissful Interfaces Method 1: The CSS Add the following code to your CSS file. That will make the images scalable according to screen size. Removing automatic height and width in WordPress <img> tags Now drag the window to see the image scaling in action. As an example, We have to change this: To This: For the images that are in a post or a static page/template page, all you have to do is, add the above CSS to the style.css file, and then remove the ‘width’ and ‘height’ properties from the < img > tag in your WordPress editor. Add the following function to your functions.php file. function remove_wp_width_height($string){ return preg_replace(‘/\/i’, ”,$string); } Then when you call for those post thumbnail images in you template.php page, replace, the_post_thumbnail(); With This: echo remove_wp_width_height(get_the_post_thumbnail(get_the_ID(),’large’)); That’s it. Method 2: The above will not work for some themes. This removes inline width and height attributes from images retrieved with the_post_thumbnail()

Augmented Reality with #Processing - Tutorial by Amnon Owed All of the visuals in the above video were created using NyArtoolkit for Processing. NyARToolkit is an augmented reality toolkit built with 100% pure Java. It is derived from ARToolkit-2.72.1. Like Processing itself it’s open source and free! In this tutorial you will learn how to use it to place computer generated imagery correctly onto real world footage. To do this in real-time NyArtoolkit uses markers – black and white images – to determine the three-dimensional position and orientation in the real world. All right so let’s start with the general setup. 1. 2. 3. 4. All right, time to recap. Example 1: Basic The first example is basic, but holds all of the important techniques that are necessary for more advanced uses of the NyArtoolkit. If you input the following image (place it in the sketch’s data subdirectory)… …into the first code example, you should end up with something like this… Example 2: Dynamic Time to get a little more dynamic. Main Sketch ARObject