Jump to content
Fórum Script Brasil
  • 0

Galeria de Imagens (JsGallery)


KaKarotto

Question

Vou postar aqui um código que tem sido muito útil para mim. O código foi 100% feito por mim, então usem a vontade.

Embora a função seja para Imagens, ela pode ser usada para outros fins. O algoritmo tem como principal tarefa, fragmentar grandes conteúdos em pequenos trechos de páginas linkadas dinamicamente.

/*
Licença: Pública.
Código: Galeria de Imagens - JsGallery.
Arquivo: JsGallery.js
Elaborado e Desenvolvido por: Eduardo Ottaviani.
Email: edudu_tata@hotmail.com.
*/

function JsGallery(tamanho, pg, q, dir){

var paginas, ID, i, url
url=""

url+=url+dir

ID=function(id){ return document.getElementById(id)}

paginas=Math.floor(tamanho/q)+((tamanho%q)?1:0)

if(!ID("pgLinks") && !ID("tabela")){

 var divAUX=document.createElement("div")
 divAUX.setAttribute("id", "pgLinks")
 document.body.appendChild(divAUX)

 divAUX=document.createElement("div")
 divAUX.setAttribute("id", "tabela")
 document.body.appendChild(divAUX)
}

ID('pgLinks').innerHTML=""
ID('tabela').innerHTML=""

    for(i=1; i<=paginas; i++)
    ID('pgLinks').innerHTML+="<a href='#' target='_self' onclick=\"JsGallery("+tamanho+","+i+","+q+",'"+dir+"'); return false\">"+i+"</a>"

ID('pgLinks').innerHTML+="<span>("+pg+")</span>"

    for(i=((pg-1)*q); i<((pg-1)*q)+1+(q-1); i++){

        if(i>tamanho-1)
        break

    
//Espaço das iterações

// Aqui haverá todas as iterações.
     
    

    }

}
O sistema criará dois divs de id´s: "divLinks" e "tabela". Dentro do "divLinks" irão os links para as próximas páginas, e no div "tabela" irá todas as imagens. A variável url, no inicío do código, carregará o lugar de onde o sistema fará o download das imagens. [Parâmetros] tamanho: Número de imagens existentes. tipo: número. q: quantidade de imagens mostradas por página. tipo: número. dir: Diretório das imagens. tipo:string. pg: A página das imagens. tipo:número. [Aplicação: Exemplo] O site animewallpapers usa um diretório onde eles usam o seguinte padrão: - As imagens são armazenadas em um diretório com o seu nome. - As imagens em miniatura são arquivos com o nome da imagem seguida de : "_numero da imagem_t.jpg". Exemplo: "inuyasha_1_t.jpg", "inuyasha_2_t.jpg"... - As imagens em tamanho normal tem seu nome seguido de : "_número da imagem_1024.jpg": Exemplo: "inuyasha_1_1024.jpg", "inuyasha_2_1024.jpg". Dessa forma, temos um algoritmo pronto para mostrar as imagens. Colocamos o valor da url no início do código:
url="http://www.animewallpapers.com/wallpapers/"
E no espaço das iterações (vide código acima) eu coloco as localizações das imagens grandes, dos thumbnails e insiro as imagens dentro do div "tabela".
var thumbnail=url+"/"+dir+"_"+(i+1)+"_t.jpg"
var imgGrande=url+"/"+dir+"_"+(i+1)+"_1024.jpg"

ID('tabela').innerHTML+="<img src="+thumbnail+" /><a href="+imgGrande+">Tamanho Grande</a>"
Agora chamo a função (fora da função JsGallery), com os parâmetros necessários. Ex:
window.onload=function(){
JsGallery(30, 1, 5, "inuyasha")
}

Dá pra notar que o código é bastante extensível, vai depender da imaginação do usuário a sua implementação em diversos sistemas. Com python, php ou asp, você pode definir facilmente o argumento "tamanho" da função, verificando a quantidade de arquivos em um diretório do servidor.

Obs: Eu só pediria para que os que forem usar, terem a gentileza de deixar os comentários intocáveis, caso queira alterar o código, acrescente o seu nome ao comentário e coloque um link para essa página que contém o conteúdo original.

Abraço

Edited by KaKarotto
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.5k
×
×
  • Create New...