PDA

View Full Version : Ext.fc.labeler - A nice way to label your images



francodacosta
23 Feb 2009, 7:08 AM
Ext.fc.labeler

About

The Labeler plugin was inspired by the s3Slider for jQuery . I needed something similar for ExtJs. Since i didn't find it I decided to build one for ExtJs.

Features

* Can be applied automatically to all images each having its own configuration
* Each label can be styled separately
* Slide In and Fade In animations are easily configurable
* Can use HTML markup or pure javascript, degrades nicely

Preview
http://www.francodacosta.com/usr/images/extjs/ext-labeler-preview.jpg

Demo & Download
please visit de plugin page (http://www.francodacosta.com/demos/extjs/labeler)


Cheers

Nuno

evant
23 Feb 2009, 5:36 PM
Looks really cool, nice job.

mjlecomte
23 Feb 2009, 6:40 PM
Looks nice. Only comment I have at moment would be that I didn't intuitively know that I could mouseover to hide the original showing of the caption. What might be good is a configurable option to set a time to automatically hide the caption after X milliseconds.

zhw511006
23 Feb 2009, 8:36 PM
Good Work!

Thank You For Sharing!

baseClass only is default or green ? any others?

francodacosta
24 Feb 2009, 12:49 PM
Good Work!

Thank You For Sharing!

baseClass only is default or green ? any others?


BaseClass can be whatever you want, its there so you can have different styles for different labelers is the same page

It works the same way as other Ext components baseCls config option

francodacosta
24 Feb 2009, 12:50 PM
Looks nice. Only comment I have at moment would be that I didn't intuitively know that I could mouseover to hide the original showing of the caption. What might be good is a configurable option to set a time to automatically hide the caption after X milliseconds.

Thanks MJ

It's a nice tip, it will be done!

Scorpie
25 Feb 2009, 1:12 AM
Very nice!

francodacosta
25 Feb 2009, 9:40 AM
I implemented the hideTimeout method to automatically hide the label after the specified miliseconds

I also updated the demo page to include some tips on what each option will do


cheers

Scorpie
26 Feb 2009, 6:46 AM
I implemented the hideTimeout method to automatically hide the label after the specified miliseconds

I also updated the demo page to include some tips on what each option will do


cheers


Nice! Can this plugin also be used for HTML elements like checkboxes? Sometimes you can see an checkbox in the right bottom of the image that you can select, would be nice to build something like that!

BTW your theme selector (green/default) is broke, choosing green doesnt show the text!

francodacosta
26 Feb 2009, 7:34 AM
Actually was the css that was broken for IE (thanks!!)

I'm not sure if I understand you, do you want to activate the label by clicking on a checkbox ?

Scorpie
26 Feb 2009, 8:37 AM
Actually was the css that was broken for IE (thanks!!)

I'm not sure if I understand you, do you want to activate the label by clicking on a checkbox ?


Well, I want the checkbox to be an extra layer over the image, that you can "select" an image by the checkbox in the bottom right.

francodacosta
26 Feb 2009, 10:12 AM
Well that's not the purpose of this plug-in, it's more suitable for an image changer / slider plug-in

I think Ext has a great lack of "front end" plug-ins, as I build my backoffice with Ext it doesn't make sense to use another js framework so I will be releasing a few more plug-ins as soon as they are ready and one will be an image changer / slider