How to display photo in modal

Question

I have a system made in Codeigniter.

I have in the system a field to add collaborators with photo(avatar), I can register, edit and display the information in a table.

I created a button to call a Modal and display the photo of the selected operator.

Only that I am not able to display the photo only of the selected collaborator, is appearing in the Model all photos registered in the BD.

collaborations_model.php

function __construct() {
    parent::__construct();
}


function get($table,$fields,$where='',$perpage=0,$start=0,$one=false,$array='array'){

    $this->db->select($fields);
    $this->db->from($table);
    $this->db->order_by('idColaboradores','desc');
    $this->db->limit($perpage,$start);
    if($where){
        $this->db->where($where);
    }

    $query = $this->db->get();

    $result =  !$one  ? $query->result() : $query->row();
    return $result;
}

function getById($id){
    $this->db->where('idColaboradores',$id);
    $this->db->limit(1);
    return $this->db->get('colaboradores')->row();
}

function add($table,$data){
    $this->db->insert($table, $data);         
    if ($this->db->affected_rows() == '1')
    {
        return TRUE;
    }

    return FALSE;       
}

function edit($table,$data,$fieldID,$ID){
    $this->db->where($fieldID,$ID);
    $this->db->update($table, $data);

    if ($this->db->affected_rows() >= 0)
    {
        return TRUE;
    }

    return FALSE;       
}

function delete($table,$fieldID,$ID){
    $this->db->where($fieldID,$ID);
    $this->db->delete($table);
    if ($this->db->affected_rows() == '1')
    {
        return TRUE;
    }

    return FALSE;        
}   

function count($table){
    return $this->db->count_all($table);
}

Html

<!--view/colaboradores/colaboradores.php-->
<?php if($this->permission->checkPermission($this->session->userdata('permissao'),'aColaborador')){ ?>
    <a href="<?php echo base_url();?>index.php/colaboradores/adicionar" class="btn btn-success"><i class="icon-plus icon-white"></i> Adicionar Colaborador</a>
<?php } ?>

<?php

if(!$results){?>
	<div class="widget-box">
     <div class="widget-title">
        <span class="icon">
            <i class="icon-user"></i>
         </span>
        <h5>Colaboradores</h5>

     </div>

<div class="widget-content nopadding">


<table class="table table-bordered ">
    <thead>
        <tr>
            <th>RE</th>
            <th>Nome</th>
            <th>Cargo</th>
            <th>Situação</th>
            <th></th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td colspan="5">Nenhum Colaborador Cadastrado</td>
        </tr>
    </tbody>
</table>
</div>
</div>

<?php } else{?>

<div class="widget-box">
     <div class="widget-title">
        <span class="icon">
            <i class="icon-user"></i>
         </span>
        <h5>Colaboradores</h5>

     </div>

<div class="widget-content nopadding">


<table class="table table-bordered ">
    <thead>
        <tr style="backgroud-color: #2D335B">
            <th>RE</th>
            <th>Nome</th>
            <th>Cargo</th>
            <th>Situação</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($results as $r) {
			if($r->situacao == 0){$situacao = 'Ativo';}else{ $situacao = 'Não Ativo';};
            echo '<tr>';
            echo '<td>'.$r->idColaboradores.'</td>';
            echo '<td>'.$r->nome.'</td>';
            echo '<td>'.$r->cargo.'</td>';
			echo '<td>'.$r->situacao.'</td>';
            
            echo '<td>';
            if($this->permission->checkPermission($this->session->userdata('permissao'),'vColaborador')){
                echo '<a style="margin-right: 1%" href="'.base_url().'index.php/colaboradores/visualizar/'.$r->idColaboradores.'" class="btn tip-top" title="Visualizar Colaborador"><i class="icon-eye-open"></i></a>  '; 
            }
			if($this->permission->checkPermission($this->session->userdata('permissao'),'vColaborador')){
                echo '<a style="margin-right: 1%" href="#modal-foto" role="button" data-toggle="modal" colaborador="'.$r->idColaboradores.'" class="btn btn tip-top" title="Visualizar Foto"><i class="icon-camera icon-white"></i></a>'; 
            }
            if($this->permission->checkPermission($this->session->userdata('permissao'),'eColaborador')){
                echo '<a style="margin-right: 1%" href="'.base_url().'index.php/colaboradores/editar/'.$r->idColaboradores.'" class="btn btn-info tip-top" title="Editar Colaborador"><i class="icon-pencil icon-white"></i></a>'; 
            }
            if($this->permission->checkPermission($this->session->userdata('permissao'),'dColaborador')){
                echo '<a href="#modal-excluir" role="button" data-toggle="modal" colaborador="'.$r->idColaboradores.'" class="btn btn-danger tip-top" title="Excluir Colaborador"><i class="icon-remove icon-white"></i></a>'; 
            }
                     
            echo '</td>';
            echo '</tr>';
        }?>
        <tr>
            
        </tr>
    </tbody>
</table>
</div>
</div>
	
<?php echo $this->pagination->create_links();}?>



<!-- Modal -->
<div id="modal-excluir" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <form action="<?php echo base_url() ?>index.php/colaboradores/excluir" method="post" >
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h5 id="myModalLabel">Excluir Colaborador</h5>
  </div>
  <div class="modal-body">
    <input type="hidden" id="idColaborador" name="id" value="" />
    <h5 style="text-align: center">Deseja realmente excluir este colaborador?</h5>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    <button class="btn btn-danger">Excluir</button>
  </div>
  </form>
</div>

<!-- Modal visualizar foto -->
<div id="modal-foto" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <form action="<?php echo current_url(); ?>" id="formColaborador" enctype="multipart/form-data" method="post" class="form-horizontal" >
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Visualizar Foto</h3>
  </div>
  <div class="modal-body">
  <?php foreach ($results as $r) {
	  echo '<div style="text-align: center"><td style="width: 14%"><img id="fotoPreview" src='.$r->url_foto.'></td></div>';}?>
	  
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
  </div>
  </form>
</div>

<style>
#fotoPreview {
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}
</style>

<script type="text/javascript">
$(document).ready(function(){


   $(document).on('click', 'a', function(event) {
        
        var colaborador = $(this).attr('colaborador');
        $('#idColaborador').val(colaborador);

    });

});

</script>

Answer 1

Pass the image through the attribute data-url to the element via the click button:

<button type="button" class="btn btn-default" data-url="/path/<?php echo $IMAGEM; ?>" data-toggle="modal" data-target="#seu_modal"><i class="fa fa-eye"></i></button>

Capture her in modal via script:

$(document).ready(function() {
    $('#seu_modal').on('show.bs.modal', function(event) {
        var imagem = $(event.relatedTarget).data('url');
            $("#foto").attr('src', imagem);
    });
});

In Modal, put:

<div class="modal fade" id="#seu_modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Foto</h4>
      </div>
      <div class="modal-body">
        <img src="/path/sem_foto.jpg" id="foto" border="0">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

Edited to explain one more thing:

You’re bringing a collection here:

<?php foreach ($results as $r) {
       echo '<div style="text-align: center"><td style="width: 14%">
              <img id="fotoPreview" src='.$r->url_foto.'></td>
             </div>';
     } ?> 

In this place, you should pass your ID and not get all images.

Your SQL query should be something like this, joining the tables, you would have the image related by the foreign key:

SELECT c.*, if(i.imagem_colaborador != NULL,i.imagem_colaborador, 'sem_imagem.jpg') as foto 
FROM tab_colaboradores c
LEFT JOIN tab_imagens i ON (c.id_colaborador=i.id_colaborador)
where 1 GROUP BY id_colaborador';

And if you put everything in the same table...just call the image field record. Now if the image is the collaborator ID, it just takes the path/{$id}.jpg. and print on the button attribute, which can be data-qualquercoisa="valor".

Javascript in jQuery is in charge of "inputar" the value in the "source" of the image in the action of opening the modal...