How to display photo in modal

0

I have a system done in CodeIgniter.

I have a field in the system 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.

I just can not display the photo of only the selected collaborator, all the photos registered in the DB are appearing in the Model.

contributors_model.php

function__construct(){parent::__construct();}functionget($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;}functiongetById($id){$this->db->where('idColaboradores',$id);$this->db->limit(1);return$this->db->get('colaboradores')->row();}functionadd($table,$data){$this->db->insert($table,$data);if($this->db->affected_rows()=='1'){returnTRUE;}returnFALSE;}functionedit($table,$data,$fieldID,$ID){$this->db->where($fieldID,$ID);$this->db->update($table,$data);if($this->db->affected_rows()>=0){returnTRUE;}returnFALSE;}functiondelete($table,$fieldID,$ID){$this->db->where($fieldID,$ID);$this->db->delete($table);if($this->db->affected_rows()=='1'){returnTRUE;}returnFALSE;}functioncount($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>
    
asked by anonymous 06.04.2016 / 16:55

1 answer

1

Pass the image through the data-url attribute 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 it in the 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 the images.

Your SQL query should be something like this, by joining the tables, you would have the related image 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 record of the image field. Now if the image is the employee ID, just get the path/{$id}.jpg . and print on the button attribute, which can be data-qualquercoisa="valor" .

The javascript in jQuery takes care of "input" the value in the "source" of the image in the action of opening the modal ...

    
06.04.2016 / 21:44