[jQuery] PopUP Imagem .dialog

[Marcelo Avelino 1]

Boa tarde galera,

 

To tentando clicar em um link a href e mostrar a URL num jQuery UI DIALOG.

Estou fazendo um looping no banco e resgatando vários links/imagens no formato abaixo, gostaria de exibir no OnClick da class GALERIA a imagem grande dentro do DIALOG do jQuery UI.

Até o ALERT a principio está ok, só preciso exibir a VAR no dialog e é ai que não consigo, já tentei de outras formas e nada.

Agradeço a ajuda.

Marcelo.

<!-- jQuery / jQuery UI / Outros -->
<script type="text/javascript" src="http://localhost/projeto/jsfull.js"></script>
<script type="text/javascript">
    //<![CDATA[
        $(document).ready(function(){
            $('.galeria').click(function(event){
                event.preventDefault();
                $.ajax({
                    url:
                    $(this).attr('href'), success:function(data){
                        //alert('URL HREF: ' + data + ' OK!');
                        var img_src = $('<img src="' + data + '" />');
                        (''+img_src+'').dialog();
                    }
                })
                return false;
            });
        });
    //]]>
</script>
<!-- Exibe IMG Grande -->
<a href="http://localhost/projeto/images/bandeiras_g/1.png" title="XYZ" class="galeria"><img src="http://localhost/projeto/images/bandeiras/1.png" alt="XYZ" /></a>
<a href="http://localhost/projeto/images/bandeiras_g/2.png" title="XYZ" class="galeria"><img src="http://localhost/projeto/images/bandeiras/2.png" alt="XYZ" /></a>
<a href="http://localhost/projeto/images/bandeiras_g/3.png" title="XYZ" class="galeria"><img src="http://localhost/projeto/images/bandeiras/3.png" alt="XYZ" /></a>
<a href="http://localhost/projeto/images/bandeiras_g/4.png" title="XYZ" class="galeria"><img src="http://localhost/projeto/images/bandeiras/4.png" alt="XYZ" /></a>
<a href="http://localhost/projeto/images/bandeiras_g/5.png" title="XYZ" class="galeria"><img src="http://localhost/projeto/images/bandeiras/5.png" alt="XYZ" /></a>

[angelorubin 142]

Veja se ajuda na ideia geral - http://jsfiddle.net/angelorubin/L9u8bva6/19/

[Marcelo Avelino 1]

angelorubin,

 

Obrigado por responder, funcionou como eu preciso.

 

Muito obrigado cara

 

 

 

Um pequeno detalhe "BOBO" teria como tornar dinamica o valor id dessa div la no jQuery?

Por exemplo: eu consigo fazer um autoincremento ÚNICO dialog1, dialog2, dialog3 e por ai vai(de acordo com o total recebido do banco na minha consulta) tranquilo (essa parte é fácil)!

<div id="dialog" title="Basic dialog"> 
</div>

O que gostaria de saber é como mandar esse valor id resgatado do banco la pra cima no jQuery.

 

Exemplo tenho 5 imgs, que vão seguir esse padrão: id="dialog1", id="dialog2", id="dialog3", id="dialog4", id="dialog5". (O valor não importa é só exemplo), fechou, e agora como alterar no jQuery lá em cima? alguma idéia?

 

Isso é só uma frescura minha referente a validação, se não der certo vou abrir uma excessão e deixar essa parte com erro/dupe(não visual) pois já funciona visualmente do jeito que eu preciso.

 

 

Resumindo: se conseguir pegar o valor ID dessa div e transformar em VAR igual o title e href consigo resolver esse problema!

 

Um abraço, valeu!

Opá consegui resolver, pode fechar o tópico por favor.

 

A solução foi colocar um data-rel no href com o valor ÚNICO ID do banco e resgatar no jQuery dessa forma

var rel = $(this).attr('data-rel');

e no lugar do #dialog trocar pela variavel

$('#'+rel+'')

Obrigado a todos.

 

Valeu!!!