Jump to content
SLIFE

Trocar Imagens

Recommended Posts

SLIFE

Boas Novamente

Tenho na minha pagina um pequeno exemplo onde aparece uma imagem que ocupa 350px por 250px

e mais a baixo tenho 5 imagens que ocupam 100px por 75px.

Como poderei fazer para quando clicar numa dessas imagens de 100px por 75px, ela apareça em cima no lugar da outra que tem 350px por 250px???

Isto é queria fazer um genero de galeria, onde as de baixo sao as miniatura e a de cima e a principal.

Ao clicar numa miniatura ela passa a fica em cima com o tamanho da outra.

Isso é possivel???

Ja criei em lightbox, mas nao gostei do resultado.

E para agravar as coisas, juntei agora um Jquery, para fazer umas fotos rodarem na barra lateral direita, e o lightbox deixou de funcionar.

Ao clicar na imagem, ela aparece numa nova janela.

Eu so queria que ela fosse para o lugar da outra acima.

Será que me conseguem dar umas dicas de como fazer isso?

Cpts

SJC


Sandro Coelho

Share this post


Link to post
Share on other sites
brunoais

executa um event. Usas uma função do tipo:

function clickEventHandler(e){
// grava-se para usar
var currentUrl = e.target.src;
// troca os dados
e.target.src = e.target.getAttribute('data-otherimgurl'); // Aqui mudas a imagem da tag img para a imagem maior

e.target.setAttribute('data-otherimgurl', currentUrl);
}

agora é só adicionar um event listener a cada uma das tags img usando esta função como o callback e escrever, no HTML um atributo extra: data-otherimgurl

que irá conter o outro url da tag.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
SLIFE

executa um event. Usas uma função do tipo:

function clickEventHandler(e){
// grava-se para usar
var currentUrl = e.target.src;
// troca os dados
e.target.src = e.target.getAttribute('data-otherimgurl'); // Aqui mudas a imagem da tag img para a imagem maior

e.target.setAttribute('data-otherimgurl', currentUrl);
}

agora é só adicionar um event listener a cada uma das tags img usando esta função como o callback e escrever, no HTML um atributo extra: data-otherimgurl

que irá conter o outro url da tag.

Boas

Obrigado pela ajuda, mas nao consegui perceber como fazer!!!

Continuo no google a tentar descubrir algum exemplo pratico!

Se tiveres por ai algum ficaria agradecido.

Cpts

SJC


Sandro Coelho

Share this post


Link to post
Share on other sites
cra2sh

Fica aqui a papinha toda feita da forma mais simples

<html>
<head>
<script>
function change_image(target)
{
 document.getElementById('main_image').src = target + '.jpg';
};
</script>
<style>
.image
{
cursor:pointer;
};
</style>
<title>Untitled Document</title>
</head>
<body>
<img src="1.jpg" width="350" height="250" id="main_image" />
<img src="1.jpg" width="100" height="75" class="image" onclick="change_image(1)" />
<img src="2.jpg" width="100" height="75" class="image" onclick="change_image(2)" />
<img src="3.jpg" width="100" height="75" class="image" onclick="change_image(3)" />
<img src="4.jpg" width="100" height="75" class="image" onclick="change_image(4)" />
</body>
</html>

Share this post


Link to post
Share on other sites
brunoais

Fica aqui a papinha toda feita da forma mais simples

<img src="1.jpg" width="100" height="75" class="image" onclick="change_image(1)" />
<img src="2.jpg" width="100" height="75" class="image" onclick="change_image(2)" />
<img src="3.jpg" width="100" height="75" class="image" onclick="change_image(3)" />
<img src="4.jpg" width="100" height="75" class="image" onclick="change_image(4)" />

Se queres que encontrar os problemas nisso, eu encontro:

Aprende com quem já aprendeu com os erros: http://stackoverflow.com/questions/86513/why-is-using-javascript-eval-function-a-bad-idea

Mais simples? Nem pensar. Da outra maneira é, realmente, mais simples e mais lógica. Só é preciso perceber 1 vez (q é fácil), de resto é muito fácil.

All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.
fonte: http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#visual

Por isso, o width e o height q tens aí são erro de sintaxe. -> Foi provado o contrário

Em HTML as tags img não fecham.

Como não tens doctype, eu n sei q versão estás a usar, mas se estavas a pensar na 4, tens mais um erro da tag script.

3 em 1, q tal ?

de qq modo. De uma maneira correta:

<!DOCTYPE html>
<html>
<head>
<script>
function clickEventHandler(e){
        // grava-se para usar
        var currentUrl = e.target.src;
        // troca os dados
        e.target.src = e.target.getAttribute('data-otherimgurl'); // Aqui mudas a imagem da tag img para a imagem maior
               
        e.target.setAttribute('data-otherimgurl', currentUrl);
}
</script>
<style>
img.image
{
        cursor:pointer;
width:100px;
height:75px;
}
img#main_image{
width:350px;
height:250px;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<img src="1.jpg" id="main_image"  alt="whateveritis" data-otherimgurl="url" >
<img src="1.jpg" class="image"  alt="whateveritis" data-otherimgurl="url" >
<img src="2.jpg" class="image"  alt="whateveritis" data-otherimgurl="url" >
<img src="3.jpg" class="image"  alt="whateveritis" data-otherimgurl="url" >
<img src="4.jpg" class="image"  alt="whateveritis" data-otherimgurl="url" >
<script>
var images = document.getElementsByTagName('img');
// Aqui certificas-te que todas as tags IMG seguem esta regra.
for(var i = 0; i < images.length; i++){
images.addEventListener('click', clickEventHandler, false);
}
</script>
</body>
</html>

Agora diz qual é a forma mais complicada de fazer e manter. A tua ou a minha.

Aproveita e diz tb qual a mais segura.

@SLIFE agora q tens a papinha feita, percebeste o q se passa no código?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
cra2sh

Estamos todos aqui para aprender, mas eu também não uso aquela função, apenas coloquei o menos possível de código.

PS: O teu código não está a funcar.

Share this post


Link to post
Share on other sites
mjamado
fonte: http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#visual

Por isso, o width e o height q tens aí são erro de sintaxe.

Por acaso, não. Entendeste mal a documentação. Os atributos width e height não estão deprecated. Esse valores são atributos intrínsecos da própria imagem, e não sugestões de apresentação. Como tal, pertencem ao markup e não à folha de estilos.

Em HTML as tags img não fecham.

Em XHTML fecham, e em HTML5 são opcionais. Como ele não indicou o doctype, não há maneira de dizer se foi um erro ou não.

Só não percebi de onde veio a conversa do eval. A solução do cra2sh parece clarinha como água. Tem tanta falta de segurança como qualquer outra coisa que corra do lado do cliente... Se é mais elegante? Eu acho que não, prefiro usar os eventos e delegates, mas isso é altamente subjectivo e de forma alguma escrito em pedra...


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
brunoais

PS: O teu código não está a funcar.

Se calhar cometi um erro de sintaxe q n detetei qd estava a escrever.

Só não percebi de onde veio a conversa do eval. A solução do cra2sh parece clarinha como água. Tem tanta falta de segurança como qualquer outra coisa que corra do lado do cliente... Se é mais elegante? Eu acho que não, prefiro usar os eventos e delegates, mas isso é altamente subjectivo e de forma alguma escrito em pedra...

Segundo a documentação que li sobre javascript. Tudo o que está no on* (click, change, etc...) passa pelo processamento igual a passar pelo eval. Não tenho aqui à mão isso mas posso tentar procurar outra vez, se necessário.

Uma alternativa ao q escrevi q tb serve é usar o atributo onclick e atribuir-lhe uma função como a q indiquei.

Por acaso, não. Entendeste mal a documentação. Os atributos width e height não estão deprecated. Esse valores são atributos intrínsecos da própria imagem, e não sugestões de apresentação. Como tal, pertencem ao markup e não à folha de estilos.

Estive a ler o dtd e a procurar isso, tens razão... Ok, retiro essa parte q afirmei

Em XHTML fecham, e em HTML5 são opcionais. Como ele não indicou o doctype, não há maneira de dizer se foi um erro ou não.

Sem doctype e sem xmlns significa que é html (mas n se sabe a versão). Por isso, o q afirmei, nessa parte, está correto.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
mjamado
Segundo a documentação que li sobre javascript. Tudo o que está no on* (click, change, etc...) passa pelo processamento igual a passar pelo eval. Não tenho aqui à mão isso mas posso tentar procurar outra vez, se necessário.

Não é essa a questão. Código através de eval não é perigoso per se. Só é perigoso se construíres o código a partir de input externo. But then again, javascript já corre do lado do cliente, por isso tanto faz que o estejas a recolher duma caixa de texto ou se algum espertalhão altera os valores directamente no Firebug, por exemplo. Há riscos piores, e não estás a salvo de nada da parte do javascript.

Sem doctype e sem xmlns significa que é html (mas n se sabe a versão). Por isso, o q afirmei, nessa parte, está correto.

Tecnicamente, uma página HTML sem doctype será interpretada como HTML 4.01 nos IE's e como XHTML 1.0 Transitional em todos os outros; mas não é aí que reside o maior significado: essa situação irá modificar bastante a forma de rendering, sobretudo ao nível do box model - é o chamado quirks mode.

Anyway, dificilmente será um ponto de discórdia. O código é válido em qualquer padrão moderno (XHTML 1.x, HTML5), basta escolher o doctype que nos der mais jeito. Mas já que estás numa de picuinhices, o teu código também não é válido: a tag img tem dois atributos obrigatórios, src e... alt. Esqueceste-te deste.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
brunoais

o teu código também não é válido: a tag img tem dois atributos obrigatórios, src e... alt. Esqueceste-te deste.

Oh F***! Tens razão, tinha-me esquecido disso. Obg pelo aviso. Já está corrigido.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
cra2sh

Só para dizer que foi escrito em <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> e o código continua sem funcar...


Bem já que o meu código por ser tão simples para ajudar o SLIFE foi tão criticado, vejam lá se este está melhor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('img.image').click(function() {
	$('img.target').attr('src', $(this).attr('src'));
});
});
</script>
<style>
img.target {
width:350px;
height:250px;
}
img.image {
cursor:pointer;
width:100px;
height:75px;
}
</style>
<title>Trocar Imagens</title>
</head>
<body>
<img src="1.jpg" class="target" alt="target" />
<img src="1.jpg" class="image" alt="image1" />
<img src="2.jpg" class="image" alt="image2" />
<img src="3.jpg" class="image" alt="image3" />
<img src="4.jpg" class="image" alt="image4" />
</body>
</html>

Share this post


Link to post
Share on other sites
brunoais

N gosto de usar nem que se use bibliotecas para coisas simples. Isso à parte:

Perfeito :)


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
cra2sh

N gosto de usar nem que se use bibliotecas para coisas simples. Isso à parte:

Perfeito :)

Obrigado ;)

Share this post


Link to post
Share on other sites
SLIFE

Peço desculpa pela ausensia!

Mas felizmente estive de ferias. e só agorei voltei!

Estive a experimentar o exemplo deixado pelo cra2sh, e funciona muito bem.

Era mesmo isso que precisava fazer. Segunda feira já vou por em pratica e ver como fica na pagina.

Obrigado a todos pela ajuda prestada!

Cpts

SLIFE


Sandro Coelho

Share this post


Link to post
Share on other sites
SLIFE

Boas a todos

Peço desculpa por voltar a topico que ja se encontra fechado, mas surgiu-me um problema

coloquei na imagem principal um efeito de shadobox.

Mas quando clico nas imagens pequenas, elas trocam para o lugar da grande, mas se clicar na grande o efeito da shadobox vai buscar sempre a primeira imagem que já la estava.

Existe alguma maneira de poder resolver isto?

Cpts

SJC


Sandro Coelho

Share this post


Link to post
Share on other sites
brunoais

E poderias explicar como?

Supondo q a pergunta seja algo do tipo: "Então, se sabes, ajuda-me sff"

Eu não tenho info suficiente para te ajudar. Mostra q código tens e mostra melhor o q é q é feito mal e o q é q devia de fazer.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
SLIFE

Supondo q a pergunta seja algo do tipo: "Então, se sabes, ajuda-me sff"

Eu não tenho info suficiente para te ajudar. Mostra q código tens e mostra melhor o q é q é feito mal e o q é q devia de fazer.

Boas

Sim realmente a pergunta era essa, "Então, se sabes, ajuda-me sff"

Eu tenho algo deste genero:

<a href="<?=$cliente->imagem_principal?>" rel="shadowbox"><img src="<?=$cliente->imagem_principal?>" alt="" width="350" height="300"  class="target"/></a>

Isto na imagem principal

Nas imagens pequenas tenho:

<img src="<?=$fotos_pequenas->imagem?>" alt="" width="100" height="75" class="image" />

Conforme o exemplo que me deram aqui...

Mas depois coloquei o shadowbox, como esta na imagem principal, associando o rel=shadowbox.

Ele funciona tudo bem, mas quando mando executar o shadowbox ele abre sempre a imagem que estava inicialmente.

Mesmo que eu precione qualquer uma das outras e essas aparecem na janela grande.

Se alguem me poder ajudar dando uma dica ou um exemplo agradecia.

Cpts

SJC


Sandro Coelho

Share this post


Link to post
Share on other sites
brunoais

O q tens aí n chega. Eu preciso tb do código javascript q tens para fazer esse trabalho.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.