[Resolvido] Adicionar link em img do Array com holder dinâmico

[Elektra 102]

Estou adaptando este code para minha necessidade e preciso adicionar evento de CLICK nos thumbs (abrir um Lightbox).

 

Agradeço muito quem puder auxiliar.

 

var imageURLs = new Array();
var imageHolders = new Array();
var loadedImages:Number = 0;

imageURLs.push("images/img1.jpg");
imageURLs.push("images/img2.jpg");
...

for (var i = 0; i < rows; i++) {

for (var j = 0; j < columns; j++) {
 var imageHolder:MovieClip = new MovieClip();
...
addChild(imageHolder);
 ...
imageHolders.push(imageHolder);
}
}

loadImage();

function loadImage():void {
	var loader:Loader = new Loader();
	var urlRequest:URLRequest = new URLRequest(imageURLs[0]);
	loader.load(urlRequest);

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded); 
imageURLs.splice(0,1);
}

function imageLoaded(e:Event):void {
	var image:Bitmap = (Bitmap)(e.target.content);
	var holder:MovieClip = imageHolders[loadedImages];

holder.addChild(image);
loadedImages++;

if (imageURLs.length > 0) {
loadImage();
}
}

 

 

Abraços

[brunobispo 20]

Como você não está adicionando as imagens em um container específico, você não poderá se aproveitar das "bolhas". Precisaria, então, definir um ouvinte para cada imagem.

 

//...
for (var i = 0; i < rows; i++) {

       for (var j = 0; j < columns; j++) {
 var imageHolder:MovieClip = new MovieClip();
// ...
addChild(imageHolder);
imageHolder.addEventListener(MouseEvent.CLICK, imageHolderClickHandler, false, 0, true); // usei esses outros parâmetros para chegar ao último, que define a referência como fraca
// ...
imageHolders.push(imageHolder);
       }
}
...
function imageHolderClickHandler(e:Event):void { /* ... */ }

[Elektra 102]

Obrigada Bruno. Ficou perfeito. :grin:

 

Adicionei o 'buttonMode' aos thumbs e usei 'trace' na função.

 

 

Agora vou pesquisar um code de exemplo para identificar o índice do thumb clicado e carregar a imagem ampliada

(por enquanto, em um movie clip).

 

Alguma orientação é bem vinda.

 

 

Abraços

[brunobispo 20]

Obrigada Bruno. Ficou perfeito. :grin:

 

Adicionei o 'buttonMode' aos thumbs e usei 'trace' na função.

 

 

Agora vou pesquisar um code de exemplo para identificar o índice do thumb clicado e carregar a imagem ampliada

(por enquanto, em um movie clip).

 

Alguma orientação é bem vinda.

 

 

Abraços

 

Você pode criar uma classe que extende MovieClip, adicionando uma propriedade para armazenar o índice; Pode usar um objecto Dictionary para gravar os índices; Pode pesquisar o índice com o método indexOf() do Array que armazena seus objetos.

[Elektra 102]

Bruno, meu code está na timeline

 

Baixei um template para aprender, o carregamento dos thumbs é sequencial, tem preloader individual (removido após completar), e a exibição recebe uma alpha com a TweenLite. Um luxo, adorei.

 

Penso em usar para uma galeria. Não importa que o code fique' meio cabeludo' (mais extenso). Precisa ser algo simples, que eu possa compreender.

 

 

Abraços ;)

[brunobispo 20]

Bruno, meu code está na timeline

 

Baixei um template para aprender, o carregamento dos thumbs é sequencial, tem preloader individual (removido após completar), e a exibição recebe uma alpha com a TweenLite. Um luxo, adorei.

 

Penso em usar para uma galeria. Não importa que o code fique' meio cabeludo' (mais extenso). Precisa ser algo simples, que eu possa compreender.

 

 

Abraços ;)

 

Exemplificando as duas outras sugestões então.

 

Com um Dictionary:

var indexThumbs:Dictionary = new Dictionary(false);
for (var i:uint = 0; i < rows; i++) {
// ...
var imageHolder:MovieClip = new MovieClip();
indexThumbs[imageHolder] = i;
imageHolder.addEventListener(MouseEvent.CLICK, imageHolderClickHandler, false, 0, true);
}

function imageHolderClickHandler(e:Event):void
{
trace(indexThumbs[e.currentTarget]);
}

 

Pesquisando com indexOf():

for (var i:uint = 0; i < rows; i++) {
// ...
var imageHolder:MovieClip = new MovieClip();
imageHolders.push(imageHolder);
imageHolder.addEventListener(MouseEvent.CLICK, imageHolderClickHandler, false, 0, true);
}

function imageHolderClickHandler(e:Event):void
{
trace(imageHolders.indexOf(e.currentTarget));
}

 

Vê se fica mais fácil.

[Elektra 102]

Valeu mesmo Bruno, com IndexOf fica mais acessível pra mim.

 

Dictionary eu só vi em code de particles, nunca usei.

 

 

 

Penso que o caminho agora seja concatenar o índice + 1 com uma String para o carregamento da imagem correspondente.

 

Tenho um exemplo que vai ajudar, preciso adaptar para este code.

 

 

 

Dou retorno do resultado.

 

 

 

Muito obrigada :grin:

[brunobispo 20]

Você pode criar um outro Array para armazenar as URLs. Quando você pesquisar o índice no Array imageHolders, você o utiliza para localizar a URL.

var imageHolders:Array = [image1, image2, image3]; 
var imageUrls:Array = ["image1.jpg", "image-abc.jpg", "image-xyz.gif"];
trace(imageUrls[imageHolders.indexOf(image2)]) // imprime: image-abc.jpg

[Elektra 102]

Bom demais, isso ajuda muito.

 

Mais uma que fico lhe devendo (vai anotando).

 

 

vamo que vamo ^_^

 

 

 

ps: o Lightbox para um botão comum no Flash eu tenho.

[Elektra 102]

Funfando que é uma beleza! Adorei :grin:

 

 

var URLfullscale: Array = new Array("fullscale/g1.jpg", "fullscale/g2.jpg",/* ... */);
var link:URLRequest = new URLRequest("fullscale/g1.jpg");

// ...

var pagina:Loader = new Loader();
pagina.load(link);

function imageHolderClickHandler(e:Event):void { 

pagina.load(new URLRequest(URLfullscale[imageHolders.indexOf(e.currentTarget)]));
container.addChild(pagina);
}


pagina.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, carregando);
pagina.contentLoaderInfo.addEventListener(Event.COMPLETE, completo);
// ...

 

 

Agora, só falta desabilitar o click. Tenho code de exemplo, vou ralar pra ver se acerto.

 

Informo o resultado.

 

 

Muito obrigada Bruno. Sua ajuda é sempre valiosa.

[Elektra 102]

Consegui desabilitar o click. :grin: (ganhei meu dia hoje)

 

var atual:String = "fullscale/g1.jpg";
//...

for (var i = 0; i < rows; i++) {
//...
imageHolder.arquivo = URLfullscale[imageHolders.indexOf];
}

function imageHolderClickHandler(e:Event):void { 
if(atual != URLfullscale[imageHolders.indexOf(e.currentTarget)])
{ 

pagina.unloadAndStop(); 

pagina.load(new URLRequest(URLfullscale[imageHolders.indexOf(e.currentTarget)]));
container.addChild(pagina);

atual = URLfullscale[imageHolders.indexOf(e.currentTarget)];

} 

}

 

 

O próximo passo agora é descobrir como manter a imagem anterior enquanto o preloader carrega a nova, e só remover após a Tween de exibição, para criar uma transição.

 

Eu chego lá. Sugestões são bem vindas.

 

 

 

Abraços