Using cropper to tag pictures

[David Behler]

Hey,
i have been looking through the faq, this group and search the net but
could not find a clue..maybe you guys can help me. I certainly hope
so.

I have a gallery where people can upload pictures and now i want to
use cropper to allow them to tag pictures.
So far i have implemented "starting" and "stopping" of cropper using
the manager provided in the examples. Next step was to show a small
form once the cropping was done to enable people to enter the tag. The
problem is, that the form is supposed to show right next to the
cropped area inside the image.

My problem now is, that each time i show the form it's behind the
overlay and not clickable. I even tried without the overlay but then
it's still not clickable and the cursor is still a crosshair. I tried
adjusting the zIndex but couldn't get it to work and assigning my div
(where my form is included in) the class "imgCrop_selArea" or
"imgCrop_clickArea" to see if anything chances but it doesn't.

Do you have any idea what i am doing wrong? Or have any clue how to
fix this?
I know, it's not exactly a problem of cropper but i thought you might
still be able to help me.

Thx in advance!

Greetings,
David

[David Spurr]

If you have an online example I might be able to take a look at it for
you, in theory it should just be your z-index but it depends where
you're inserting the element into the DOM.

-D

[David Behler]

As this problem is part of a bigger project of mine i can not show you
the actuall page but i just created a small example that shows exactly
what's going on

http://davidbehler.de/test/test.html

Just select an area on the picture. The div with my inputs (just
showing the current x, y, width and height of the cropped area is
shown but not clickable.

Maybe this helps you to unterstand where my mistake lays.

[David Spurr]

Your "addTag" information wrapper is inserted into the DOM before the
imgCrop_wrap I'd recommend placing it after that (or as the last child
of the parent of the image/cropper) and try that.

-D

[David Behler]

I tried that but the result is the same. My "addTag" div is still
"behind" the overlay.
I have updated the test.html so you can have a look at my chances.

Basicly i removed my "addTag" div from my html-file and added this
cropper.onload() right at the end before "this.setParams();":

addtag_element = Builder.node('div',{id:'addTag', style:'background-
color:#FFFFFF;border: 2px solid black; position:absolute; z-index:
20'},[
Builder.node('input', {type:'text', id:'tagX'}),
Builder.node('input', {type:'text', id:'tagY'}),
Builder.node('input', {type:'text', id:'tagWidth'}),
Builder.node('input', {type:'text', id:'tagHeight'})
]);
$('gallery_picture_content_top').appendChild( addtag_element );

Is that what you wanted me to do or did I get you wrong?

David

[David Spurr]

If you now set the z-index of your addTag div to 201 (as the
imgCrop_dragArea is set at 200) then it appears to bring it to the front.

That seems to work for me.

-D

[David Behler]

Silly me. I totally forgot about the z-index.

Now it works in IE7 but in FF2 and FF3 I still got the effect that my
"addTag" div is "behind" the overlay.
Even further increasing the z-index does not help.

Any other ideas left?

[David Spurr]

It worked for me in FF3 (OS X). I don't know what else to offer, it does
seem to be the z-index, as long as the element is after the cropper wrap
and the z-index is higher it should work.

-D

[David Behler]

Ok, problem found and fixed :)

In my "onEndCrop" function the z-index was set to 20 and i forgot to
remove that part in there.
Works now!

Thx alot :)