How to display photo in modal

Asked

Viewed 1,596 times

0

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.

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

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>

php html html5
  • 1

    Where is the code? Where is it? Where is the Where ID ?

  • @Zoom, I posted the Where ID that is in the collaborators_model, and the View code, I don’t think you need the array, because I don’t want to save or edit data, just visualize a url in <img> in a model. But I want to click on the ID 1 button and see only the photo of this ID.

  • pass the value as data-id="<?php echo $ID;?>", look at this example and this other example.

1 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...

  • thanks for answering, I tried for the data-url attribute, but failed to pull an image that is attached to a record ID. the table is displayed per row, as shown above. There is a button to display the details, another to edit and another to delete. Now I added a button to show the image related to that record in a modal. the image url is saved in the database.

  • but you’re making a loop, because you don’t bring the record by the id, at position 0?

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

  • that result, it has to be 1 result only, with the ID.

  • This is the problem @ivanFerrer, .

  • But don’t you have the ID on the line you’re calling the modal? The question is only to bring a new query... or instead of the ID, get another record(from the image). It’s simple, I don’t understand your difficulty... what the relationship of the image with the query record, is what you have to see.

  • Yes, I have the Co-worker

  • Look at the query...

  • I do not understand, what is the problem yet? I think you do not understand how it works. Or you did not relate the image with the collaborator, there it is difficult. Publish the structure of your object / whole array, the output...

Show 4 more comments

Browser other questions tagged php html html5

You are not signed in. Login or sign up in order to post.