Ir ao conteúdo
  • Cadastre-se
GuilhermeYuji

Galeria de imagens

Recommended Posts

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

 

   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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×