jQuery-Fakecrop: Cropping Images with jQuery - Vuong Nguyen Once in a while, you just want to display a collection (or more) of images with different dimensions. The problem seems easy enough. The task of manually creating thumbnail for each image is quite tedious and it’s definitely not worth the trouble to write a script to generate the thumbnails either. Now, being a problem solver and a big proponent of DRY, I created jQuery-Fakecrop, a jQuery plugin. jQuery-Fakecrop takes a collection of images and automatically scale them to fit a custom-defined bounding box. Below is the demo as well as the links to download & fork this plugin. Quick Start Normal NOTE: Since every image in this collection has extremely different dimensions, I restricted the height of the images to 100 pixel in CSS so this part of the page doesn’t look so… terrible. With Fakecrop (default) $('#fakecrop-fill img').fakecrop(); Public domain photographs courtesy of United State Department of Agriculture
jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle You can also try contact me here: This is a small plugin for jQuery that adds a nice feature to rotate images (img html objects) by a given angle on web pages. An experimental version 3 tries to rotate all objects, but with some small issues. This is a simple plugin to allow you to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions. Internet Explorer 6.0 > Firefox 2.0 > Safari 3 > Opera 9 > Google Chrome Include script after including main jQuery. Please put all issues into a ISSUES page. To support so many old browsers there are few techniques being used: For modern browsers (Safari, Chrome, Opera, IE 9) plugin uses native CSS3 attributes (-ms-transform, -transform-property, -webkit-transform, -o-transform).
jQuery Unveil - A very lightweight plugin to lazy load images Most of us are familiar with the Lazy Load plugin by Mika Tuupola. This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won't be loaded until the user scrolls to them. Lazy Load has some cool options such as custom effects, container, events or data attribute. If you're not gonna use any of them you can reduce the file size by leaving just the essential code to show the images. That's what I did and this is my lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays - less than 1k. Usage Use a placeholder image in the src attribute - something to be displayed while the original image loads - and include the actual image source in a "data-src" attribute. If you want to serve high-resolution images to devices with retina displays, you just have to include the source for those images in a "data-src-retina" attribute. Threshold Callback
Caption Hover Effects A tutorial on how to create some subtle and modern caption hover effects. View demo Download source Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. Please note: this only works as intended in browsers that support the respective CSS properties. The images used in the demos are Dribbble shots by talented Jacob Cummings. Let’s get started. The Markup The structure of our grid and the figures will be made of an unordered list and each item will contain a figure element. <ul class="grid cs-style-1"><li><figure><img src="images/1.png" alt="img01"><figcaption><h3>Camera</h3><span>Jacob Cummings</span><a href=" a look</a></figcaption></figure></li><li><figure></figure></li></ul> The CSS Effect 1 Effect 2 Effect 3
jQuery CollagePlus - an image gallery plugin by Ed Lea Lazy Load Images jQuery Plugin HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt. Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. What does it do? It delays loading of images in (long) pages. From Wikipedia: Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. That said Matt’s code does much more. Show me more! Demo page is available. Related entries: Sequentially Preloading Images With jQuery When asking a question please include an URL to example page where the problem occurs.