Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: gallery issue

  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    gallery issue

    i am trying to get my gallery working using xml and it doesnt seem to work. i cant figure it out to save my life. any help would be awesome.

    here is my flex code:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:s="library://ns.adobe.com/flex/spark"
    		 xmlns:fx="http://ns.adobe.com/mxml/2009"
    		 xmlns:ATE="http://ns.adobe.com/ate/2009"
    		 xmlns:ai="http://ns.adobe.com/ai/2009"
    		 xmlns:d="http://ns.adobe.com/fxg/2008/dt"
    		 xmlns:flm="http://ns.adobe.com/flame/2008"
    		 xmlns:lib="assets.graphics.slider.*"
    		 xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
    		 xmlns:mx="library://ns.adobe.com/flex/mx"
    		 xmlns:components="components.*"
    		 width="947" height="511"
    		 initialize="onInit()">
    	
    	<fx:Script>
    		<![CDATA[
    			import mx.collections.ArrayCollection;
    			
    			import spark.effects.Fade;
    			import spark.events.IndexChangeEvent;
    			import spark.events.RendererExistenceEvent;
    			
    			import valueObjects.ImageVO;
    			import valueObjects.SectionVO;
    			
    			[Bindable]
    			public var selectedSection:SectionVO;
    			public var selectedIndex:Number;
    			public var autoTimer:Timer;
    			public var idleTimer:Timer;
    			
    			public var sectionData:Array=new Array();
    			public var xmlLoader:URLLoader=new URLLoader();
    			
    			public function onInit():void
    			{
    				xmlLoader.addEventListener(Event.COMPLETE, handleLoadComplete);
    				xmlLoader.load(new URLRequest("assets/imageData.xml"));
    				
    				autoTimer=new Timer(4000);
    				autoTimer.addEventListener(TimerEvent.TIMER, handleAutoTimerEvent);
    				
    				idleTimer=new Timer(60000);
    				idleTimer.addEventListener(TimerEvent.TIMER, handleIdleTimerEvent);
    			}
    			
    			public function handleAutoTimerEvent(event:TimerEvent):void
    			{
    				setSelectedIndex(selectedIndex + 1);
    			}
    			
    			public function handleIdleTimerEvent(event:TimerEvent):void
    			{
    				idleTimer.stop();
    				idleTimer.reset();
    				autoTimer.start();
    			}
    			
    			public function stopTimer():void
    			{
    				autoTimer.stop();
    				autoTimer.reset();
    			}
    			
    			public function handleLoadComplete(e:Event):void
    			{
    				var image:ImageVO;
    				var section:SectionVO;
    				var xmlData:XML=new XML(e.target.data);
    				
    				for each (var sectionList:XML in xmlData..section)
    				{
    					section=new SectionVO();
    					section.name=sectionList.@name;
    					
    					for each (var item:Object in sectionList.item)
    					{
    						image=new ImageVO();
    						image.thumb=item.thumb;
    						image.image=item.image;
    						section.items.addItem(image);
    					}
    					
    					sectionData.push(section);
    				}
    				
    				navList.dataProvider=new ArrayCollection(sectionData);
    				navList.selectedIndex=0;
    				selectedSection=sectionData[0];
    				setSelectedIndex(0);
    				autoTimer.start();
    			}
    			
    			public function indexChangeHandler(event:IndexChangeEvent):void
    			{
    				idleTimer.reset();
    				idleTimer.start();
    				selectedSection=sectionData[event.newIndex];
    				setSelectedIndex(0);
    			}
    			
    			public function handleThumbAdd(event:RendererExistenceEvent):void
    			{
    				event.renderer.addEventListener(MouseEvent.CLICK, handleThumbClick);
    			}
    			
    			public function handleThumbClick(event:Event):void
    			{
    				stopTimer();
    				idleTimer.reset();
    				idleTimer.start();
    				var image:ImageVO=event.currentTarget.data as ImageVO;
    				setSelectedIndex(selectedSection.items.getItemIndex(image));
    			}
    			
    			public function setSelectedIndex(value:Number):void
    			{
    				if (value >= selectedSection.items.length)
    				{
    					value=0;
    				}
    				
    				var selectedImage:ImageVO=selectedSection.items.getItemAt(value) as ImageVO;
    				
    				if (selectedIndex != value)
    				{
    					var pic1:Image=images.removeElementAt(0) as Image;
    					var pic2:Image=images.getElementAt(0) as Image;
    					
    					pic1.source=selectedImage.image;
    					pic1.alpha=0;
    					images.addElement(pic1);
    					
    					var fade:Fade=new Fade(pic1);
    					fade.alphaTo=1;
    					fade.duration=1500;
    					fade.play();
    					selectedIndex=value;
    					
    					var fade1:Fade=new Fade(pic2);
    					fade1.alphaTo=0;
    					fade1.duration=1000;
    					fade1.play();
    				}
    			}
    		]]>
    	</fx:Script>
    	
    	<s:List id="navList" 
    			y="0" 
    			width="135" height="511" 
    			allowMultipleSelection="false" 
    			alpha="0"
    			change="indexChangeHandler(event)" 
    			horizontalCenter="-406"
    			itemRenderer="components.GalleryButtonRenderer"/>
    	
    	
    	<s:Group id="images" x="250" y="2" width="694" height="507">
    		<mx:Image/>
    		<mx:Image/>
    	</s:Group>
    	
    	
    	<s:DataGroup id="thumbList" y="2" 
    				 width="100" height="507" buttonMode="true"
    				 clipAndEnableScrolling="true"
    				 dataProvider="{selectedSection.items}"
    				 horizontalCenter="-288" 
    				 itemRenderer="components.ThumbRenderer"
    				 rendererAdd="handleThumbAdd(event)">
    		<s:layout>
    			<s:VerticalLayout horizontalAlign="center"/>
    		</s:layout>
    	</s:DataGroup>
    	<s:VScrollBar y="0" fixedThumbSize="true" horizontalCenter="-231"
    				  skinClass="components.VerticalScrollbarSkin2" viewport="{thumbList}"/>
    </s:Group>
    and here is my xml code:

    PHP Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <gallery>
        <section name="Logo Design">
            <item>
                <thumb>assets/designGallery/Logos/asantae health.jpg</thumb>
                <image>assets/designGallery/Logos/asantae health.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Logos/clan logo.jpg</thumb>
                <image>assets/designGallery/Logos/clan logo.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Logos/Coyote Clothing Logo.jpg</thumb>
                <image>assets/designGallery/Logos/Coyote Clothing Logo.jpg</image>
            </item>
                    <item>
                <thumb>assets/designGallery/Logos/dd mobile detailing.jpg</thumb>
                <image>assets/designGallery/Logos/dd mobile detailing.jpg</image>
            </item>
                    <item>
                <thumb>assets/designGallery/Logos/drunkensalsa.jpg</thumb>
                <image>assets/designGallery/Logos/drunkensalsa.jpg</image>
            </item>
    <!--        <item>-->
    <!--            <thumb>assets/images/thumbsenior6.jpg</thumb>-->
    <!--            <image>assets/images/senior6.jpg</image>-->
    <!--        </item>-->
                    <item>
                <thumb>assets/designGallery/Logos/Happy Companion.jpg</thumb>
                <image>assets/designGallery/Logos/Happy Companion.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Logos/King Security Logo.jpg</thumb>
                <image>assets/designGallery/Logos/King Security Logo.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Logos/pace35th_final.jpg</thumb>
                <image>assets/designGallery/Logos/pace35th_final.jpg</image>
            </item>
                    <item>
                <thumb>assets/designGallery/Logos/Rouge Adventures Logo.jpg</thumb>
                <image>assets/designGallery/Logos/Rouge Adventures Logo.jpg</image>
            </item>
                    <item>
                <thumb>assets/designGallery/Logos/Zapporah Ross.jpg</thumb>
                <image>assets/designGallery/Logos/Zapporah Ross.jpg</image>
            </item>
        </section>
        <section name="Illustrations and Sketches">
            <item>
                <thumb>assets/designGallery/sketches/angelwarrior.jpg</thumb>
                <image>assets/designGallery/sketches/angelwarrior.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/girly.jpg</thumb>
                <image>assets/designGallery/sketches/girly.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/girly2.jpg</thumb>
                <image>assets/designGallery/sketches/girly2.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/munch munch birdy.jpg</thumb>
                <image>assets/designGallery/sketches/munch munch birdy.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/ninjaVSpirate2.jpg</thumb>
                <image>assets/designGallery/sketches/ninjaVSpirate2.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/plasticalley girl.jpg</thumb>
                <image>assets/designGallery/sketches/plasticalley girl.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/rouge.jpg</thumb>
                <image>assets/designGallery/sketches/rouge.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/rough05.jpg</thumb>
                <image>assets/designGallery/sketches/rough05.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/sketch01.jpg</thumb>
                <image>assets/designGallery/sketches/sketch01.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/sketch02.jpg</thumb>
                <image>assets/designGallery/sketches/sketch02.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/sketch03.jpg</thumb>
                <image>assets/designGallery/sketches/sketch03.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/sketch04-01.jpg</thumb>
                <image>assets/designGallery/sketches/sketch04-01.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/stretched out girl.jpg</thumb>
                <image>assets/designGallery/sketches/stretched out girl.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/sketches/suited dude blue.jpg</thumb>
                <image>assets/designGallery/sketches/suited dude blue.jpg</image>
            </item>
        </section>
        <section name="Marketing and Print">
            <item>
                <thumb>assets/designGallery/Marketing/Alignegy Booth.jpg</thumb>
                <image>assets/designGallery/Marketing/Alignegy Booth.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/article-front-final.jpg</thumb>
                <image>assets/designGallery/Marketing/article-front-final.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/weddingsinbloom.jpg</thumb>
                <image>assets/designGallery/Marketing/weddingsinbloom.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/safari.jpg</thumb>
                <image>assets/designGallery/Marketing/safari.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/poster.jpg</thumb>
                <image>assets/designGallery/Marketing/poster.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/flyer 8x5-01.jpg</thumb>
                <image>assets/designGallery/Marketing/flyer 8x5-01.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/first friday-01.jpg</thumb>
                <image>assets/designGallery/Marketing/first friday-01.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/drunkensalsaad.jpg</thumb>
                <image>assets/designGallery/Marketing/drunkensalsaad.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/banner ad_3.jpg</thumb>
                <image>assets/designGallery/Marketing/banner ad_3.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/banner ad_2.jpg</thumb>
                <image>assets/designGallery/Marketing/banner ad_2.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/banner ad_1.jpg</thumb>
                <image>assets/designGallery/Marketing/banner ad_1.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Marketing/.jpg</thumb>
                <image>assets/designGallery/Marketing/.jpg</image>
            </item>
        </section>
        <section name="Website Design">
            <item>
                <thumb>assets/designGallery/Website/animalStars.jpg</thumb>
                <image>assets/designGallery/Website/animalStars.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Website/protegeArtists.jpg</thumb>
                <image>assets/designGallery/Website/protegeArtists.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Website/protegeExperience.jpg</thumb>
                <image>assets/designGallery/Website/protegeExperience.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Website/protegeProm.jpg</thumb>
                <image>assets/designGallery/Website/protegeProm.jpg</image>
            </item>
            <item>
                <thumb>assets/designGallery/Website/protegeTV.jpg</thumb>
                <image>assets/designGallery/Website/protegeTV.jpg</image>
            </item>
        </section>
    </gallery>
    the nav list does not show up so i can go to my other galleries and the images need to auto size to fit the window.

  • #2
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i got the images to load and thumbnails to work but now i can't get the images to autosize to fill the working area and to also be centered instead of top left justified.

    another issue is the nav list doesnt seem to be loading the css style sheet and there is a white box around the nav list and its not supposed to be there and i cant figure out how to get it to go away.

    here is the new code.

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:s="library://ns.adobe.com/flex/spark"
    		 xmlns:fx="http://ns.adobe.com/mxml/2009"
    		 xmlns:ATE="http://ns.adobe.com/ate/2009"
    		 xmlns:ai="http://ns.adobe.com/ai/2009"
    		 xmlns:d="http://ns.adobe.com/fxg/2008/dt"
    		 xmlns:flm="http://ns.adobe.com/flame/2008"
    		 xmlns:lib="assets.graphics.slider.*"
    		 xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
    		 xmlns:mx="library://ns.adobe.com/flex/mx"
    		 xmlns:components="components.*"
    		 width="970" height="511"
    		 initialize="onInit()">
    	
    	<fx:Script>
    		<![CDATA[
    			import mx.collections.ArrayCollection;
    			
    			import spark.effects.Fade;
    			import spark.events.IndexChangeEvent;
    			import spark.events.RendererExistenceEvent;
    			
    			import valueObjects.ImageVO;
    			import valueObjects.SectionVO;
    			
    			[Bindable]
    			public var selectedSection:SectionVO;
    			public var selectedIndex:Number;
    			public var autoTimer:Timer;
    			public var idleTimer:Timer;
    			
    			public var sectionData:Array=new Array();
    			public var xmlLoader:URLLoader=new URLLoader();
    			
    			public function onInit():void
    			{
    				xmlLoader.addEventListener(Event.COMPLETE, handleLoadComplete);
    				xmlLoader.load(new URLRequest("assets/imageData.xml"));
    				
    				autoTimer=new Timer(4000);
    				autoTimer.addEventListener(TimerEvent.TIMER, handleAutoTimerEvent);
    				
    				idleTimer=new Timer(60000);
    				idleTimer.addEventListener(TimerEvent.TIMER, handleIdleTimerEvent);
    			}
    			
    			public function handleAutoTimerEvent(event:TimerEvent):void
    			{
    				setSelectedIndex(selectedIndex + 1);
    			}
    			
    			public function handleIdleTimerEvent(event:TimerEvent):void
    			{
    				idleTimer.stop();
    				idleTimer.reset();
    				autoTimer.start();
    			}
    			
    			public function stopTimer():void
    			{
    				autoTimer.stop();
    				autoTimer.reset();
    			}
    			
    			public function handleLoadComplete(e:Event):void
    			{
    				var image:ImageVO;
    				var section:SectionVO;
    				var xmlData:XML=new XML(e.target.data);
    				
    				for each (var sectionList:XML in xmlData..section)
    				{
    					section=new SectionVO();
    					section.name=sectionList.@name;
    					
    					for each (var item:Object in sectionList.item)
    					{
    						image=new ImageVO();
    						image.thumb=item.thumb;
    						image.image=item.image;
    						section.items.addItem(image);
    					}
    					
    					sectionData.push(section);
    				}
    				
    				navList.dataProvider=new ArrayCollection(sectionData);
    				navList.selectedIndex=0;
    				selectedSection=sectionData[0];
    				setSelectedIndex(0);
    				autoTimer.start();
    			}
    			
    			public function indexChangeHandler(event:IndexChangeEvent):void
    			{
    				idleTimer.reset();
    				idleTimer.start();
    				selectedSection=sectionData[event.newIndex];
    				setSelectedIndex(0);
    			}
    			
    			public function handleThumbAdd(event:RendererExistenceEvent):void
    			{
    				event.renderer.addEventListener(MouseEvent.CLICK, handleThumbClick);
    			}
    			
    			public function handleThumbClick(event:Event):void
    			{
    				stopTimer();
    				idleTimer.reset();
    				idleTimer.start();
    				var image:ImageVO=event.currentTarget.data as ImageVO;
    				setSelectedIndex(selectedSection.items.getItemIndex(image));
    			}
    			
    			public function setSelectedIndex(value:Number):void
    			{
    				if (value >= selectedSection.items.length)
    				{
    					value=0;
    				}
    				
    				var selectedImage:ImageVO=selectedSection.items.getItemAt(value) as ImageVO;
    				
    				if (selectedIndex != value)
    				{
    					var pic1:Image=images.removeElementAt(0) as Image;
    					var pic2:Image=images.getElementAt(0) as Image;
    					
    					pic1.source=selectedImage.image;
    					pic1.alpha=0;
    					images.addElement(pic1);
    					
    					var fade:Fade=new Fade(pic1);
    					fade.alphaTo=1;
    					fade.duration=1500;
    					fade.play();
    					selectedIndex=value;
    					
    					var fade1:Fade=new Fade(pic2);
    					fade1.alphaTo=0;
    					fade1.duration=1000;
    					fade1.play();
    				}
    			}
    		]]>
    	</fx:Script>
    	
    	<s:List id="navList" 
    			y="0" 
    			width="155" height="511" 
    			allowMultipleSelection="false"
    			change="indexChangeHandler(event)" 
    			horizontalCenter="-406"
    			itemRenderer="components.GalleryButtonRenderer"/>
    	
    	
    	<s:Group id="images" x="273" y="2"
    			 width="694" height="507"
    			 maxWidth="694" maxHeight="507">
    		<mx:Image maxWidth="694" maxHeight="507"/>
    		<mx:Image maxWidth="694" maxHeight="507"/>
    	</s:Group>
    	
    	
    	<s:DataGroup id="thumbList" y="2" 
    				 width="100" height="507" buttonMode="true"
    				 clipAndEnableScrolling="true"
    				 dataProvider="{selectedSection.items}"
    				 horizontalCenter="-276" 
    				 itemRenderer="components.ThumbRenderer"
    				 rendererAdd="handleThumbAdd(event)">
    		<s:layout>
    			<s:VerticalLayout horizontalAlign="center"/>
    		</s:layout>
    	</s:DataGroup>
    	<s:VScrollBar y="0" fixedThumbSize="true" horizontalCenter="-219"
    				  skinClass="components.VerticalScrollbarSkin2" viewport="{thumbList}"/>
    </s:Group>
    also here is my css code:

    Code:
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace components "components.*";
    @font-face
    {
    	fontFamily: "Beast Machines";
    	src: url("/assets/Fonts/Beast Machines.TTF");
    	embedAsCFF: true;
    }
    @font-face
    {
    	fontFamily: "Century Gothic";
    	src: url("/assets/Fonts/GOTHIC.TTF");
    	embedAsCFF: true;
    }
    
    
    components|Gallery s|List
    {
    	skinClass: ClassReference("components.VerticalList");
    }
    
    components|Gallery components|GalleryButtonRenderer
    {
    	color:#333333;
    	fontFamily:"Century Gothic";
    	fontSize: 18; 
    }
    components|Gallery components|GalleryButtonRenderer:hovered
    {
    	color:#009cff;
    }
    components|Gallery components|GalleryButtonRenderer:selected
    {
    	color:#000000;
    }

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    oh if you want to see what i am talking about live here is my site.

    benedictumdesigns.com

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    infact none of my text is the correct font that the css says its supposed to be.

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i got the fonts to work and the the nav list works but still cant figure out the images sizing.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •