Trocar imagem e enviar para shadowbox

[marceloamaralfpolis 0]

Galera!

 

Tenho uma galeria de imagens. A imagem maior é trocada com a ação do clique na menor. Isso é feito por Jquery . No mesmo código pego o SRC da tag <img> e por attr troco o endereço href de uma tag <a>.

A tag <a> é inicializada com um endereço válido [ou não] e quando o clique é feito esse caminho precisa ser alterado e enviando para o Shadowbox.

 

O objetivo é exibir a imagem em escala maior para que seja possível ver os detalhes.

 

 

 

O problema:

O Shadowbox recebe o caminho inicializado na tag <a> e não é trocado pela funcão attr do Jquery.

Se observar no código fonte ele até troca o caminho mas o clique leva ao lightbox com o endereço anterior. Eu precisaria atualizar esse caminho usando o Jquery e não consigo.

 

A melhor parte: Estou desesperado.

 

Abaixo o código, porém o teste que estou fazendo está no endereço

http://www.arpropaganda.com.br/wk/v1/teste_galeria.php

 

 

Desde já agradeço quem puder me ajudar.

 

===============================================================

<script>
$( document ).ready(function() {

$("#scrolabbleslider a").click(function(){

var src = $("img", this).attr("src")
var legenda = $("img" , this).attr("alt")
var cobertura = $("img.zoom_off" , this).attr("src");
var link_cobertura = '<a rel="shadowbox[Mixed];" href='+src+' >link</a>';

var title = $(this).attr("alt")

$(".exibe .foto1").attr("src", src)
$(".plan").html(legenda);
$(".href_img").append( link_cobertura );


$(".exibe .foto1").attr("src", src)
$(".plan").html(title);
});

});

</script>

 

<div class="exibe">
<img class="foto1" style="display: block;" src="shadowbox"/>
<div class="plan"></div>
<div id="zoom_on"></div>
<div class="href_img"></div>

</div>

 

 

<div id="slide">

<?PHP

$id = '1';
$areas = "plantas";

?>
<div id="scrolabbleslider" style="width:1390px;">
<?PHP
$sql = "SELECT id_empr, legenda, url_img FROM imagens WHERE id_empr = $id AND areas='$areas' ";

$query = mysql_query($sql, $conexao);

while ($e = mysql_fetch_array($query)) {

echo '
<a href="JavaScript:void(0);">

<img style="background: #000; cursor: pointer; " class="foto1" src="' . $e['url_img'] . '" alt="' . $e['legenda'] . '"/>

</a>
<img class="zoom_off" style="display: none" src="' . $e['url_img'] . '" alt="' . $e['legenda'] . '"/>
';
}
?>
</div>
</div>

 

Galera!

 

Atualizando o código: (desconsidere o anterior)

 

<script>
$( document ).ready(function() {

$("#scrolabbleslider a").click(function(){
var src = $("img", this).attr("src")
var legenda = $("img" , this).attr("alt")

$(".exibe .foto1").attr("src", src)
$(".plan").html(legenda);
$("a.href_img").attr("href", src)
$(".exibe .foto1").attr("src", src)

});

});
</script>

 

 

 

 

<?PHP

$id = '1';
$areas = "plantas";
?>

<div class="exibe">
<img class="foto1" style="display: block;" src=""/>
<div class="plan"></div>
<div id="zoom_on"></div>

<a class="href_img" rel="shadowbox;" href="imagens/empreendimentos/alameda/plantas/001.jpg" >link</a>
</div>
<div id="slide">
<div id="scrolabbleslider" style="width:1390px;">
<?PHP
$sql = "SELECT id_empr, legenda, url_img FROM imagens WHERE id_empr = $id AND areas='$areas' ";

$query = mysql_query($sql, $conexao);

while ($e = mysql_fetch_array($query)) {

echo '
<a href="JavaScript:void(0);"><img style="background: #000; cursor: pointer; " class="foto1" src="' . $e['url_img'] . '" alt="' . $e['legenda'] . '"/></a>
<img class="zoom_off" style="display: none" src="' . $e['url_img'] . '" alt="' . $e['legenda'] . '"/>
';
}
?>
</div>
</div>

[FreitasMT 29]

então amigo pelo que eu vii ta funcionando o que que não tá do jeito que voce quer?

[marceloamaralfpolis 0]

então amigo pelo que eu vii ta funcionando o que que não tá do jeito que voce quer?

Olá Freitas!

 

Isso, o que preciso ainda não está funcionando. Tenho uma barreira que é enviar o caminho da nova imagem para o lightbox. Embora o Jquery altere o href da tag <a> identificada com a class="href_img" o lightbox não recebe essa nova alteração e sim a que estava do código anterior a execução da função.

[FreitasMT 29]

o lightbox que voce diz é o .foto1 ?

 

porque se for aqui ele recebendo normal o mesmo url que o link

[marceloamaralfpolis 0]

A foto1 é chamada o tempo todo, não importando em qual dos thumbs se clique. Esse é o erro pois no lightbox deve surgir a foto 002.jpg , 003.jpg sucessivamente na medida que a ação do clique vai ocorrendo. Mas não importa qual, sempre aparece a foto1, mesmo olhando o código fonte e percebendo que o href da tag <a> identificada com class="href_img" está com a informação correta.

o "link" que está no canto inferior serve como chamada do lightbox. Ele tem a função de chamar o lightbox com as imagens alteradas.

[FreitasMT 29]

Ah! enfim entendi o que queremos então olha só..

 

esse seu box carrega o arquivo uma vez ou seja quando voce altera o link do botao ele não reconhece...

 

eu recomendo que você use outro eu mesmo gosto do fancy box caso voce queira usalo tire as referencias do shadowbox e coloque esse

 

		<!--inicio fancybox -->
        <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" />
		<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
		<script>
			$(function(){
				$("a").fancybox();
			})
		</script>

        <!--fim fancybox -->

 

caso voce for testar baixe o plugin do fancy box e chame os arquivos jquery.fancybox.css e jquery.fancybox.pack.js?v=2.1.5

 

NÃO USE como eu coloquei aí em cima porque pode não vai funcionar o site do fancybox bloqueia quando sites tentam baixar estes arquivos.

 

tenta ai

 

eu testei deu certo

[marceloamaralfpolis 0]

Freitas, primeiro queria agradecer a atenção! valeu mesmo

 

Amigo, meu chefe aboliu o uso do lightbox, ele quer a função de zoom com o ponteiro sobre a imagem. Infelizmente isso complicou mais um pouco, ou não. Veja a nova função abaixo com o link.

 

JQUERY (objetivo da funçao: alterar o caminho href da tag <a class="jqzoom"> com o parâmetro attr vindo da tag <img class="zoom_off"> )

 

 

<script>
$( document ).ready(function() {

$("#scrolabbleslider a").click(function(){
var src = $("img", this).attr("src")
var legenda = $("img" , this).attr("alt")

$(".exibe .foto1").attr("src", src)
$(".plan").html(legenda);
$("a.jqzoom").attr("href", src)


});

});
</script>

 

 

veja o teste link www.arpropaganda.com.br/wk/v1/teste_galeria.php

 

O PROBLEMA:

O mesmo anterior do lightbox, o parâmetro attr não altera o caminho href da tag <a class="jqzoom"> exibindo sempre a imagem que inicializo o html quando renderizado.

[FreitasMT 29]

então cara com esse plugin você não precisa fazer o que está fazendo voce simplesmente deve colocar as imagens que deseja que apareçam e ele as pegará segue um exemplo bem parecido com a sua situação

 

https://drive.google.com/file/d/0BwBEh4QJvkXjb2w4WmlOWU1VNUU/edit?usp=sharing

[marceloamaralfpolis 0]

obrigado Freitas. Vou dar uma olhada.

 

 

Freitas! veja lá como ficou. Ainda acho que dá para arrumar mais um pouco.

 

 

 

http://www.arpropaganda.com.br/wk/v1/?pg=imoveis&imv=detalhe&det=plantas&id=1

 

Freitas! veja lá como ficou. Ainda acho que dá para arrumar mais um pouco.

 

http://www.arpropaganda.com.br/wk/v1/?pg=imoveis&imv=detalhe&det=plantas&id=1

 

obrigado por ora!!!! valeu mesmo

[FreitasMT 29]

Muito bom em... no final todo o trabalho vale a pena e é isso que importa. att