Abrir imagem em janela modal

Wilson Fonseca · Fevereiro 24, 2015

Olá pessoal, boa!!!

Gostaria que alguém me ajudasse, estou tendo problemas em exibir uma imagem em uma janela modal, consigo exibir a imagem se ela já estiver setada dentro da div da janela modal, porém se eu tentar chamar a imagem via url ela aparece vários caracteres especiais.

vou postar o código para ficar mais fácil de alguém poder me ajudar.

<?php include 'includes/info.php'; ?>
<!DOCTYPE html>
<html lang="en">
    <head>
        
        <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
        <link type="text/css" rel="stylesheet" href="css/jquery-ui.css"/>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" media="all" />
        <script type='text/javascript' src='js/jquery.min.js'></script>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
        <script src="js/external/jquery/jquery.js"></script>
        <script type="text/javascript" src="js/jcycle.js"></script>
        <script src="js/bootstrap.js" type="text/javascript"></script>
        <script src="js/jquery-ui.js"></script>
     
        
        <title><?php echo "$title_consulta"; ?></title>
       
        <script type="text/javascript">

    $(document).ready(function() {
         
        // Captura o retorno do prepara_escola.php
        $.getJSON('prepara_escola.php', function(data){
            var escola = [];
             
            // Armazena na array capturando somente o nome do escola
            $(data).each(function(key, value) {
                escola.push(value.escola);
            });
             
            // Chamo o Auto complete do JQuery ui setando o id do input, array com os dados e o m?nimo de caracteres para disparar o AutoComplete
            $('#escola').autocomplete({ source: escola, minLength: 3});
            });
    });
  
  
</script>

<script type='text/javascript'>

<!-- Inicio 
function putFocus(formInst, elementInst) { 
if (document.forms.length > 0) { 
document.forms[formInst].elements[elementInst].focus(); 
} 
};
 // Fim --> 
  
</script>

    </head>
     
    <body onLoad="putFocus(0,0);">
        
     <div class="container">
         <div class="container-fluid">
             
             <div align="center" style="background-color:#0065b3"><img src="img/logo.jpg" alt="NGI"></div>
              
<div class="form-group">
<form action="" method="post" name="esc" class="form-inline">
    <br>         
<input size="100%" name="escola" type="text" class="form-control" id="escola" placeholder="<?php echo $pesquisa ?>"/>
<input size="100%" type="submit" value="Pesquisar" class="form-control btn btn-primary"/>  
 </form>
</div>

            
 <div class="table-responsive">
    <table width="100%">
        <tr>
            <td > <?php
//header("Content-Type: text/html; charset=utf-8",true);
if ($_SERVER['REQUEST_METHOD'] == 'POST') 
{

  if (empty($_POST['escola']))

    {

        echo "<br><p style='color:red'><b>$erro_pesquisa</b></p>";
    }

     else
     
     {
	 $con = mysql_connect ("$local", "$user", "$senha") or  die('Não foi possível conectar');
         mysql_select_db("$banco");

         $sql = "SELECT * FROM $table WHERE concat(codigo, ' - ',escola) ='".$_POST['escola']. "'";
// gera o loop com os resultados
   $executar = mysql_query($sql);
		  if ($linha = mysql_fetch_assoc($executar)){
                  // $executar = mysql_query($sql);
		  //if ($linha = mysql_fetch_assoc($executar)){
           
$migracao_ok=($linha['link_migrado']=='SIM')?"<img class='img-thumbnail' src='img/on.png'>":"<img class='img-thumbnail' src='img/off.png'>"; 
//echo "<div align='right' class='bg-info'><b>Status da Escola quanto ao OI MPLS:</b> $migracao_ok</div>";
echo"<p>
  <div class='alert bg-info' style='font-weight:bold;'>
  <div class='row' align='center'>
  <div class='col-md-2'>".$linha['cre']."</div>
  <div class='col-md-2'>".$linha['codigo']."</div>
  <div class='col-md-6'>".$linha['escola']."</div>
  <div class='col-md-2'>$migracao_ok</div>      
   </div>
    </div><p>";
           
       }
       
    }

}
   
?>
  </div>
        <br>
        <div id="">
 <?php 
 if(isset($id)):
    $sql_fotos = "SELECT * FROM $table_fotos WHERE id_escolas = $id AND foto_local = 'rede'";
    $executar = mysql_query($sql_fotos);
    while ($fotos_rack = mysql_fetch_assoc($executar)){
                     
    $fotos = $fotos_rack['foto'];
    $fotos_titulo = $fotos_rack['foto_titulo'];
    $fotos_txt = $fotos_rack['foto_txt'];
    
     echo "<table style='float:left; margin:5px'>
	<tr align='center'>
        <td>

	<div class='alert bg-primary'>$fotos_titulo</div>


<!--aqui eu preciso que abra em modal-->
        
        <div class='img-thumbnail'>
        <a href='upload/$fotos' width='350' height='250' data-toggle='modal' data-target='#fotoModal'>

        <img src='upload/$fotos' width='350' height='250' /></a>
        </div>

	
<div class='alert bg-info' >$fotos_txt</div> 

<br>
	</td>
	</tr>
       
</table>";   
     }
 endif; 
?>
    </td>
</tr>
        
  
    </table>
</div>
 
<div class="modal fade" id="fotoModal">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
     
      </div>
      <div align="right" class="modal-body">
        <button type="button" class="btn btn-default" data-dismiss="modal">X</button>
       </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->        






         </div>
     </div>
    </body>    
  
</html>

Na linha 137 preciso que a imagem que está lá vinda do banco de dados abra em uma janela modal.

Lembrando que se eu colocar um arquivo .php ou .html ele abre normalmente.

Desde já agradeço a todos que de alguma forma puder me ajudar.

wilnet · Fevereiro 24, 2015

você precisa aplicar a "class" no seu link ou imagem.

Veja se não é esse seu problema.

vlw

Wilson Fonseca · Fevereiro 24, 2015

você precisa aplicar a "class" no seu link ou imagem.

Veja se não é esse seu problema.

vlw

Cara, tem como vc citar um exemplo?

Wilson Fonseca · Fevereiro 26, 2015

Resolvido, comentei no código o que mudei, obrigado a todos que de alguma forma tentaram colaborar!!!

<?php include 'includes/info.php'; ?>

<!DOCTYPE html>
<html lang="en">
    <head>
        
        <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
        <link type="text/css" rel="stylesheet" href="css/jquery-ui.css"/>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" media="all" />
        <script type='text/javascript' src='js/jquery.min.js'></script>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
        <script src="js/external/jquery/jquery.js"></script>
        <script type="text/javascript" src="js/jcycle.js"></script>
        <script src="js/bootstrap.js" type="text/javascript"></script>
        <script src="js/jquery-ui.js"></script>
     
        
        <title><?php echo "$title_consulta"; ?></title>
       
        <script type="text/javascript">


    $(document).ready(function() {
         
        // Captura o retorno do prepara_escola.php
        $.getJSON('prepara_escola.php', function(data){
            var escola = [];
             
            // Armazena na array capturando somente o nome do escola
            $(data).each(function(key, value) {
                escola.push(value.escola);
            });
             
            // Chamo o Auto complete do JQuery ui setando o id do input, array com os dados e o m?nimo de caracteres para disparar o AutoComplete
            $('#escola').autocomplete({ source: escola, minLength: 3});
            });
    });
  
  
</script>


<script type='text/javascript'>


<!-- Inicio 
function putFocus(formInst, elementInst) { 
if (document.forms.length > 0) { 
document.forms[formInst].elements[elementInst].focus(); 
} 
};
 // Fim --> 
  
</script>


    </head>
     
    <body onLoad="putFocus(0,0);">
        
     <div class="container">
         <div class="container-fluid">
             
             <div align="center" style="background-color:#0065b3"><img src="img/logo.jpg" alt="NGI"></div>
              
<div class="form-group">
<form action="" method="post" name="esc" class="form-inline">
    <br>         
<input size="100%" name="escola" type="text" class="form-control" id="escola" placeholder="<?php echo $pesquisa ?>"/>
<input size="100%" type="submit" value="Pesquisar" class="form-control btn btn-primary"/>  
 </form>
</div>


            
 <div class="table-responsive">
    <table width="100%">
        <tr>
            <td > <?php
//header("Content-Type: text/html; charset=utf-8",true);
if ($_SERVER['REQUEST_METHOD'] == 'POST') 
{


  if (empty($_POST['escola']))


    {


        echo "<br><p style='color:red'><b>$erro_pesquisa</b></p>";
    }


     else
     
     {
$con = mysql_connect ("$local", "$user", "$senha") or  die('Não foi possível conectar');
         mysql_select_db("$banco");


         $sql = "SELECT * FROM $table WHERE concat(codigo, ' - ',escola) ='".$_POST['escola']. "'";
// gera o loop com os resultados
   $executar = mysql_query($sql);
 if ($linha = mysql_fetch_assoc($executar)){
                  // $executar = mysql_query($sql);
 //if ($linha = mysql_fetch_assoc($executar)){
           
$migracao_ok=($linha['link_migrado']=='SIM')?"<img class='img-thumbnail' src='img/on.png'>":"<img class='img-thumbnail' src='img/off.png'>"; 
//echo "<div align='right' class='bg-info'><b>Status da Escola quanto ao OI MPLS:</b> $migracao_ok</div>";
echo"<p>
  <div class='alert bg-info' style='font-weight:bold;'>
  <div class='row' align='center'>
  <div class='col-md-2'>".$linha['cre']."</div>
  <div class='col-md-2'>".$linha['codigo']."</div>
  <div class='col-md-6'>".$linha['escola']."</div>
  <div class='col-md-2'>$migracao_ok</div>      
   </div>
    </div><p>";
           
       }
       
    }


}
   
?>
  </div>
        <br>
        <div id="">
 <?php 
 if(isset($id)):
    $sql_fotos = "SELECT * FROM $table_fotos WHERE id_escolas = $id AND foto_local = 'rede'";
    $executar = mysql_query($sql_fotos);
    while ($fotos_rack = mysql_fetch_assoc($executar)){
                     
    $fotos = $fotos_rack['foto'];
    $fotos_titulo = $fotos_rack['foto_titulo'];
    $fotos_txt = $fotos_rack['foto_txt'];
    
     echo "<table style='float:left; margin:5px'>
<tr align='center'>
        <td>


<div class='alert bg-primary'>$fotos_titulo</div>




<!--Agora, quando eu clico em uma foto ela seta o src lá na linha de imagem que criei -->
        
        <div class='img-thumbnail bg-info'>
 <a href='#fotoModal' onclick=\" $('#imgTag').attr('src','upload/$fotos')\" data-toggle='modal'  >
        <img class='img-responsive' src='upload/$fotos' /></a>
        </div>




<div class='alert bg-info' >$fotos_txt</div> 


<br>
</td>
</tr>
       
</table>";   
     }
 endif; 
?>
    </td>
</tr>
        
  
    </table>
</div>


<div class="modal fade" id="fotoModal">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
     
<img id="imgTag" > //criei esta linha com a referência de uma imagem sem o src que será setado através do evento onClick


      </div>
      <div align="right" class="modal-body">
        <button type="button" class="btn btn-default" data-dismiss="modal">X</button>
       </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->        












         </div>
     </div>
    </body>    
  
</html>

Entrar

Arquivado

Abrir imagem em janela modal

Recommended Posts

Wilson Fonseca 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wilson Fonseca 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wilson Fonseca 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante