tengo una datatable que cargo por ajax la cual tiene imagenes en uno de sus campos y me gustaria colocarle un lightbox, el problema es que no carga la imagen en el modal parece que no toma la informacion de la imagen que se carga desde el controlador, utilizo codeigniter

este es el codigo de la imagen que cargo desde el controlador

  $  row[] = '<a href="#" data-toggle="modal" data-target="#lightbox"><img    src="'.base_url('upload/'.$  producto->photo).'" style="height:50px;"    class="img-responsive img-thumbnail"></a>'; 

este es el codigo que carga la datatable

   table = $  ('#table').DataTable({      "processing": true,      "serverSide": true,      "order": [],        "ajax": {         "url": "<?php echo site_url('almacen/productos/producto_list')?>",         "type": "POST"     },       "columnDefs": [         {             "targets": [ -1 ],              "orderable": false,          },         {             "targets": [ -2 ],              "orderable": false,          },         {             "targets": [ -3 ],              "orderable": false,          },     ], 

aqui el codigo del lightbox

   var $  lightbox = $  ('#lightbox');     $  ('[data-target="#lightbox"]').on('click', function(event) {     var $  img = $  (this).find('img'),          src = $  img.attr('src'),         alt = $  img.attr('alt'),         css = {             'maxWidth': $  (window).width() - 100,             'maxHeight': $  (window).height() - 100         };      $  lightbox.find('.close').addClass('hidden');     $  lightbox.find('img').attr('src', src);     $  lightbox.find('img').attr('alt', alt);     $  lightbox.find('img').css(css); });  $  lightbox.on('shown.bs.modal', function (e) {     var $  img = $  lightbox.find('img');      $  lightbox.find('.modal-dialog').css({'width': $  img.width()});     $  lightbox.find('.close').removeClass('hidden'); }); 

y este el del modal

  <div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog">     <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>     <div class="modal-content">         <div class="modal-body">             <img src="" alt="" />         </div>     </div> </div> 

en el codigo de la pagina aparece lo siguiente cuando carga el modal

   <div class="modal-content">         <div class="modal-body">             <img src="" alt="">         </div>     </div> 

no aparece la imagen, imagino que no la pilla porque se carga en el controlador, ¿hay alguna forma de poder usar el lightbox? Saludos y gracias.