...

View Full Version : gallery issue



akuria
03-25-2012, 12:13 AM
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:


<?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:


<?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.

akuria
03-28-2012, 05:31 AM
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.


<?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:


@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;
}

akuria
03-28-2012, 05:32 AM
oh if you want to see what i am talking about live here is my site.

benedictumdesigns.com (http://benedictumdesigns.com)

akuria
03-28-2012, 05:38 AM
infact none of my text is the correct font that the css says its supposed to be.

akuria
03-28-2012, 06:19 AM
i got the fonts to work and the the nav list works but still cant figure out the images sizing.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum