Before-after-slider

***P*X*L*8*** [alterImg - a jQuery before and after image slider] This is my first jQuery plugin, and it comes after a 6 year absence from coding.

I'm not sure if it's a true plugin - I'm really just hijacking the built-in jQuery slider functionality. It started out as an exercise during some downtime. I had seen plugins with this behavior, first on The Guardian's website and then on CatchMyFame.com. Being a fairly simple and lazy person, I thought there should be a simpler way of achieving the same effect. Below is the result. The plugin part that makes this work is only 4kb, so you're not adding a great load to what you're probably already using in your page. Here's the code you'll need to make this work: Put this in the head tags. You can download the script here: Minified: jquery.alterimg-1.0.min.js Non-minified:jquery.alterimg-1.0.js Put this in the body where you want the image slider to be.

jQuery Before/After Plugin. About a month ago I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye.

To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Here’s the result: Pretty slick no? CSS3 before and after slider. CSS play - Before and After Image Slider - NO javascript 10th October 2012 Firefox, Safari, Chrome and Opera [IE9 without animation and 'hold'] copyright © stu nicholls - CSS play Information A slider to show 'before' and 'after' images by sliding a pointer left and right Just hover the mouse over the left/right pointer circle and move it right and left to reveal/hide the 'after' image.

Moving the mouse vertically off the left/right slider will stop the transition at its current position which will be held until you move the mouse back onto the left/right slider. Working in Firefox, Safari, Chrome and Opera. Copyright You may use this method on your personal 'non-profit' web site without seeking my permission. Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay. Before and after image slider. Counterfeit. Counterfeiting is not only illegal, but also dangerous.

After analyzing the content of counterfeit jackets, we know that instead of the sanitized, Canadian down used by Canada Goose, counterfeiters often use feather mulch or other fillers. These materials are often coated in bacteria, fungus or mildew, posing significant health risks to unsuspecting consumers. As well, raccoon, dog or other unknown animal hair may be used in place of our functional coyote fur ruff. Even more frightening is that for a person in cold climate, an authentic Canada Goose parka could mean the difference between life and death. Without real down and fur, the chance of frostbite or freezing becomes a real possibility. Finally, counterfeit isn't just a danger to your health, but also your wallet. jQuery TwentyTwenty Plugin.

Need to highlight the differences between two images?

TwentyTwenty, a visual diff tool, makes it easy to spot them! Download TwentyTwenty The Problem We recently needed a way to showcase the visual differences between two images. Folks tend to typically place two images next to each other in hopes that it'll be clear exactly what changed. One of our Design Leads pointed us to Canada Goose, a cold weather outfitter.

This sparked a few new ideas on how to do something similar for our own needs. Responsive and functional on all devices Doesn't require images to workWorks with Foundation out of the box How it works TwentyTwenty works by stacking two images on top of each other. We're using custom movement events from the jquery.event.move library in order to support 1:1 slider movement on mobile devices. Setting up It's easy to get started, just wrap two images inside of a container. Then call twentytwenty() on this container once the images have loaded: And voila! Preventing FOUC JavaScript Options.