Hoverizr - A responsive jQuery Image manipulation and overlay plugin | Grayscale, Blur, Color Inversion Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one. hover mouse over the image to see the original version Hoverizr takes advantage of the <canvas> element to do all the image processing. Version 1.0 Minified Version - 2.5KB: jquery.hoverizr.min.js Developer Version - 6.3KB: jquery.hoverizr.js Or you can download it on GitHub 1. As said earlier, Hoverizr takes advantage of the <canvas> element's image proccessing capabilities. Then, depending on whether you wanted the manipulated image to be above or below the original, on mouse over the top element fades out to reveal the element below. That's not all though. 2. And you are done. 3. Here they are: 4. 5.
175 Awesome jQuery Slider and Effects Roundup Slider are very useful and increasingly popular web page elements used for highlighting important content. By using a jQuery slider plugin, one can create amazing HTML slider effects with fancy animations of content elements like text and images. jQuery takes care of the difficult aspects like browser support and typically when using jQuery plugins it can be done with very little coding effort. This is the reason why jQuery sliders and jQuery banner slideshow scripts have become very popular on most types of websites. They are are typically used to feature multiple products, news, video etc. without taking up a lot of space on the pages. The jQuery library has undoubtedly made the life of web developers easier and made it possible for non-experts to do fancy stuff themselves. Because jQuery effects work wonders in our web designs, it makes sense that we take steps to acquire a size-able collection of ready to use plugins in various categories. Advertisement Article Index
ResponsiveSlides.js · Responsive jQuery slideshow Supersized 3.2 – Fullscreen Slideshow jQuery Plugin This version of Supersized has themes, direct slide links, dynamic preloading, and an API. Introducing Supersized 3.2 Features Resizes images to fill browser while maintaining image dimension ratioCycles backgrounds via slideshow with transitions and dynamic preloadingCore version is available for those that just want background resizing.Navigation controls with keyboard supportIntegration with Flickr – pull photos by user, set, or groupHead over to the project page for all the details. New in Supersized 3.2 Complete rewrite of the Supersized script.More options, including ability to prevent slides from being cut off.Link directly to slidesAPI lets you call functions directly (eg. play/pause, next, previous, and jump directly to a slide)Theme files are now separate from base files, which will make upgrades much easier. Inspiration / Sites Using Supersized I’ve put together a small sample of Supersized sites that I’ve come across recently. Plans for WordPress Comments and Feedback Google+
Doubletake - Lab - Graham Bird Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary. I'm using a couple of tools to help me resize the images on this page - a local copy of SLIR and the src.sencha.io web service. Basic usage $('#container').doubletake(); Config You can configure the breakpoints, the regular expression pattern to match on the src attribute and whether to update just on $(document).ready() or on $(window).resize() as well. 'breakpoints': [320,480,640,960,1024], 'pattern': '/slir/w([0-9]+)', 'watchresize': true breakpoints An array representing the sizes of images you want to use. pattern A regular expression used to replace the value of the src attribute. watchresize Boolean that instructs Doubletake to update if the window is resized. Here is the syntax with just two breakpoints and a custom image path. Example (not responsive) Browser support
Adaptive Images in HTML Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows - Smashing Magazine Advertisement A visitor comes to your website all giddy to learn more about your product, when suddenly a snazzy slideshow loads with some snap. Impressed, they go to register and are greeted by a most elegant modal window. At this point they are finally overjoyed by the velociraptor that suddenly charges across their screen. They don’t know why but they like it. Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Today, we are thrilled to introduce two new jQuery plug-ins that were developed exclusively for Smashing Magazine readers to liven up your developer tool belts: Orbit, a new slider; and Reveal, a modal plug-in. Why Create Our Own? Quickly, before diving into the details, some background would be helpful. Flexibility We use these plug-ins for clients, internal projects, our apps and a number of other places. Have a look at a couple of our previous articles: Orbit: jQuery Image Slider The Code Neato Options Using Text
Convert a Menu to a Dropdown for Small Screens The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you're on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose. That sure makes it easier to pick a place to go than a tiny link. Yeah, it's two taps instead of one, but that's arguable since you'd probably have to zoom in to tap the right link otherwise. The HTML The HTML for these two menus is different. Let's go with that for now. The CSS By default we'll hide the select menu with display: none;. Then using media queries, we'll do the switcheroo at some specific width. But now you gotta maintain two menus? Well yeah, that's one concern. Using jQuery, we can do that with just a few lines of code: Then to make the dropdown menu actually work... But aren't dropdown menus kinda obtrusive? Kinda.
Hoverizr – An in depth view of the jQuery plugin As a web designer, from time to time, you may need to make a grayscale image fade into color on mouse over. So the typical solution would be to have each image desaturated to achieve the grayscale effect in Photoshop. Then, you would have to add a few extra divs and image tags to the markup an then add some jQuery magic to fade the images in and out. Lets have a look at the pros and cons of each of those two solutions: Pros: • If you use an image sprite (both images in one file) then you have one less HTTP request for each image. Cons: • You have to manipulate each image separately, which means that the client might not be able to update images with that effect dynamically and it is a time consuming proccess.• If you use two images then you will have many HTTP requests. Having to do that every time really bumped me out, so I searched for a method to do this dynamically for each image, without the need of losing semantic markup and having to process each image. Enter the canvas element.
Responsive Image Gallery with Thumbnail Carousel A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. View demo Download source Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. We’ll use the jQuery Touchwipe Plugin that will make it possible to navigate the images by “wiping” on the iPhone and iPad. The images in the demo are by über-talented Sherman Geronimo-Tan and you can find his Flickr photostream here: Sherman Geronimo-Tan’s Flickr Photostream The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License. So, let’s do it! The Markup For the HTML structure we’ll have a main wrapper with the class “rg-gallery”. The CSS
Elastislide - A Responsive jQuery Carousel Plugin Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. View demo Download source With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. Elastislide uses the jQuery++ for the swipe events on touch devices. The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0). The HTML Structure When using the plugin, you’ll simply have to apply it to an unordered list with images (optionally with anchors). Use your preferred ID and call the plugin like this: Options Demos