Galeria XML - Como adicionar descrição ?

[m76 0]

Boa Tarde,

 

Estou usando a galeria do tutorial feito pelo Lucas Ferreira

Link: http://www.imasters.com.br/artigo.php?cn=3495&cc=258

 

Está funcionando normal, porém eu queria incluir a descrição das fotos. Já tentei de várias formas (dentro de minhas limitações), mas não consegui.

Agradeço quem puder ajudar.

[klaulins 0]

Segue como por descrição na foto:

 

nas linhas do xml altere a descrição

 

<foto fp="imgs/foto1p.jpg" fg="imgs/foto1g.jpg" desc="prueba"/>

 

onde desc é a descrição de cada foto.

 

depois no stage crie um textifield instanciado como descricao

 

e vá para alterar os códigos

 

First here

 

//listando conteúdo do nó e inserindo no array de fotos

for (var i = 0; i<f.length; i++) {

var novaimg:Object = new Object(); //criando o objeto de cada foto

novaimg.img_p = f.attributes.fp;

novaimg.img_g = f.attributes.fg;

//adicionando a descrição em cada objeto de foto

novaimg.data = f.attributes.desc;

fotos.push(novaimg); //inserindo objeto no array

}

 

 

 

After there:

 

_root.miniaturas["fp_"+info.iObj].data = fotos[info.index].data;

//definindo ação de clique na miniatura, para ampliar...

_root.miniaturas["fp_"+info.iObj].onRelease = function(){

//usando o obj mvlIMG, para carregar a imagem grande...

mvlIMG.loadClip(this.img_g, img_grande);

//aqui ao clicar puxa o item data de cada foto e exibi no campo criado

descricao.text = this.data;

}

 

 

é mais ou menos isto ;)

 

 

Abraços

[m76 0]

Oi klaulins,Funcionou certinho.Muito obrigado ! Me quebrou um galhão !abs,Mauro

[ronaldosdb 1]

Olá, ao tentar tive dificuldade em implementar a descricaovoce pode mandar ela pra mim...ronaldo_dombosco@hotmail.comvleuRonaldo

[m76 0]

Bom Dia,

 

Consegui colocar os comentários, mas claro que tinha que ter algum problema :)

Na verdade são dois problemas:

 

1- Quando abre a página, a primeira foto abre automaticamente. Preciso que a descrição abra também. Do jeito que está a descrição só aparece se clicar nas miniaturas.

 

2- Quando mudamos a página, a descrição do último traje visto na página anterior continua, então quando muda a página, abre a nova foto, mas a descrição não é atualizada, a não ser que clique na miniatura.

 

Para ter uma idéia do que está acontecendo, o link é: http://www.aspenmoda.com.br/galeria/

 

Agradeço qualquer ajuda.

 

-------------------------------------------------------------------------------------------------------------------------

 

Segue meu código atual abaixo:

 

//variaveis da sequencia...var fotos:Array = new Array();//função de inicio do projeto...function init():Void {	//carregando xml...	var loadDados:XML = new XML();	loadDados.ignoreWhite = true;	loadDados.onLoad = function(sucess) {		if (sucess) {			//primeiro nó: fotos;			var f = this.firstChild.childNodes;			//listando conteúdo do nó e inserindo no array de fotos			for (var i = 0; i<f.length; i++) {				var novaimg:Object = new Object();				//criando o objeto de cada foto				novaimg.img_p = f[i].attributes.fp;				novaimg.img_g = f[i].attributes.fg;				//adicionando a descrição em cada objeto de foto				novaimg.data = f[i].attributes.desc;				fotos.push(novaimg);				//inserindo objeto no array			}			//chamando função q faz a galeria...			criaGaleria();		}	};	//load no arquivo .xml	loadDados.load("fotos.xml");}//função que cria a galeriafunction criaGaleria():Void {	car._visible = 0;	//preloader de imagens grande, usando MovieClipLoader...	//fica livre para usar como quiser...	var mvlIMG:MovieClipLoader = new MovieClipLoader();	var mvlOBJ:Object = new Object();	mvlOBJ.onLoadStart = function() {		car._visible = 1;	};	mvlOBJ.onLoadProgress = function(obj, bl, bt) {		var p = (Math.round(bl/bt)*100);		//porcentagem carregada da imagem		car.p.text = "Carregando... "+p+"%";	};	mvlOBJ.onLoadComplete = function() {		car._visible = 0;	};	mvlIMG.addListener(mvlOBJ);	//	//criando sistema de galeria(quantidade de fotos, fotos por pagina, colunas, altura miniatura, largura, espacamento x, e y);	_global.galeria1 = new Distribute(fotos.length, 14, 7, 62, 98, 10, 9);	//	var objGal1:Object = new Object();	objGal1.onDistStart = function(info:Object) {		//ação de inicio da distribuição das fotos...		//verifica se o mc já está no palco, caso esteja, remove para nova página...		if (_root.miniaturas) {			//removendo miniaturas anteriores na troca de pagina...			_root.miniaturas.removeMovieClip();			// Mostrando a primeira imagem		}		//duplicando o mc conteiner q vai conter as miniaturas, para um novo que poder ser removido...		_root.conteinerInicial.duplicateMovieClip("miniaturas", 1);		//definindo onde o mcConteiner deve aparecer...		miniaturas._x = conteinerInicial._x;		// _x		miniaturas._y = conteinerInicial._y;		// _y		//escondendo...		miniaturas._visible = 0;		mvlIMG.loadClip(fotos[info.index].img_g, img_grande);	};		//	objGal1.onDistUpdate = function(info:Object) {		//puxando da bliblioteca o mc com linkage miniatura, e ja posicionando de arquivo com o _x e _y passados pelo var info...		_root.miniaturas.attachMovie("miniatura", "fp_"+info.iObj, galeria1.nDepth(_root.miniaturas), {_x:info.x, _y:info.y});		//informando ou passando, para miniatura, qual é sua foto grande...		_root.miniaturas["fp_"+info.iObj].img_g = fotos[info.index].img_g;		//criando o movie clip alvo para receber a img pequena, dentro do mc Conteiner...		_root.miniaturas["fp_"+info.iObj].createEmptyMovieClip("img_p", 1);		//carregando thumb via loadMovie...		_root.miniaturas["fp_"+info.iObj].data = fotos[info.index].data;		//definindo ação de clique na miniatura, para ampliar...		_root.miniaturas["fp_"+info.iObj].onRelease = function() {			//usando o obj mvlIMG, para carregar a imagem grande...			mvlIMG.loadClip(this.img_g, img_grande);			//aqui ao clicar puxa o item data de cada foto e exibi no campo criado		};		//Puxar descrição		_root.miniaturas["fp_"+info.iObj].img_p.loadMovie(fotos[info.index].img_p);		//definindo ação de clique na miniatura, para ampliar...		_root.miniaturas["fp_"+info.iObj].onRelease = function() {			//usando o obj mvlIMG, para carregar a imagem grande...			mvlIMG.loadClip(this.img_g, img_grande);			//aqui ao clicar puxa o item data de cada foto e exibe no campo criado			_root.cheat._visible = 0;			_root.descricao.text = this.data;		};	};	objGal1.onDistEnd = function(info:Object) {		//ação de distribuição completa, exibindo mc Conteiner, chamado de miniaturas...		miniaturas._visible = 1;	};	//definindo ao objeto galeria1, os objetos e eventos que deve utilizar...	galeria1.addEventListener("onDistStart", objGal1);	galeria1.addEventListener("onDistUpdate", objGal1);	galeria1.addEventListener("onDistEnd", objGal1);	//	//montando paginação, pegase o nº de paginas e faz o paginador...	//função responsável pelo click dos bts da paginação...	function setPg(obj) {		//restaurando todos bts, para o primeiro frame...		for (i=0; i<galeria1.nPages; i++) {			var mcPgAtual = this._parent["mcPg_" add i];			if (mcPgAtual != this) {				mcPgAtual.gotoAndStop(1);			}			//todos voltam menos o atual...		}		//definindo o frame q deve mostrar...		this.lastFrame = 3;		//mostrando página solicitada...		var iAtual:Number = int(this.pg.text);		galeria1.showPage(iAtual);	}	for (i=0; i<galeria1.nPages; i++) {		//ataxando ao mc vazio, paginacao, os bts de página...		var mcPgAtual = paginacao.attachMovie("mcPg", "mcPg_" add i, i);		mcPgAtual._x = (i*(mcPgAtual._width+3));		//posicionando bt no mc...		mcPgAtual.pg.text = (i+1);		//setando no bt, a pg dele...		//definindo eventos e ações paga o bt da página...		mcPgAtual.onRollOver = function() {			//pega o frame atual e armazena, caso o bt seja o bt de página clicada...			this.lastFrame = this._currentframe;			//ao passar porcima acende			this.gotoAndStop(2);		};		mcPgAtual.onRollOut = function() {			this.gotoAndStop(this.lastFrame);		};		mcPgAtual.onRelease = setPg;	}	//	//mostrando pagina 1 e setando o botão de pg 1...	paginacao["mcPg_0"].gotoAndStop(3);	galeria1.showPage(1);}////iniciando por fim, a galeria...init();

[tp1 0]

Ae brow,

 

Eu incluí mais um campo, com título, no código do Lucas e fiz abrir a descrição e esse título automaticamente.

Dá uma olhada no meu código, o que tah em bold, é o que chama a descrição e o título automaticamente:

 

stop();

//variaveis da sequencia...

var fotos:Array = new Array;

//função de inicio do projeto...

function init():Void {

//carregando xml...

var loadDados:XML = new XML();

loadDados.ignoreWhite = true;

loadDados.onLoad = function(sucess) {

if (sucess) {

//primeiro nó: fotos;

var f = this.firstChild.childNodes;

//listando conteúdo do nó e inserindo no array de fotos

for (var i = 0; i<f.length; i++) {

var novaimg:Object = new Object(); //criando o objeto de cada foto

novaimg.img_p = f.attributes.fp;

novaimg.img_g = f.attributes.fg;

novaimg.data = f.attributes.desc;

novaimg.data2 = f.attributes.nome;

fotos.push(novaimg); //inserindo objeto no array

}

//chamando função q faz a galeria...

criaGaleria();

}

};

//load no arquivo .xml

loadDados.load("portfolio.xml");

}

//função que cria a galeria

function criaGaleria():Void {

car._visible = 0;

//preloader de imagens grande, usando MovieClipLoader...

//fica livre para usar como quiser...

var mvlIMG:MovieClipLoader = new MovieClipLoader();

var mvlOBJ:Object = new Object();

mvlOBJ.onLoadStart = function(){

car._visible = 1;

}

mvlOBJ.onLoadProgress = function(obj, bl, bt){

var p = (Math.round(bl/bt) * 100) //porcentagem carregada da imagem

car.p.text = "Carregando... " + p + "%";

}

mvlOBJ.onLoadComplete = function(){

car._visible = 0;

}

mvlIMG.addListener(mvlOBJ);

//

//criando sistema de galeria(quantidade de fotos, fotos por pagina, colunas, altura miniatura, largura, espacamento x, e y);

_global.galeria1 = new Distribute(fotos.length, 12, 2, 42, 42, 4, 3);

//

var objGal1:Object = new Object();

objGal1.onDistStart = function(info:Object) {

//ação de inicio da distribuição das fotos...

//verifica se o mc já está no palco, caso esteja, remove para nova página...

if(_root.miniaturas){

//removendo miniaturas anteriores na troca de pagina...

_root.miniaturas.removeMovieClip();

}

//duplicando o mc conteiner q vai conter as miniaturas, para um novo que poder ser removido...

_root.conteinerInicial.duplicateMovieClip("miniaturas", 1);

//definindo onde o mcConteiner deve aparecer...

miniaturas._x = conteinerInicial._x; // _x

miniaturas._y = conteinerInicial._y; // _y

//escondendo...

miniaturas._visible = 0;

// Mostrando a primeira imagem

mvlIMG.loadClip(fotos[info.index].img_g, img_grande);

descricao.text = fotos[info.index].data;

titulo.text = fotos[info.index].data2;

};

//

objGal1.onDistUpdate = function(info:Object) {

//puxando da bliblioteca o mc com linkage miniatura, e ja posicionando de arquivo com o _x e _y passados pelo var info...

_root.miniaturas.attachMovie("miniatura", "fp_"+info.iObj, galeria1.nDepth(_root.miniaturas), {_x:info.x, _y:info.y});

//informando ou passando, para miniatura, qual é sua foto grande...

_root.miniaturas["fp_"+info.iObj].img_g = fotos[info.index].img_g;

//passando para a miniatura qual é sua DESCRIÇÃO...

_root.miniaturas["fp_"+info.iObj].data = fotos[info.index].data;

//passando para a miniatura qual é seu TÍTULO...

_root.miniaturas["fp_"+info.iObj].data2 = fotos[info.index].data2;

//criando o movie clip alvo para receber a img pequena, dentro do mc Conteiner...

_root.miniaturas["fp_"+info.iObj].createEmptyMovieClip("img_p",1);

//carregando thumb via loadMovie...

_root.miniaturas["fp_"+info.iObj].img_p.loadMovie(fotos[info.index].img_p);

//definindo ação de clique na miniatura, para ampliar...

_root.miniaturas["fp_"+info.iObj].onRelease = function(){

//usando o obj mvlIMG, para carregar a imagem grande...

mvlIMG.loadClip(this.img_g, img_grande);

//aqui ao clicar puxa o item data de cada foto e exibi no campo criado

descricao.text = this.data;

titulo.text = this.data2;

}

};

objGal1.onDistEnd = function(info:Object) {

//ação de distribuição completa, exibindo mc Conteiner, chamado de miniaturas...

miniaturas._visible = 1;

};

//definindo ao objeto galeria1, os objetos e eventos que deve utilizar...

galeria1.addEventListener("onDistStart", objGal1);

galeria1.addEventListener("onDistUpdate", objGal1);

galeria1.addEventListener("onDistEnd", objGal1);

//

//montando paginação, pegase o nº de paginas e faz o paginador...

//função responsável pelo click dos bts da paginação...

function setPg(obj){

//restaurando todos bts, para o primeiro frame...

for (i=0; i<galeria1.nPages; i++) {

var mcPgAtual = this._parent["mcPg_" add i];

if(mcPgAtual != this) mcPgAtual.gotoAndStop(1); //todos voltam menos o atual...

}

//definindo o frame q deve mostrar...

this.lastFrame = 3;

//mostrando página solicitada...

var iAtual:Number = int(this.pg.text);

galeria1.showPage(iAtual);

}

for (i=0; i<galeria1.nPages; i++) {

//ataxando ao mc vazio, paginacao, os bts de página...

var mcPgAtual = paginacao.attachMovie("mcPg", "mcPg_" add i, i);

mcPgAtual._x = (i*(mcPgAtual._width+3)); //posicionando bt no mc...

mcPgAtual.pg.text = (i+1); //setando no bt, a pg dele...

//definindo eventos e ações paga o bt da página...

mcPgAtual.onRollOver = function(){

//pega o frame atual e armazena, caso o bt seja o bt de página clicada...

this.lastFrame = this._currentframe;

//ao passar porcima acende

this.gotoAndStop(2);

}

mcPgAtual.onRollOut = function(){

this.gotoAndStop(this.lastFrame);

}

mcPgAtual.onRelease = setPg;

}

//

//mostrando pagina 1 e setando o botão de pg 1...

paginacao["mcPg_0"].gotoAndStop(3);

galeria1.showPage(1);

}

//

//iniciando por fim, a galeria...

init();

[m76 0]

Valeu mesmo hein tp1 !

Eu tinha feito funcionar com uma gambiarra, agora ficou certinho.