16

Informações:

Estou tentando fazer uma simples galeria de fotos. Quero mostrar a imagem clicada em tamanho grande no centro da tela. (Clicar em 0.jpg e mostrar em uma outra div 0Large.jpg)

Problema:

Com o código que eu tenho eu consigo fazer isso, mas apenas mostrando realmente a imagem clicada. O problema é que essa imagem clicada vai ser de um tamanho diferente (será algo tipo thumbnail) então ao clicar a imagem que aparece é a pequena. Eu quero mostrar uma versão grande. Ex: 001Large.jpg ao invés de 001.jpg. Não sei direito como fazer isso. Pensei em usar uma espécie de loop na variavel que contem o endereço da imagem até ela achar o ".jpg" e inserir antes desse texto ".jpg" o nome "Large" pra que seja mostrada a versão grande da imagem. Eu tenho um HTML parecido com este:

<div id="gallery-work">
<div id="gallery-warper" >

    <div class="img-container" >
        <img src="img/gallery/work/001.jpg" alt="" width="100%" />
    </div>

    <div class="img-container" >
        <img src="img/gallery/work/002.jpg" alt="" width="100%" />
    </div>

    <div class="img-container" >
        <img src="img/gallery/003.jpg" alt="" width="100%" />
    </div>

    <div class="img-container" >
        <img src="img/gallery/004.jpg" alt="" width="100%" />
    </div>
</div>

E o JavaScript:

$(document).ready(function () {
    $("img").click(function() {
        var imgLocation = $(this).attr("src");
        var newImgLocation = '<div id="showimg" class="midway-horizontal midway-vertical"><img class="imgshow midway-horizontal midway-vertical" src="' + imgLocation + '"/></div>';

        $(".main-container").append(newImgLocation);
        Midway();

        $("#showimg").click(function() {
            $(this).remove();
        });
    });
});

Exemplo no JSFiddle

Obs: Ao clicar na div que contem a imagem grande deveria remover a imagem mas no JSFiddle não está funcionando.

5 Respostas 5

8

Resposta:

Primeiramente, você deve gerar o caminho de suas imagens dinamicamente, para que seja fácil altera-las dinamicamente também.

Explicação:

Você pode gerar o caminho de suas imagens automaticamente desta maneira utilizando esta função então declare ela no inicio de seu JS para usa-la depois:

function setSRCImagens(caminho){
  $('.img-container img').each(function(index){
    $(this).attr('src', caminho+index+'.jpg');
    $(this).attr('index', caminho+index);
  });      
}

E então você pode executar no evento onLoad ou no documentReady (quando sua página carrega):

setSRCImagens("img/gallery/work/");

Para colocar as imagens pequenas.

E pode executar no evento onClick de suas imagens:

var newImgLocation = '<div id="showimg" class="midway-horizontal midway-vertical"><img class="imgshow midway-horizontal midway-vertical" src=""/></div>';
$(".main-container").append(newImgLocation);
$('#showimg img').attr('src', $(this).attr('index')+'Large.jpg');

Para colocar "Large" no fim do caminho do src igual a pequena porém da caixa negra que você fez e deixa-la grande.

Exemplo funcionando no JSFiddle(não contem as imagens)

Muito Importante:

Você deve se certificar que suas imagens sigam esta ordem de nome: 0.jpg,1.jpg... e 0Large.jpg,1Large.jpg... em diante.

0
7

A melhor coisa que você faz é utilizar algum plugin específico para isso, eu recomento o colorbox, você não precisa quebrar a cabeça programando o javascript, além de outros recursos, depois é só personalizar o css, isso se for realmente necessário, segue um exemplo simples:

<a class="group1 cboxElement" href="img/gallery/work/001Large.jpg" title="Esse title vai aparecer no plugin.">
   <img src="img/gallery/work/001.jpg" />
</a><br/>

<a class="group1 cboxElement" href="img/gallery/work/002Large.jpg" title="Esse title vai aparecer no plugin.">
   <img src="img/gallery/work/002.jpg" />
</a><br/>

<a class="group1 cboxElement" href="img/gallery/work/003Large.jpg" title="Esse title vai aparecer no plugin.">
   <img src="img/gallery/work/003.jpg" /> 
</a>

e no head você chama o js e o css dele, disponível para dowload aqui, além disso inclui o seguinte código:

$(".group1").colorbox({rel:'group1'});
2
  • Obrigado amigo, concordo com você, a melhor coisa vai ser usar mesmo um pronto. Gostaria de poder marcar sua resposta como "Resposta" mas a pergunta do tópico é pra trocar o SRC e não uma maneira de fazer uma galeria. Por fim vou acabar usando o ColorBox mesmo. Eu já tinha dado uma olhada nele, mas achei que seria mais pratico fazer algo simples, mas não é tão simples quanto somente estilizar com CSS. Obrigado! Commented 14/02/2014 às 17:20
  • Isso é questionável, mas não cabe aqui, precisando estamos ai! Commented 14/02/2014 às 19:23
2

Utilize data attributes:

html:

<img src="img/gallery/003.jpg" 
     data-large-img="img/gallery/Large003.jpg"
     alt="" 
     width="100%" />

js:

$(document).ready(function () {
  $("img").click(function() {
    var largeImg = $(this).data("large-img");
    alert(largeImg); // img/gallery/Large003.jpg
  }
});

Exemplo jsfiddle

1
  • Lembrando apenas que o uso de data attributes diretamente no HTML deve ser feito com moderação a fim de garantir compatibilidade principal, mas não exclusivamente, com respeito ao Internet Explorer o qual nas versões 8, 9 e 10 os suportam parcialmente. Com a jQuery, no entanto, desde que não usando jQuery.data() em documentos XML (por causa do IE novamente), sem problemas. Commented 14/02/2014 às 11:50
2

Um jeito bem fácil de resolver o seu problema é utilizando Expressões Regulares para alterar o endereço da imagem sem ter que modificar muito o seu código.

Exemplo pra encontrar nome do arquivo que é um número seguido de .jpg:

/\/([0-9]+)\.jpg/i     //apenas números
/\/([0-9a-z]+)\.jpg/i  //números e letras

Para entender o que essa expressão faz use-a no RegExper.com.

Aplicando no seu código:

var imgLocation = $(this).attr("src").replace(/\/([0-9]+)\.jpg/i, '/$1large.jpg'); 
// De: img/gallery/work/001.jpg
// Para: img/gallery/work/001large.jpg

var newImgLocation = '<div id="showimg" class="midway-horizontal midway-vertical"><img class="imgshow midway-horizontal midway-vertical" src="' + imgLocation + '"/></div>';

$(".main-container").append(newImgLocation);
2

Grande parte dos problemas cuja solução dependa de navegar pelo DOM se resolve estruturando o HTML da forma adequada. A estrutura apresentada pelo Kenny, usada por muitos plugins como Lightbox, Colorbox dentre outros, resolve bem esse problema com um simples:

$( this ).attr( 'href' );

Dentro de um jQuery.click() já é possível obter o path da imagem maior.

A sua estrutura atual, apesar de não ser a mais apropriada, também permite que você reproduza o comportamento, te falta apenas saber como adicionar uma string qualquer no path da imagem original.

Tudo o que você precisa é:

  1. Localizar o nó correspondente à imagem
  2. Obter seu atributo src
  3. Manipulá-lo
  4. Substituir o valor do atributo src pelo novo

Veja minha implementação

O "truque" aqui está em localizar o último ponto na string do path e substituir tudo que houver depois dele pela string que distingue a imagem grande e a extensão da mesma.

Nessa solução leva-se em conta que a extensão da imagem grande será sempre JPG, mas se por algum motivo obscuro você tem que a imagem grande manterá a extensão da imagem pequena, e que a extensão da imagem pequena pode variar entre múltiplos formatos (normal em upload de imagens) basta obter a referida extensão antes:

src.split( '.' ).pop();

Veja funcionando na segunda revisão. Nessa revisão troquei a extensão da primeira imagem de JPG para PNG para que ficasse bem evidente (no Console, claro) que a extensão original estava sendo usada.

2
  • Eu realmente acho que o melhor caminho seria usar o HTML que está na resposta do Kenny, mas sem plugin, como você sugere.
    – bfavaretto
    Commented 14/02/2014 às 12:43
  • 2
    Usar ou não usar plugins é sempre um assunto bastante delicado e controverso, especialmente com JavaScript onde tudo que é demais pode ser (e vai acabar sendo) prejudicial à performance. Não é o caso desse cenário pois com algumas poucas linhas foi possível resolver o problema-mor proposto, mas se o objetivo for mesmo uma galeria, com efeitos similares ao Lightbox e tudo o mais, não é preciso reinventar a roda ou pior, dispender tempo com a compatibilidade crossbrowser que scripts renomados têm. Commented 14/02/2014 às 16:25

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 .