0

Estou a tentar criar uma janela modal que vai trazer de um banco de dados MySQL somente a parte final de uma URL de uma imagem que está disponível na internet (ex: parte_final.png ) o problema é que não estou a conseguir fazer o código funcionar na concatenação, pois preciso de juntar a parte inicial da URL (ex: http://www.algumsite=) ao resto da url que vem da base de dados.

Primeiramente eu tenho uma consulta ao DB para fazer um loop de todas as imagens que estão armazenadas com os respetivos URL´s, para gerar os vários botões cada um deve apresentar uma imagem diferente.

<?php                                                                                   
     $sql = "SELECT * FROM imagens"; 
     $conn = mysql_query($sql, $conecta);  

     while($row = mysql_fetch_assoc($conn))
     {   
?>  

<a href="#" onClick={"$('#imgTag').attr('src', 'http://www.algumsite=<?php echo $row['img_url'];?>')"} type="button" class="btn btn-danger" data-toggle="modal" data-target="#imgModal">BUTTON</a>

<?php } ?>


<!-- Modal -->
<div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">ITEM</h4>
  </div>
  <div class="modal-body">        
        <img id="imgTag">       
  </div>      
  </div>

Não sei se me expliquei bem, mas o que quero fazer é meio estranho mesmo, mas tem que ser mesmo assim, concatenar parte inicial da url com a parte final da url que vem da DB por PHP.

Em vez de chamar a função onclick() no botão, posso considerar exemplos de uma função externa por Jquery, mas para no meu caso não é necessário, obrigado desde já pelas possíveis ajudas, estou mesmo encalhado aqui!

1 Resposta 1

1

Você está montando sua tag a estranhamente. Tente algo como:

<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="<?=$row['img_url']?>">BUTTON</a>

E adicione o seguinte evento no teu código:

$(document).on('click', '[data-toggle="modal-image"]', function(event){
    event.preventDefault();
    var $modal = $( $(this).data('target') );
    var img = $(this).data('img');
    $modal.find('#imgTag').attr('src', 'http://www.algumsite=' + img);

    $modal.modal('show');
});

Exemplo:

    $('[data-toggle="modal-image"]').on('click', function(event){
        event.preventDefault();
        var $modal = $( $(this).data('target') );
        var img = $(this).data('img');
        $modal.find('#imgTag').attr('src', 'https://placeholdit.imgix.net/' + img);

        $modal.modal('show');
    });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="~text?txtsize=23&bg=452084&txtclr=000000&txt=Image+1&w=250&h=200"> Image 1 </a>
<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="~text?txtsize=23&bg=f06443&txtclr=000000&txt=Image+2&w=250&h=200"> Image 2 </a>
<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="~text?txtsize=23&bg=02559A&txtclr=000000&txt=Image+3&w=250&h=200"> Image 3 </a>
<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="~text?txtsize=23&bg=45E388&txtclr=000000&txt=Image+4&w=250&h=200"> Image 4 </a>

<!-- Modal -->
<div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Item</h4>
            </div>
            <div class="modal-body">
                <img id="imgTag" />
            </div>
        </div>
    </div>
</div>

8
  • KaduAmaral o código não funcionou, eu clico em cima do link e não acontece nada, mais alguma sugestão?
    – Luis
    Commented 17/07/2015 às 0:04
  • Tem que ver porque não funcionou. Deu algum erro no console @Luis?
    – KaduAmaral
    Commented 17/07/2015 às 0:06
  • KaduAmaral na console apresentou erro nesta linha de código: $('[data-toggle="modal-image"]').on('click', function(event){ ele diz Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery-ui.js:319
    – Luis
    Commented 17/07/2015 às 0:42
  • @Luis, você carregou a biblioteca jQuery? Verifique se ela está carregada corretamente, antes do Bootstrap e jQuery-UI. Fiz uma atualização no código também.
    – KaduAmaral
    Commented 17/07/2015 às 2:13
  • O meu head está assim: <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script> <link href="maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/…> Eu alterei o código e não funcionou de novo, não tem como você publicar o código a funcionar em algum sitio online para eu ver o que está mal?
    – Luis
    Commented 17/07/2015 às 2:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .