Galeria de Imagens (JsGallery)

[KaKarotto]

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

Editado Dezembro 10, 2007 por KaKarotto