Change picture displayed to form?

[fredep57]

OK, I have gotten a lot of help here trying to learn Javascript. Now I need some more guidance.

I have a page (test page ) that allows you to choose the year then choose the show name. When the user submits this information, another page shows up with the pictures for that selection. Now, what I am wanting to do is allow the user to click on the picture (which already enlarges it for better viewing) and when that enlarged picture ONLY is up, allow the user to put in a caption. My thought was to make only that picture some kind of form (???) and put an input box under it (maybe a textarea???) with two buttons - “Save” and “Cancel” - allowing the user to either save any changes (write them to the database) or cancel out and keep any information that was displayed (don’t write anything to the database).

Now, the pictures location(s) are in a database table that obviously contains a field for “caption”. That data needs to be retrieved - not sure yet how that is really going to be held (ie, an array, pointers, etc but thoughts are more than welcome). The retrieved picture is already displayed, it just needs to display the inputbox/textarea for the caption (if any) and, as stated, allow the user to change/add caption information.

Whew, that was long winded but hoping I was able to get my point across.

So, if you go to the page, you can see what is there. I just need to figure out/learn how to change just the selected picture into a form for entry.

Any help would be appreciated
E

[James_Hibbard]

Hi,

You currently have a bunch of thumbnails which enlarge when clicked. I find the fact that they enlarge in place (so to speak) rather jarring.

Would it be thinkable to use a lightbox instead? This approach would also give us somewhere obvious to place the “add/edit caption” option.

Here’s a demo of what I mean.

If you click on the thumbnails, the image enlarges and there is an “add/edit caption option”. If you enter something here, you will see it is added immediately. If you shut the image, then re-open it, you can see it persists.

If you find this approach acceptable, we would need to add some AJAX functionality to update the image’s properties on the server.

To be complete, here is the code:

HTML:

<a href="http://saccc567.com/Shows/2014/SACCC_Show/100_0000-Banner_01.JPG" 
  data-lightbox="gallery-1"
  data-title="<a class='add' href='#' data-id='#1'>Add/edit caption</a>
              <span class='divider'>|</span>
              <span class='caption'>A banner with some cars</span>"
  id="1"
>
  <img src="http://saccc567.com/Shows/2014/SACCC_Show/Thumbs/100_0000-Banner_01.JPG">
</a>
    
<a href="http://saccc567.com/Shows/2014/SACCC_Show/100_2422.JPG" 
  data-lightbox="gallery-1"
  data-title="<a class='add' href='#' data-id='#2'>Add/edit caption</a>
              <span class='divider'>|</span>
              <span class='caption'>A caravan</span>"
  id="2"
>
  <img src="http://saccc567.com/Shows/2014/SACCC_Show/Thumbs/100_2422.JPG">
</a>
    
<a href="http://saccc567.com/Shows/2014/SACCC_Show/100_2423.JPG"
  data-lightbox="gallery-3"
  data-title="<a class='add' href='#' data-id='#3'>Add/edit caption</a>
              <span class='divider'>|</span>
              <span class='caption'></span>"
  id="3"
>
  <img src="http://saccc567.com/Shows/2014/SACCC_Show/Thumbs/100_2423.JPG">
</a>
    
<a href="http://saccc567.com/Shows/2014/SACCC_Show/100_2424.JPG" 
  data-lightbox="gallery-4"
  data-title="<a class='add' href='#' data-id='#1'>Add/edit caption</a>
              <span class='divider'>|</span>
              <span class='caption'></span>"
  id="4"
>
  <img src="http://saccc567.com/Shows/2014/SACCC_Show/Thumbs/100_2424.JPG">
</a>

JS:

$("#lightbox").on("click", "a.add", function(){
    var new_caption = prompt("Enter a new caption");
    if(new_caption){
       var parent_id = $(this).data("id"),
           img_title = $(parent_id).data("title"),
           new_caption_tag = "<span class='caption'>" + new_caption + "</span>";
        
       $(parent_id).attr("data-title", img_title.replace(/<span class='caption'>.*<\/span>/, new_caption_tag));
       $(this).next().next().text(new_caption);
       
       // Make an AJAX request to save the data to the database
    }
});