Skip to main content
Commonmark migration
Fonte Link

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 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.

#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.

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.

coloquei um fiddle e mudei as funções pra funcionar como o op quer
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

#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,terminacao){
  $('.img-container img').each(function(index){
      $(this).attr('src', caminho+index+terminacao+'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:

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

Para colocar "Large" no fim dos caminhosdo caminho do src igual a pequena porém da caixa negra que você fez e deixa-las grandesla 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.

#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,terminacao){
  $('.img-container img').each(function(index){
      $(this).attr('src', caminho+index+terminacao+'.jpg');
  });      
}

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:

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

Para colocar "Large" no fim dos caminhos e deixa-las grandes.

#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.

#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.

added 69 characters in body
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

#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,terminacao){
  $('.img-container img').each(function(index){
      $(this).attr('src', caminho+index+terminacao+'.jpg');
  });      
}

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:

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

Para colocar "Large" no fim dos caminhos e deixa-las grandes.

#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.

#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 :

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

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:

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

Para colocar "Large" no fim dos caminhos e deixa-las grandes.

#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.

#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,terminacao){
  $('.img-container img').each(function(index){
      $(this).attr('src', caminho+index+terminacao+'.jpg');
  });      
}

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:

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

Para colocar "Large" no fim dos caminhos e deixa-las grandes.

#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.

resumi ao uso de uma função apenas
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75
Carregando
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75
Carregando