Galeria de imagens

[WilhelmSe]

   Estou fazendo umas páginas de comics (mas ja estou planejando utiliza-las para outros fins também) e na busca por um bom sistema, cheguei a conclusão de que era melhor fazer eu mesmo, então fiz um código bem basico, o problema é que esse código fica extremamente extenso, e difícil de ficar editando, então prefiro deixar esse código perfeito agora do que mais pra frente ficar irritado arrumando dezenas de páginas

 

   O Código esta implementado na seguinte página: http://wowlore1.blogspot.com/p/comic1.html

   Vide que ainda é um teste.

 

   Abaixo esta o código BEM simplificado:

 

Código das paginas em miniatura:

 

   <comic-page id="pag1"  onclick="document.getElementById('1').style.display='block'; document.getElementById('2').style.display='none';"><img src="aqui é o link da imagem em miniatura"/></comic-page>

 

 

Codigo da página:

 

   <paginas-comic id="1" style="display:block;"><comic-img-area></comic-img-area><img src="link da imagem grande"></paginas-comic>
   <paginas-comic id="2" style="display:none;"><comic-img-area></comic-img-area><img src="link da imagem grande 2"></paginas-comic>

 

 

Mas acho que só de olhar para o codigo é possivel ver que ele fica gigantesco dependendo do numero de paginas, abaixo é o código de UMA miniatura de pagina:

 

 

   <comic-page id="pag1"  onclick="document.getElementById('1').style.display='block'; document.getElementById('2').style.display='none';document.getElementById('3').style.display='none';document.getElementById('4').style.display='none';document.getElementById('5').style.display='none';document.getElementById('6').style.display='none';document.getElementById('7').style.display='none';document.getElementById('8').style.display='none';document.getElementById('9').style.display='none';document.getElementById('10').style.display='none';document.getElementById('11').style.display='none';document.getElementById('12').style.display='none';document.getElementById('13').style.display='none';document.getElementById('14').style.display='none';document.getElementById('15').style.display='none';document.getElementById('16').style.display='none';document.getElementById('17').style.display='none';document.getElementById('18').style.display='none';document.getElementById('19').style.display='none';document.getElementById('20').style.display='none';document.getElementById('21').style.display='none';document.getElementById('22').style.display='none';document.getElementById('23').style.display='none';document.getElementById('24').style.display='none';document.getElementById('25').style.display='none';document.getElementById('26').style.display='none';document.getElementById('27').style.display='none';document.getElementById('28').style.display='none';document.getElementById('29').style.display='none';document.getElementById('30').style.display='none';document.getElementById('31').style.display='none';"><img src="imagem em miiatura"></comic-page>

 

   Bom, gostaria de saber se existe alguma forma de diminuir esse código, ou algum alternativo que faça exatamente a mesma coisa, por que sinceramente, são centenas de linhas de código só pra inserir miseras 31 paginas de uma HQ....

   Desde já agradeço.

[DiF]

@GuilhermeYuji Existe N maneiras de fazer isso.

Por exemplo,

• banco de dados
• vetores
• xml
• json

 

Sobre o código, podes fazer por exemplo um json com os dados que quiser e aí no próprio código fazer ele iterar e montar a estrutura de acordo com o número de páginas de cada um automaticamente.

 

veja uma explicação simples na stackoverflow:http://pt.stackoverflow.com/questions/3260/entendendo-o-arquivo-json

 

O que lhe interessa mais é o exemplo de requisição assíncrona(ajax) montando uma estrutrura json

 

$.ajax({
    url: 'js/vendor/testedb.json',
    dataType: 'json'
}).done(function(data){
      var item = [];
        $.each(data, function(key,val) {
            item.push('<li id="' + key + '">' + val + '</li>');
        });

        $('<ul/>',{
            'class': 'myclass',
            html: item.join('')
        }).appendTo('body');
  });
       

Veja este é só um mero exemplo. copiar e colar não vai funcionar. É preciso que você estude e ele e compreenda que na nova versão do jQuery, a função $.ajax() mudou os callbacks que antes eram  "success", "error" e eram como atributos. Agora são funções   como done() e fail().

 

Basicamente a a url é o caminho do arquivo json a ser aberto, o datatype indica que o tipo é json.

Dentro da função done()  que possui uma função como parâmetro recebendo o data que é o callback do arquivo. Dentro desta função,  a variável item recebe um vetor vazio.

 

A função each possui dois parâmetros que é o data(o callback) e  uma função que recebe mais dois parâmetros a chave e o valor.(semelhante ao foreach do php)

dentro da função each, a função push insere um elemento <li> cujo o valor ID é a chave e dentro do elemento <li> o valor. 

Mais a baixo o elemento ul é mesclado com o  vetor de itens.

 

basicamente é isso. o lance é você estudar e praticar!