Image picker WordPress
- SOLVED
On the following page, is a colour picker:
http://demo.pixopoint.com/static/picker/
The colour picker is in a dialog box, and there is only one colour picker for every input field.
I need to replicate this, but for an image picker. The user will be able to click on a button/link which will pop open a dialog box. When the user clicks on an image, the file name of that image will be dumped into the input field associated with that button. I don't care about the styling, it just needs to be functional.
Here is a crude mockup of what the page should look like:
http://demo.pixopoint.com/static/picker/image-picker.jpg
<strong>Please note</strong> that there needs to be only ONE image picker which is utilised for each input field (there will be multiple input fields on the page), just as with the colour picker.
First person to provide a live functioning demo wins the prize pot :)
Answers (2)
Christianto answers:
If the image clicked should dumb file name of image (src tag), please try this demo on attach file, change the js variable to your custom class.
var input_class = 'input-image';
var button_class = 'palettebutton';
var image_container_class = 'image-container';
You can add image as much as you want to the container and they will run perfectly.
Please see the style block since its required to make sure its will appear correctly, especially display:none for image container class and absolute/relative position of parent and image container.
Sorry, I use my fav artist Vicky Zhao, she is beautiful.. :D
Ryan Hellyer comments:
Thanks.
You are on the right track, but you missed the most important bit:
<blockquote><strong>Please note</strong> that there needs to be only ONE image picker which is utilised for each input field (there will be multiple input fields on the page), just as with the colour picker.</blockquote>
If you view the colour picker example, you will see that there is literally only one colour picker. If you leave it open, and click on the other colours, multiple dialog boxes don't pop open. It just utilizes exactly the same dialog box. Whereas with your code, separate boxes pop open for each one.
It also needs to load a jQuery UI dialog box, as with the colour picker, whereas yours opens a different type of box (not sure what that is called, but it's not a standard jQuery dialog from what I can tell.
<em><strong>Slightly off-topic:</strong>
The reason it needs to only use one dialog box, is that there will be approximately in use at one time, and if they were all opened the page would become somewhat of a mess. They also need to be able to move around, hence the use of a dialog box.</em>
Christianto comments:
Its called modal dialog, user can't interact other content if the dialog still open.
And u didn't said it should use jQuery UI plugin. xD
So you only need one image wrapper that contain images and it will be use for all input but in a modal dialog style using jQuery UI plugin.
Please try again demo I provide.
Tell me if it fit your requirement or not.