Greetings experts,
I am currently using tinymce (tinymce.moxiecode.com) along with the file manager plugin. When I attach the javascript to the input text box, a nice file manager pops up and allows me to populate the value of that textbox with the value of the image that has been selected, along with directory paths etc.
I would like to put an image placeholder just below the text field, and have some onchange script change the value of the image based on the value that is contained in the text box. For example, I click browse, go to folder called items, then click an image called myimage.jpg and then click the insert button, that then populates the textbox called image and it reads items/myimage.jpg.
When the textbox value has changed, below it items/myimage.jpg loads and the user can see exactly what he is posting to the database before thinking "hmm, did I select the right image the first time?" I know that tinymce's filemanager does this functionality on the right hand side (it loads the clicked image for preview) but I want to add the textbox onchange feature to ensure there is no confusion.
EG:
Please select an image:
--------------------------
----------
-----
| images/myimage.jpg | [Browse] < On click the value of text is changed and based on the change the image is loaded/reloaded with the value
--------------------------
----------
-----
This is what you have selected:
--------------------------
----------
---------
| |
| |
| <img scr="images/myimage.jpg"> |
| |
--------------------------
----------
---------
If you are happy with the results please click Update to make your changes live:
Update
Just so that you know, this is for both the add and edit pages, and on the edit page, when it loads, I will already have the image loaded (value from database) but if the user selects a different image then when the textbox changes, the "loaded" image will change based on the value of the textbox.
I hope i have made this clear enough and hope that you are able to help me.