How to make edit boxes

OK, I have a site (here that when the user selects the year and name (many thanks to Pullo for helping me with this), then presses Submit, a new page comes up with all the images displayed that are stored in the database (db) for the submitted information.

Now, I want to be able to click an image, have that image increased in size (for better viewability) and have a text/edit box appear under it with the current caption information (from the db) and that box will be editable and saved back to the db when either exiting the page or clicking another picture.

I am at a loss how to get this done and would appreciate any input.

Is this doable with just php or should this be in the javascript area also?

Thanks
E

OK… I guess I am dense as I don’t understand how this and other php code can do what I want. More information is needed please.

could you do it w/css. not sure how you have your page set up but on hover use

    height: 200px;
    width: 200px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    
}

img:hover {
    width: 500px;
    height: 500px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    background: whatever etc..;
}```

& if you have whatever php you use for the the image set to display:none when small but display block + css attributes when hovered over? 
would that work.
I do have to say the very slow load time is a bit off putting for that many images. It's great that you have such nice quality images but can't you use a thumbnail for speed & the actual link to a diff image?
i guess since they are in a database you can't use them as background images. 
Paginate them maybe?

OK, I guess that I am not explaining very well.

After loading the page of images, they should be clickable so that a user can edit the caption (or add one if there is not one now). That image location is stored in a database along with the caption for it. So, when the caption is changed/added, the page should then update the database for that image.

I know how to make the images expand during hovering, but that is not what I want to do. I need the image is clicked on and I want it to come up in a popup window (form type???) with a text box under it that has the ability to show/edit/add the caption.

Now, I am not sure that this is going to be purely PHP or if it needs some javascript with it to make all this work like I want.

Make more sense??? Or should I move this to the javascript forum???

The first thing you need to decide is whether you are going to retrieve all of the captions with the images at the start so that they are available to be able to display them when requested or whether you are going to have the page do a call back to the server to retriev the specific caption when a particular image is selected.

I will get all the captions on page load. I think that is better and possibly more efficient - mostly from the user perspective.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.