Simple Lightbox Demo

http://community.sitepoint.com/t/change-picture-displayed-to-form/111843

by hibbard_eu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script>
<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-1"
  data-title="<a class='add' href='#' data-id='#3'>Add/edit caption</a>
              <span class='divider'>|</span>
              <span class='caption'>Rain</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-1"
  data-title="<a class='add' href='#' data-id='#1'>Add/edit caption</a>
              <span class='divider'>|</span>
              <span class='caption'>Men</span>"
  id="4"
>
  <img src="http://saccc567.com/Shows/2014/SACCC_Show/Thumbs/100_2424.JPG">
</a>

CSS

a{
    color: white;
}

span.divider{
    padding: 0 10px;
}

JavaScript

$("#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
    }
});