Galeria de Imagens Facilitada do Imasters

[kika 0]

Estou utilizando a Galeria de Imagens do artigo Lucas Ferreira - Galeria de fotos facillitada

 

Gostaria de saber como faço pra colocar a primeira foto aparecendo na cena, pois no código atual só aparecem as miniaturas e a imagem só aparece depois que se clica na miniatura.

 

A segunda dúvida é que gostaria que aparecesse a descrição da imagem ao lado da imagem ampliada e não abaixo, pois de acordo com o que estou fazendo na minha página, só tenho espaço para os lados.

Pois eu diminui o tamanho do palco e mudei a disposição de como aparecem as imagens.

 

Essa descrição que eu quero que apareça, é uma imagem e coloquei o seguinte trecho de código no XML:

 

 

<foto fp="imgs/foto1p.jpg" fg="imgs/foto1g.jpg" fd="imgs/foto1d.jpg "/>

No Flash eu criei um MC vazio chamado mcDescricao e posicionei ele abaixo das miniaturas e ao lado da foto ampliada, mas não estou conseguindo adaptar o código para que apareça essa descrição.

Já dei uma mexida no código, mas não acontece nada

[m76 0]

Oi Kika,

 

Tive um problema parecido.

Dá uma olhada se esse tópico te ajuda: http://forum.imasters.com.br/index.php?sho...&hl=galeria

Se continuar com problemas, é só avisar.

 

falou !

[kika 0]

Oi m76,

 

Acabei de fazer do modo como você fez, sendo que meu texto é uma imagem e criei um MC vazio para que esse jpg aparecesse...funcionou.

 

Só que o problema é que a imagem grande (ampliada) e sua respectiva descrição continuam não aparecendo assim que abrimos a página, elas só aparecem quando clicamos na miniatura.

 

Vou colocar o meu código aqui para que você possa ter uma idéia do que fiz.

 

XML

 

<?xml version="1.0" encoding="UTF-8"?><fotos>  <foto fp="imgs/foto1p.jpg" fg="imgs/foto1g.jpg" fd="imgs/foto1d.jpg "/>   <foto fp="imgs/foto2p.jpg" fg="imgs/foto2g.jpg" fd="imgs/foto1d.jpg "/>   <foto fp="imgs/foto3p.jpg" fg="imgs/foto3g.jpg" fd="imgs/foto1d.jpg "/>   <foto fp="imgs/foto4p.jpg" fg="imgs/foto4g.jpg" fd="imgs/foto1d.jpg "/>   <foto fp="imgs/foto5p.jpg" fg="imgs/foto5g.jpg" fd="imgs/foto1d.jpg "/>   <foto fp="imgs/foto6p.jpg" fg="imgs/foto6g.jpg" fd="imgs/foto1d.jpg "/>   <foto fp="imgs/foto7p.jpg" fg="imgs/foto7g.jpg" fd="imgs/foto1d.jpg "/>   <foto fp="imgs/foto8p.jpg" fg="imgs/foto8g.jpg" fd="imgs/foto1d.jpg "/>   <foto fp="imgs/foto9p.jpg" fg="imgs/foto9g.jpg" fd="imgs/foto1d.jpg "/></fotos>

//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.img_d = f[i].attributes.fd;				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, 9, 3, 24, 20, 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();			// 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].img_d = fotos[info.index].img_d;		//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);			mvlIMG.loadClip(this.img_d, img_descricao);			//aqui ao clicar puxa o item data de cada foto e exibe no campo criado		   // _root.cheat._visible = 0;		  //  _root.img_descricao.img = this.img_d;		};	};	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]

Dá uma olhada nesse link: http://www.fugpr.com.br/?s=artigos&a=v&id=6

No primeiro comentário, é explicado como fazer aparecer a 1ª foto automaticamente.

 

Obs.: Não sou muito bom em AS, por isso te passo os links :)

[kika 0]

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif m76,

 

uhuuuu....consegui, muito obrigada, esse link que você me passou me salvou. A única coisa que faltava era alterar a linha de código da classe. Agora está tudo funcionando perfeitamente.

 

Muito obrigada mesmo.

Muito sucesso pra você.

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[kika 0]

Gostaria de saber se tem como colocar algum efeito nas fotos ampliadas quando elas surgem, pois do jeito que está, da a sensação de que elas estão pulando. E como fazer para que a foto ampliada possa ser aberta com um zoom maior (um pop up), pois minhas fotos são grandes e tem alguns detalhes que só vendo no tamanho real mesmo.

[m76 0]

Oi Kika,

 

Para um efeito de fade in / fade out na entrada da foto grande, coloque a action abaixo no movie clip que está instanciado como img_grande

 

onClipEvent (load) {	_alpha = 30;	}onClipEvent (enterFrame) {	if(_alpha < 100) _alpha +=10	}

Agora para o pop-up, será necessário alguém com mais conhecimento (e boa vontade !) para te ajudar...

 

falou !

[kika 0]

Muito obrigada m76, agora ficou show. Quanto a imagem ampliada ter um zoom maior vou ver depois como posso fazer.

 

Você me ajudou bastante, valeu mesmo.

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Public2004 79]

Muito obrigada m76, agora ficou show. Quanto a imagem ampliada ter um zoom maior vou ver depois como posso fazer.Você me ajudou bastante, valeu mesmo. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Você pode utilizar um pop-up para mostrar a imagem ampliada, ex:

// Action do botão:on (release) { getURL ("java script:window.open('suapagina.htm',newDate().getTime(),'width=600,height=600,top=0,left=0,scrollbars=no');void(0);"); }

Abraços.

[kika 0]

Oi Public2004, Eu bem que tentei fazer isso, mas não está funcionando. Criei um botão com efeito alfa e coloquei ele posicionado em cima do mcGrande (que é meu movie clip com a imagem que aparece quando clico na miniatura). Só que quando clico nesse botão, ele abre uma página no Internet Explorer que fecha automaticamente sem que eu possa ver nada. Cheguei a desabilitar o bloqueador de pop ups do IE mas não adiantou nada.E eu ainda vou ter que fazer alguma ligação das miniaturas com essa foto grandona, pois ele vai ter que entender que para cada foto ampliada terei a opção de abrir uma outra maior. E estou quebrando minha cabeça para acertar essa lógica, já tentei várias coisas e não funciona.

[Public2004 79]

Oi Kika,

 

Segue abaixo um link que mostra como gerar e centralizar uma popup.

http://www.kirupa.com/developer/mx/centered_popup.htm

 

Ah outro detalhe, quando utiliza "getURL" acho que só funciona on-line.

 

Abraços.

[kika 0]

Oi Public2004,

 

Esse link que você me passou é muito legal, fiz tudo exatamente como estava lá e testei online e funcionou perfeitamente.

 

Agora tenho que pensar em uma maneira de abrir esse pop up para cada miniatura minha que abrir ampliada, pois ele está abrindo a mesma foto grandona para todas as fotos da galeria.

 

Muito obrigada pela sua ajuda, valeu muito.

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Public2004 79]

Oi Public2004,Esse link que você me passou é muito legal, fiz tudo exatamente como estava lá e testei online e funcionou perfeitamente. Agora tenho que pensar em uma maneira de abrir esse pop up para cada miniatura minha que abrir ampliada, pois ele está abrindo a mesma foto grandona para todas as fotos da galeria.Muito obrigada pela sua ajuda, valeu muito. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Oi, o seu servidor suporta páginas ASP ou PHP?Caso afirmativo, você passa uma variável no link (GET), e a página que receber a variável, vai mostrar a imagem referente a esta.Qualquer coisa grita ae...Abraços.

[kika 0]

Meu servirdor suporta ASP e PHP sim, mas não consegui entender muito bem como fazer o que você falou.

[Public2004 79]

Meu servirdor suporte ASP e PHP assim, mas não consegui entender muito bem como fazer o que você falou.

Bom vamos lá, vou tentar ser o mais objetivo e claro possível.No link da pop-up, você chama uma página.html certo? O que deverá ser feito e alterar este link para uma página ASP e incluir um identificador para cada imagem (ID), fica assim:Para a imagem 01 = http://www.seusite.com.br/pagina.asp?id=01Para a imagem 02 = http://www.seusite.com.br/pagina.asp?id=02e assim por diante...Agora na página ASP, você inclui os códigos abaixo:

<%' Recupera o numero do id eliminando aspas simples mais espaços em brancoid = replace(Request.QueryString("id" ),"'","''")' A condição abaixo verifica qual "id" e guarda o valor da variável "img"If id = "" Thenimg = "blank.jpg"ElseIf id = "01" Thenimg = "img01.jpg"ElseIf id = "02" Thenimg = "img02.jpg"ElseIf id = "03" Thenimg = "img03.jpg"End If%><img border="0" alt="" src="<% =img %>" width="600" height="600">

Explicando: A página ASP recupera o id passado na QueryString, verifica qual o número e mostra a imagem referente na respectiva linha de chamada.Espero que seja isto, se não for, corrigimos.Abraços.

[kika 0]

muito obrigada pelas dicas, vou tentar fazer e qualquer coisa posto aqui.Bom final de semana

[kika 0]

Public2004,

 

Não consegui fazer funcionar, pois no Flash não tenho as imagens, elas são chamadas atrás da função que chama o XML, por isso não consigo fazer funcionar do jeito que você falou.

Meu problema está aqui

Para a imagem 01 = http://www.seusite.com.br/pagina.asp?id=01

Para a imagem 02 = http://www.seusite.com.br/pagina.asp?id=02

 

Pra todas as miniaturas, ele continua abrindo a imagem grande numero 1

[Public2004 79]

Olá Kika,

 

Voltando um pouco no seu projeto.

Siga a mesma teoria dos [thumbs > imagem grande];

Quando você chama a "imagem grande" através do "thumb", você está enviando uma variável ao "mc" que vai carregar a respectiva "imagem grande" certo?

No processo seguinte: [imagem grande > imagem popup] você vai fazer a mesma coisa, só que agora inserindo esta mesma variável na URL que chama a pop-up, ex:

"http://www.seusite.com.br/pagina.asp?id=" + variavel

Outro detalhe, em vez de criar um botão em cima da imagem grande que está em um "mc", utilize a própria instância do "mc" para a função "getURL".

 

Caso ainda tenha dúvidas, poste uma parte do seu código citado neste exemplo para que possamos explicar detalhadamente.

 

Abraços.