Æliens

  
  <mx:Application  
   xmlns:mx="http://www.adobe.com/2006/mxml" 
   layout="absolute"
   backgroundGradientAlphas="[1.0, 1.0]"
   backgroundGradientColors="[#000000, #000000]"
   creationComplete="initSlideshow()"
   >
   
  
  

   
   <mx:Grid x="0" y="0" width="100%" height="100%" horizontalGap="0" verticalGap="0">
    <mx:GridRow width="100%" height="50">
     <mx:GridItem width="100%" height="100%" colSpan="3" verticalAlign="middle">
      <mx:Label text="Label" fontSize="17" width="100%" fontWeight="bold" color="#FFFFFF" textAlign="center" id="lblTitle"/>
     </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow width="100%" height="100%">
     <mx:GridItem width="100%" height="100%" colSpan="3">
      <mx:Grid width="100%" height="100%">
       <mx:GridRow width="100%" height="100%">
        <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
         <mx:Grid>
          <mx:GridRow width="100%" height="100%">
           <mx:GridItem width="100%" height="100%">
            <mx:Canvas borderStyle="solid" borderColor="#3F3F3F">
             <mx:Image id="imgMain" click="imgMain_click()" useHandCursor="true" buttonMode="true" completeEffect="Fade">
             </mx:Image>
            </mx:Canvas>
           </mx:GridItem>
          </mx:GridRow>
          <mx:GridRow width="100%" height="100%">
           <mx:GridItem width="100%" height="100%">
            <mx:Label text="Label" color="#FFFFFF" id="lblImageTitle" fontFamily="Georgia" fontSize="16"/>
           </mx:GridItem>
          </mx:GridRow>
         </mx:Grid>
        </mx:GridItem>
       </mx:GridRow>
      </mx:Grid>
     </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow width="100%" height="100">
     <mx:GridItem width="100%" height="100%" horizontalAlign="right" verticalAlign="middle">
      <mx:Image id="cmdScrollPrev" source="local/assets/gallery/prev.png" click="cmdScrollPrev_click()" useHandCursor="true" buttonMode="true" hideEffect="Fade" showEffect="Fade" />
      <mx:Spacer/>
     </mx:GridItem>
     <mx:GridItem width="100%" height="100%" verticalAlign="middle">
      <mx:HorizontalList 
       height="80" 
       width="800"
       columnWidth="100" 
       rowHeight="80" 
       dataProvider="{arrImages}" 
       itemRenderer="flex_gallery_item"  
       horizontalScrollPolicy="off" 
       verticalScrollPolicy="off" 
       borderStyle="none" 
       id="lstThumbnails" 
       itemClick="lstThumbnails_itemClick(event);"
       useHandCursor="true" 
       buttonMode="true"
       backgroundAlpha="0"
       themeColor="#1E1E1E"
       >
      </mx:HorizontalList>
     </mx:GridItem>
     <mx:GridItem width="100%" height="100%" verticalAlign="middle">
      <mx:Spacer/>
      <mx:Image id="cmdScrollNext" source="local/assets/gallery/next.png" click="cmdScrollNext_click()" useHandCursor="true" buttonMode="true" hideEffect="Fade" showEffect="Fade" />
     </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow width="100%" height="20">
     <mx:GridItem width="100%" height="100%" colSpan="3" verticalAlign="middle">
      <mx:Label text="Label" width="100%" color="#FFFFFF" textAlign="center" id="lblFooter"/>
     </mx:GridItem>
    </mx:GridRow>
   </mx:Grid>
  
  

      
      <mx:Script>
          <![CDATA[
  
     // Libraries used
              import mx.events.ListEvent;
  
     private function initSlideshow():void {
               if (arrImages.length > 0) {
                lblFooter.text = "© Bas van Dijk - 2008";   
                lblTitle.text = "Flex 3 gallery test";
                loadImage(0);
                lstThumbnails.selectedIndex = 0;
               }
               checkScroll();
              }
              
     // Fires when the scroll next button of the thumbnaillist is clicked
     private function cmdScrollNext_click():void {
               
               var newPos:int = lstThumbnails.horizontalScrollPosition + 1;
               if (newPos <= lstThumbnails.maxHorizontalScrollPosition) {
                lstThumbnails.horizontalScrollPosition = newPos;
               }
               
               checkScroll();
              }
              
     // Fires when the scroll previous button of the thumbnaillist is clicked
     private function cmdScrollPrev_click():void {
               
               var newPos:int = lstThumbnails.horizontalScrollPosition - 1;
               if (newPos >= 0) {
                lstThumbnails.horizontalScrollPosition = newPos;
               }
               
               checkScroll();
              }
              
     // Check the scrollposition of the list and hides the previous and next buttons if neccesary
     private function checkScroll():void {
               
      // Check if the scroll position is at the start position of the list
      // if so hide the scroll previous button
               if (lstThumbnails.horizontalScrollPosition == 0)
               {
                cmdScrollPrev.visible = false;
               } else {           
                cmdScrollPrev.visible = true;
               }
               
      // Check if the scroll position is at the max position of the list
      // if so hide the scroll next button
               if (lstThumbnails.horizontalScrollPosition == lstThumbnails.maxHorizontalScrollPosition) {
                cmdScrollNext.visible = false;
               } else {
                cmdScrollNext.visible = true; 
                
               }
              }
              
     // Fires when the user clicks on a thumbnail
       private function lstThumbnails_itemClick(evt:ListEvent):void {
                  imgMain.source = evt.itemRenderer.data.src;
                  lblImageTitle.text = evt.itemRenderer.data.lbl;
              }
              
              // Loads a specific image
              private function loadImage(imageNumber:int):void {
               imgMain.source = arrImages[imageNumber].src;
               lblImageTitle.text = arrImages[imageNumber].lbl;
              }
              
    // Fired then the user clicks on an image for the next picture
     private function imgMain_click():void {
               if (lstThumbnails.selectedIndex < arrImages.length) {
                lstThumbnails.selectedIndex += 1;
                lstThumbnails.scrollToIndex(lstThumbnails.selectedIndex);
                loadImage(lstThumbnails.selectedIndex);
                checkScroll(); 
               }
              }
  
          ]]>
      </mx:Script>
  
  

  <mx:Array id="arrImages">
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img001.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img002.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img003.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img004.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img005.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img006.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img007.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img008.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img009.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img010.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img011.jpg" />
  <mx:Object lbl="aesthetics" src="local/present/aesthetics/img012.jpg" />
  </mx:Array>
   
  </mx:Application>