Work
SubscribeA few more jQuery plugins: crop, labelOver and pluck
I've been hoarding a few plugins which I thought it was about time I did some sharing.
They are:
- crop - crop any image on the fly using JavaScript only
- labelOver - based on an article over at A List Apart an accessible method of compressing forms
- pluck - return an array of values for a specific attribute
crop
See the crop image example
The crop plugin takes an IMG element and crops them to the dimensions given. The result is a DIV with a background image with the height and width and an offset. The new DIV should also carry across the existing style attributes of the image.
Crops image to dimensions given. If only width (and height), x and y are selected randomly based on the image's height and width.
$("img").crop(x, y, height, width, transparentURL) /* or */
$("img").crop({ x: x, y: y, height: height, width: width, transparentURL: url })Unfortunately, this slick little plugin requires that pass in the transparent gif URL since IE doesn't support the 'data:' pseudo protocol (which is what I used to generate and transparent gif on the fly)...making it a little less slick in my eyes.
The only thing to watch out for is cropped images should not have any padding. Since we're using a background-image style to create the cropped appearance, it will bleed in to the padding. You can use margin however with the same effect.
labelOver
See the label over example
The labelOver plugin is a follow on from the text hints, but in fact the best practise solution.
It's based on the A List Apart article that demonstrates using a label positioned over the input field.
It's important to enclose the label and input within a div that has the following CSS applied:
DIV { position: relative; float: left; }
LABEL.over-apply { color: #ccc; position: absolute; top: 5px; left: 5px;}Obviously the top and left will depend on your own CSS, but it's easy to play with in Firbug to get the CSS just right.
Then apply the plugin using:
$('label').labelOver('over-apply')The best way to understand how it works is to view the example, then view it with JavaScript turned off, and then CSS turned off.
pluck
Finally, pluck is a plugin inspired by a comment on Dustin Diaz's web site by Dean Edwards that I found I needed in a project I was working on lately.
It simply returns an array of attributes from the matched selector - simple, but useful enough to save me some coding time and maybe even share-worthy.
I used it to validate a form contained non-blank values:
if (jQuery.grep(jQuery('form :input').pluck('value'), function(e) {
return (e.length == 0);
}).length) {
submit.attr('disabled', 'disabled');
} else {
submit.attr('disabled', '');
}
Great plugins! Thanks!
[...] June ‘07: You can view and use the label over plugin for an accessible version of the ‘text [...]
Awesome! Thanks for the great plugins.
I found the image cropping plugin very useful.
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Crop - crop any image on the fly. [...]
Hi Remy, great plugin. Unfortunately I have some trouble with it. I'm using it for a search field. No clue but nothing happens, when I push the submit button in the form. Any idea what could cause this behavior?
When I deactivate the label over plugin, everything works fine > http://www3.drk-bitburg-pruem.de "suchen"
thanks indeed
Florian
[...] Cycle Plugin.jQuery Flickr.jQuery Lazy Load Images Plugin.Zoomi - Zoomable Thumbnails.jQuery Crop - crop any image on the fly.Image Reflection.十一、Google地图（Google Map）jQuery Plugin googlemaps.jMaps jQuery Maps [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Crop - crop any image on the fly [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Cycle Plugin jQuery Flickr jQuery Lazy Load Images Plugin Zoomi - Zoomable Thumbnails jQuery Crop - crop any image on the fly Image [...]
[...] jQuery Cycle Plugin jQuery Flickr jQuery Lazy Load Images Plugin Zoomi - Zoomable Thumbnails jQuery Crop - crop any image on the fly Image [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] crop, labelOver and pluck-Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there [...]
[...] de imágenes: , Semitransparent rollovers y Creating A Sliding Image Puzzle [...]
[...] de imágenes: , Semitransparent rollovers y Creating A Sliding Image Puzzle [...]
This appears to be an excellent plugin - Thanks for sharing! I was doing some things along those lines as well, but I ran into trouble when I had to print my pages. As you are probably aware background images will not print by default. Any ideas on just cropping standard images? Thanks
@Jon - you're right, if you're relying on printing, then this may not be the right choice. All I can think of as an alternative is to use something like Image Magik combined with some Ajax to do real time server side cropping.
[...] jQuery Crop - crop any image on the fly [...]
with labelOver, why dont you get the offset and size of the elements and automatically position it based on that? seems like a kludge to have to fit it in with css when jquery is perfectly capable of figuring it out...
@Roo - absolutely. At the time, offset() was only available through the dimensions plugin, whereas now it's built in to jQuery. Perhaps I'll update the plugin to use this.
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
That would be great. I bookmarked you, will check back in soon.
[...] Dynamically determine which element to focus on based on it’s position on the screen. labelOver Overlay labels over an input field. LavaLamp Navigation menu with a ‘lava’ effect. Lazy [...]
[...] Dynamically determine which element to focus on based on it’s position on the screen. labelOver Overlay labels over an input field. LavaLamp Navigation menu with a ‘lava’ effect. Lazy [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image Reflection. Google地图（Google Map）jQuery Plugin googlemaps. jMaps jQuery Maps [...]
[...] jQuery Crop - crop any image on the fly. [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Crop - crop any image on the fly. [...]
[...] jQuery Crop - crop any image on the fly. [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]
on pluck(), why not return $(plucked) so chaining can be used, eg,
$('p > a').pluck('href').each(...)
[...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]