Overflow Image with vertical centering for Responsive Web Design If you want to use an image in your responsive web design you can use fluid images. But there is another way. You can set a maximum height and crop the image. So how does this work? If you now change the width of the container, you will see that the image adapts the container's width but does not exceed the max-height. Now you have a cropped image that adapts the width of your container. To do this you can use JavaScript (jQuery). margin-top = (container height - image height) / 2 Then call a JavaScript function on the events load, resize and here comes the special: "transitionend". So just use a CSS transition to change the max-width and you can fire the callback function when the transition ends. You can use a CSS transition for the margin-top of the image to make it smooth. That's it. PS: It would be great to see a solution for this technique with CSS only.
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
Apprise - The attractive alert alternative for jQuery The initial release of Apprise has been a major success and is often what this site is most commonly associated with. As far as I've been able to track, Apprise has been downloaded over 23,000 times and has been mentioned in over 46,000 blogs. Which is fantastic, especially for something that I've never been very proud of. I've wanted to update, and change the UI, of this for over a year now. Demos Let's get right down to business. Pretty slick, right? Let's take a peak at the default settings before we change the options around a bit. You'll notice that the buttons are completely customizable and can easily be altered using your own CSS rules. Let's try another demo, but changing the settings around a bit. We're going to use a custom CSS class on our confirm button. You'll see the custom blue button with it's custom text, as well as a goofy little callback function that populates the field below: Response: Using
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+
Visual Event When working with events in Javascript, it is often easy to lose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be. It is due to this I've put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. Using Visual Event on any web-page is extremely simple: You can see a demo of this in action showing the events attached by my own DataTables jQuery plugin. DOM 0 events jQuery 1.2.x + YUI 2.6.x (2.x might work!)
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
How to Create a jQuery Image Cropping Plugin from Scratch – Part I Web applications need to provide easy-to-use solutions for uploading and manipulating rich content. This process can create difficulties for some users who have minimal photo editing skills. Cropping is one of the most used photo manipulation techniques, and this step-by-step tutorial will cover the entire development process of an image cropping plug-in for the jQuery JavaScript library. Step 1. First, we are going to set up our project workspace for this tutorial. Next, you'll need to download the jQuery JavaScript library and place it inside the /resources/js/ folder. Step 2. To test our plug-in, we'll need to attach it to an image. The HTML Open up the index.html file in your favorite text editor and write the following code. There's nothing fancy here: just plain HTML code. The CSS Now edit style.css as shown above. We've customized the aspect of our page by changing the background color and adding some basic styling to the title and image. Step 3. Step 4. The Options Step 5. Step 6.
Useful JavaScript and jQuery Tools, Libraries, Plugins - Smashing Magazine Advertisement Recently we’ve been receiving more requests for carefully selected, useful round-ups. We try to avoid round-ups on Smashing Magazine, but sometimes the format is useful and — if the resources are relevant — can be extremely helpful. Besides, we are glad to drive traffic to some obscure, yet useful resources and thus support the developers of these resources. In this round-up, you’ll find some of the useful JavaScript and jQuery tools, libraries and plugins that we have stumbled upon recently. Hopefully, you’ll find them valuable for your upcoming projects. You might want to take a look at the following related posts: Useful JavaScript Libraries Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and More5The goal of this script is to provide a fast and lightweight script to enable responsive Web designs in browsers that don’t support CSS3 Media Queries. highlight.js10Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages.
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