- Caman.js – this is a powerful canvas manipulation library that allows you to apply various effects and filters on an image. It comes with 18 preset filters which we will be using in this example (you can create more if you wish);
- Filereader.js – this is a lightweight wrapper around the HTML5 drag/drop events that makes them much easier to work with. It also adds a method to jQuery, so you can bind the events to a specific element;
- jQuery Mousewheel – I am using this plugin to scroll the filter container;
- In addition, we are using the latest version jQuery at the time of writing.
retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.
Easily create amazing hotspots on your images with just point & click!
- Different Types of Spots & Tooltips
- UNIQUE & Amazing Aiming Effect!
- Tip & Bubble tooltips
- Change tooltip direction “top, bottom, right, left”
- Different tooltip animations
- Change tooltip position relative to spot
- Activate it on hover , click or make it always active
- Change spot border radius
- Make your spot point to a URL
- Add text or HTML content to tooltips
- Unobtrusive spots
- Create spots with your own images!
- Share your spots “have a direct link to it , when navigating to this link the browser window will scroll down to where the image is located & trigger spot”
- Fully Responsive
elevateZoom is a highly-customizable jQuery plugin for creating image-zoom interfaces with ease.It can work with a single high-quality image or two images (a thumb and a high-quality version).
The zoom window can be placed on any part of the page (or image) and there is also an option for inline-zooming which saves space.
- Fully Customisable
- Coloured Tints
- Fancybox Gallery Support
- External Controls
- Window Zoom, Lens Zoom and Inner Zoom
- Free to use under MIT and GPL Licenses
SwinxyZoom takes the ImageZoom paradigm to the highest level, not content with a single level zoom and jerky movements we’ve packaged together everything you need for a myriad of effects whilst taking care performance and compatibility to ensure a consistent look and feel.
Designed to work across a large range of designs, screens (mobile, tablets, laptops) and devices from the latest UltraBooks to memory constrained mobile devices SwinxyZoom you can be sure the largest number of people will be able to see your imagery the way it was intended.
Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters. This script is crossbrowser and it was tested on:
- Firefox 10 +
- Chrome 18 +
- Safari 6.0 +
- IE 7 +
This plug-in can easily convert every colored image (in an html page) into a B&W greyscale image.It uses the the HTML5 canvas tag and a fallback for the old browsers
With Color-Up jQuery plugin easily add beautiful hover effects to your images, add transitions from (and to) a monochrome, sepia, negative, darkened or lightened version of the image.
- Customizable by CSS and plugin options
- Precise positioning of all elements based on your image dimensions and CSS
- The small thumbnails are automatically generated, sized and positioned
- Low resolution preview (enlarged thumbnail) while downloading the zoomed image (except in IE)
- Optional easing of the zoomed image movements
- Optional autoplay
- Optional descriptions/captions
- Unlimited number of images
- Align Etalage left/right, with the zoom area on the opposite side
- Small thumbnails can be positioned below or on the left/right (vertically)
- Multiple instances per page possible
- Right-to-left language support
- Optional external controls for previous/next/specific image
- Advanced: customizable callback functions
- Works in all common browsers (and IE6 )
- Includes an “absolute basic” and 6 more example files to get you started
FlipBook will take a sequential time series of images and animate them. Each image is shown for a short period of time and then replaced by the next image in the series. The animation begins as soon as the first image is loaded; images that have not yet been downloaded from the server are skipped. They are included in the animation sequence after they have been loaded by the browser.
- set the animation speed
- change animation direction
- exclude specific images
- single step through the images
- resizes to fit the images