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.