Gerar divs e posiciona-las automaticamente

[Lord Wadder 0]

Ola, eu tenho uma pequena duvida sobre uma galeria de fotos com paginacao em AJAX.

O esquema e o seguinte:

- A galeria tera que ter um div como container das fotos e um div onde aparecera os thumbs e os links de paginacao;

- No div que contera os thumbs e os links deve ter no maximo 2 linhas e 3 colunas;

- Assim que a pagina da galeria for acionada, o XMLhttprequest fara a requisicao ao servidor e carregara o arquivo fotos.xml;

- O arquivo fotos.xml tem o caminho, descricao, as imagems e os thumbs e vou anexa-las a div "thumb";

- O script vai clonar esse div com o conteudo do arquivo e quando atingir 6 div's (2 linhas X 3 colunas) ja terei a primeira pagina de resultados;

- Se houver mais que 6. ele fazar uma paginacao de resultados com os famosos links [1], [2], [3], etc.;

O meu problema consiste em estruturar o codigo javascript, tipo, clonar a div thumb e posiciona-la em relacao a anterior, de forma que eu consiga organizar 2 X 3 e que metodo usar na paginacao, tipo: Vou criar um outro div pra conter os thumbs e carregar todos os resultados de uma vez e clona-lo, fazendo com que um div fique por cima de outro e usar div.style.visibility: hidden;, ou se, faco um script que, quando o usuario clicar no link pra segunda pagina de reultados, delete os primeiros resultados e carregue os proximos.

Encarecidamente, peco ajuda aos membros em como organizar esse trabalho. Se alguem tiver algum exemplo ou dica eu agradeco...

 

Link para a imagem: IMAGEM

[Wilker 3]

acho q você ta fazendo um poko de tempestade em copo d'agua kra... javascript nao deve ser usado para montar layouts (eu mesmo só faco isso em casos extritamente nescessarios), oque voce pode fazer eh montar o esqueleto em HTML, e apenas trocar os valores, vamos a minha teoria para resolver seu problema:1 - crie um HTML que forme a sua galeria, soh html puro, e imagens nao linkadas (ou linkadas para algo nulo ou que represente nulidade, como por exemplo akelas imagens: carregando... ou a logo do seu site)2 - agora voce deve ter para os thumbs 6 imagens (tag <img>) que nao exibem nada (ou nulidade como eu falei antes), voce deve colocar um ID em cada uma delas, recomendo fazer isso de forma ordenada (exemplo: galeriaThumb_1, galeriaThumb_2, galeriaThumb_3...)3 - carregue o seu XML e ordene ele com javascript, se nao foi obrigatorio o uso do XML, eu recomendo usar PHP (ou outra linguagem server-side), pois usando JSON é mais facil organizar direto no PHP, a organizacao vai ser simples, voce deve gerar um array com os dados de todos os thumbs, ou seja, o thumb poderia ser uma estrutura (objeto), exemplo assim:thumb.path = caminho do thumbnailthumb.img = caminho da imagem em tamanho originalthumb.alt = texto para thumbou se voce tiver algum padrao ou outra maneria, gere apenas um array com os links dos thumbs (no lugar da estrutura que contem mais dados)4 - agora sim, a paginacao vai vir por esse array, eh soh fazer akeles for, ai voce pega as imagens da margem atual e joga nos campos <img> que voce criou (acessando pelo ID)5 - coloca eventos nas imagens para abrir a imagem em tamanho grandepronto kra, eu escrevi mto pois queria tentar explicar, mas o processo é bem simples de fazer, alem de deixar o layout com uma atualizacao mto mais facilflw ae, qq duvida pode postar ;)

[Lord Wadder 0]

Wilker, valeu a forca, cara... Essa tecnica eu ja conhecia, mas voce me mostrou uma maneira mais facil de fazer, valeu mesmo... A minha duvida, em suma, era: "Seria possivel desenvolver a mesma galeria que o Maxwell Dayvson desenvolveu com o Flash em Javascript?" Porque Javascript nao tem nenhuma funcao como duplicateMovieClip() como no Flash mas eu ja conhecia o metodo cloneNode. O problema e que o cloneNode copia tudo do node que se pede, inclusive o atributo "id", que faz com que a duplicacao dos div's crie div's com o mesmo id, position, z-index e tudo mais... Pode parecer anti-semantico ou ate perda de tempo mas pra quem esta comecando a estudar OOP (meu caso) e optou por web scripts e bem interessante. Eu to tentando reproduzir isso em Javascript no momento...

[Wilker 3]

o modo + facil de criar coisas dinamicamente eh usando o: document.createElement("nomeDaTag");

 

com isso voce criar elementos de forma dinamica direto no javascript, essa pratica nao eh tao rejeitada, eu ateh criei uma API de Templates para Javascript soh para usar nesse tipo de tarefa, essa API carrega um template de um arquivo html (com ajax), e "marca" certas tags dentro do html, essas tags marcadas ficam sendo facilmente alteraveis, um exemplo:

 

template.html:

<table><tr><td colspan='2' oName="titulo">conteudo</td></tr><tr><td oName="menu">menu</td><td oName="conteudo">aaa</td></tr></table>

ai no JS eu faco:

 

arquivo.js

var html = Template.load('template.html');html.titulo.innerHTML = 'trocando o html interno no titulo';html.menu.innerHTML = "sei la, coloando algo";html.menu.style.fontWeight = 'bold'; //dexando texto do menu em negritohtml.conteudo.innerHTML = 'alguma coisa pro conteudo';html.conteudo.className = 'cssConteudo'; //definindo uma class pro conteudovar minhaArea = document.getElementById("lugar");minhaArea.appendChild(html._obj);

como voce pode ver, eu puxei um template e o modifiquei, depois joguei ele dentro de outro elemento ja existente no HTML

 

se voce quizer essa minha API de Template me avisa, eu t posso t passar ela segunda feira, pq eu soh tenho ela la no trampo... qq coisa avisa ai ;)

[Lord Wadder 0]

Wilker, mais uma vez eu agradeco muito... Essa sua ultima dica me deu boas ideias pra fazer o que eu quero. Realmente, o metodo cloneNode nunca seria o equivalente ao duplicateMovieClip do Flash. Essa sua solucao de gerar elementos dinamicamente com createElement() foi bem mais util. Pro que eu quero exatamente vai custar um pouco mais de digitacao mas creio que eu alcance o resultado esperado... Quanto a sua API, eu estou bem interessado. Nao sei se e melhor voce disponibiliza-la por email ou aqui no forum mas obrigado mais uma vez, cara...

[Wilker 3]

rlx, eu posto ela aqui pra você, mas tipo, eu aviso logo, eu uso o prototype, entao ele é pre-requisito pra ela, você pode baxar o prototype em: www.prototype.conio.net

 

tem outro pre-requisito criado por mim tb, q eh document.recusiveParse(), essa funcao aplica um metodo em uma estrutura de nos, aqui vai ela:

 

document.js

/******************************************************//**** Wilker Extensions *******************************//******************************************************//** versao:	1.0								   **//** autor:	 Wilker Lúcio da Silva				 **//** descrição: extenções para document			   **//******************************************************///aplicar uma função recusivamente em um Nodedocument.recusiveParse = function(node, func) {	var pilha = [];		pilha.push($A(arguments));		while(pilha.length > 0) {		var sargs = pilha.pop();				var node = $(sargs[0]);		var func = sargs[1];		var args = sargs[2];				var nodes = node.childNodes;				for(var i = 0; i < nodes.length; i++) {			var n = nodes[i];						if(n.nodeType != 1)				continue;						func(n, args);						if(n.childNodes.length > 0)				pilha.push([n, func, args]);		}	}};

e finalmente, a API de Template:

 

template.js

/******************************************************//**** Wilker Templates API ****************************//******************************************************//** versao:	1.2								   **//** autor:	 Wilker Lúcio da Silva				 **//** descrição: templates dinâmicos para Javascript   **//******************************************************/var Template = {	cachedTemplates: {},		load: function(file) {		if(Template.cachedTemplates[file])			return Template.parse(Template.cachedTemplates[file]);				var req = {			asynchronous: false		};				var request = new Ajax.Request(file, req);				if(request.responseIsSuccess()) {			Template.cachedTemplates[file] = request.transport.responseText;						return Template.parse(request.transport.responseText);		} else {			alert('Não foi possivel carregar o template: ' + file);		}	},		parse: function(html) {		var tmp = document.createElement("div");		tmp.innerHTML = html;				var obj = new Object();				var func = function(n, obj) {			var ele = null;						if(ele = n.getAttribute("oName")) {				obj[ele] = n;			}		};				document.recusiveParse(tmp, func, obj);				obj._obj = tmp;		obj._html = html;				return obj;		}};

é isso ai kra, qq duvida, tamo ae ;)