Gallery problem, deleting the previous picture

Forum|Forum|16 years ago
December 29, 2009
1 reply
414 views

Hey all,

I'm trying to make this gallery on a website but i'm experiencing a few problems .

www.janhouwen.be

As you see in the gallery when you click a thumbnail the big version loads at the right side of it, but when you click another thumbnail the new picture loads on top of the old one without deleting it. I've been trying to fix this for so long but haven't got to any solution.

I'd also like to insert titles between the different kinds of pictures, so that the thumbs get sorted under their respective category.

TITEL:
[thumb][thumb][thumb][thumb]

TITEL2:
[thumb][thumb]

Is this a hard thing to do ? and is it possible to right something like this in the XML ?:

<TITEL INHOUD="TITEL1"/>



<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto1.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/Foto1Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto3.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto3Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto4.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto4Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto6.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto6Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto7.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto7Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto9.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto9Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto11.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto11Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto12.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto12Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto13.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto13Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto14.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto14Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto16.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto16Min.jpg"
DESCR="Binnen Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BinnenSchilderWerken/Foto17.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BinnenMin/foto17Min.jpg"
DESCR="Binnen Schilderwerk"/>



<TITEL INHOUD="TITEL2"/>



<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BuitenSchilderWerken/Foto1.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BuitenMin/foto1Min.jpg"
DESCR="Buiten Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BuitenSchilderWerken/Foto2.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BuitenMin/foto2Min.jpg"
DESCR="Buiten Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BuitenSchilderWerken/Foto3.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BuitenMin/foto3Min.jpg"
DESCR="Buiten Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BuitenSchilderWerken/Foto4.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BuitenMin/foto4Min.jpg"
DESCR="Buiten Schilderwerk"/>

<IMAGE
FULL="http://www.janhouwen.be/Images/Full/BuitenSchilderWerken/Foto5.jpg"
THUMB="http://www.janhouwen.be/Images/Thumbs/BuitenMin/foto5Min.jpg"
DESCR="Buiten Schilderwerk"/>

import fl.transitions.Tween;

import fl.transitions.easing.*;

import fl.transitions.TweenEvent;

import fl.controls.ProgressBar;



import flash.net.URLRequest;

import flash.net.URLLoader;

import flash.net.navigateToURL;

import flash.text.TextFormat;



var container_mc:MovieClip;

var preloaders_mc:MovieClip;

var full_mc:MovieClip;



var holder:MovieClip = new MovieClip();



var my_tweens:Array=[];

var container_mc_tween:Tween;

var full_tween:Tween;

var x_counter:Number=0;

var y_counter:Number=0;



var myXMLLoader:URLLoader = new URLLoader();



var my_x:Number;

var my_y:Number;

var my_thumb_width:Number;

var my_thumb_height:Number;

var my_images:XMLList;

var my_tekst:XMLList;

var my_total:Number;

var columns:Number;

var geladen:Boolean = false;

var hoofdHouder;



myXMLLoader.load(new URLRequest("gallery.xml"));

myXMLLoader.addEventListener(Event.COMPLETE, processXML);



function rand(minimum:Number,maximum:Number):Number {

            return Math.floor(minimum+Math.random()*maximum-minimum+1);

        }



function processXML(e:Event):void {

    var myXML:XML=new XML(e.target.data);



    columns=myXML.@COLUMNS;

    my_x=myXML.@XPOSITION;

    my_y=myXML.@YPOSITION;

    my_thumb_width=myXML.@WIDTH;

    my_thumb_height=myXML.@HEIGHT;

    my_images=myXML.IMAGE;

    my_total=my_images.length();



    createContainer();

    callThumbs();



    myXMLLoader.removeEventListener(Event.COMPLETE, processXML);

    myXMLLoader=null;

}



function createContainer():void {

    container_mc = new MovieClip();

    container_mc.x= -440;

    container_mc.y= -200;

    addChild(container_mc);



    container_mc.addEventListener(MouseEvent.CLICK, callFull);

    container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);

    container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);

    container_mc.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

    container_mc.buttonMode=true;



    preloaders_mc = new MovieClip();

    preloaders_mc.x=container_mc.x;

    preloaders_mc.y=container_mc.y;

    addChild(preloaders_mc);

}



function callThumbs():void {

    for (var i:Number = 0; i < my_total; i++) {

        

        var tekst:String = "TEXT";

        var min:String = "MIN";

        var thumb_url=my_images.@THUMB;



        var thumb_loader = new Loader();



        thumb_loader.load(new URLRequest(thumb_url));

        thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

        thumb_loader.name=i;

        thumb_loader.x=my_thumb_width*(x_counter/3);

        thumb_loader.y=my_thumb_height*(y_counter/3);



        if (x_counter+1<columns) {

            x_counter++;

        } else {

            x_counter=0;

            y_counter++;

        }

        

        //if(my_images.@FULL == tekst && my_images.@THUMB == min){

            //trace("titel");

            //var textVeld:TextField = new TextField();

            //textVeld.y = my_thumb_height*(y_counter/3);

            //textVeld.text = my_images.@DESCR;

        //}



        var preloader_pb:ProgressBar = new ProgressBar();

        preloader_pb.source=thumb_loader.contentLoaderInfo;

        preloader_pb.x=thumb_loader.x;

        preloader_pb.y=thumb_loader.y;

        preloader_pb.width=my_thumb_width;

        preloader_pb.height=my_thumb_height;

        preloaders_mc.addChild(preloader_pb);



        preloader_pb.addEventListener(Event.COMPLETE, donePb);



    }

}



function thumbLoaded(e:Event):void {

    var my_thumb:Loader=Loader(e.target.loader);

    container_mc.addChild(my_thumb);

    my_tweens[Number(my_thumb.name)]=new Tween(my_thumb,"alpha",Strong.easeIn,0,1,0.5,true);



    my_thumb.contentLoaderInfo.removeEventListener(Event.COMPLETE, thumbLoaded);

}



function callFull(e:MouseEvent):void {

    var full_loader:Loader = new Loader();

    var full_url=my_images[e.target.name].@FULL;

    full_loader.load(new URLRequest(full_url));

    full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);



    var full_pb:ProgressBar = new ProgressBar();

    full_pb.source=full_loader.contentLoaderInfo;

    full_pb.x = stage.stageWidth - 500;

    full_pb.y = stage.stageHeight - 400;

    preloaders_mc.addChild(full_pb);



    full_pb.addEventListener(Event.COMPLETE, donePb);

    

    dia.visible = false;

}



function fullLoaded(e:Event):void {

    

    full_mc = new MovieClip();

    addChild(full_mc);

    var my_loader:Loader=Loader(e.target.loader);

    full_mc.addChild(my_loader);

    full_mc.alpha = 1;

    full_tween=new Tween(my_loader,"alpha",Strong.easeIn,0,1,0.5,true);



    my_loader.x=-105;

    my_loader.y = -205;





    my_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullLoaded);

    my_loader.addEventListener(Event.COMPLETE, removeFull);



}



function removeFull(e:Event):void {

    var my_loader:Loader=Loader(e.currentTarget);

    full_tween=new Tween(my_loader,"alpha",Strong.easeOut,1,0,0.5,true);

    full_tween.addEventListener(TweenEvent.MOTION_FINISH, tweenFinished);

    trace("removed");

    geladen = false;

}



function donePb(e:Event):void {

    var my_pb:ProgressBar=ProgressBar(e.target);

    preloaders_mc.removeChild(my_pb);



    my_pb.removeEventListener(Event.COMPLETE, donePb);

}



function tweenFinished(e:TweenEvent):void {

    var my_loader:Loader=Loader(e.target.obj);

    my_loader.unload();

    removeChild(full_mc);

    full_mc=null;



    container_mc.addEventListener(MouseEvent.CLICK, callFull);

    container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);

    container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);

    container_mc.addEventListener(MouseEvent.MOUSE_OVER, mouseMoveHandler);

    container_mc.buttonMode=true;



    var my_tween:Tween=Tween(e.target);

    my_tween.removeEventListener(TweenEvent.MOTION_FINISH, tweenFinished);

}



function onOver(e:MouseEvent):void {

    var my_thumb:Loader=Loader(e.target);

    my_thumb.alpha=0.5;



    var tooltip:Tooltip = new Tooltip();

    holder=tooltip;

    holder.descr.text=my_images[e.target.name].@DESCR;

    holder.x= stage.mouseX -500;

    holder.y= stage.mouseY -300;

    addChild(tooltip);

}

function onOut(e:MouseEvent):void {

    var my_thumb:Loader=Loader(e.target);

    my_thumb.alpha=1;



    removeChild(holder);

}

function mouseMoveHandler(e:MouseEvent):void {

    holder.x= stage.mouseX -500;

    holder.y= stage.mouseY -300;

}

Grts!, Samuel

ActionScript

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded