Resposta:
#Resposta: PrimeiramentePrimeiramente, você deve gerar o caminho de suas imagens dinamicamente, para que seja fácil altera-las dinamicamente também.
Explicação:
#Explicação: VocêVocê pode gerar o caminho de suas imagens automaticamente desta maneira utilizando esta função jquery 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)
Exemplo funcionando no JSFiddle(não contem as imagens)
Muito Importante:
#Muito Importante:
VocêVocê deve se certificar que suas imagens sigam esta ordem de nome: 0.jpg
,1.jpg
... e 0Large.jpg
,1Large.jpg
... em diante.