SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member DMAX's Avatar
    Join Date
    May 2003
    Location
    Australia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    newbie help - XML image gallery

    Hi there!
    This is my first post on Sitepoint, so here goes...

    I have a swf movie that will have seven different movie clips (image galleries). Each movie clip gallery will contain five separate images(jpegs) that will be loaded dynamically, each image will have its own caption.

    I was thinking a good way to do this would be to use xml, as it has to be easy to update.

    I am using FlashMX and have never used xml before and have no idea how to display the contents of the xml file. If someone could help me out here it would be most appreciated...

    So far my actionscript is:

    Code:
    gallery_xml = new XML(); 
    gallery_xml.load("gallery.xml"); 
    gallery_xml .onLoad = displayXML;
    gallery_xml.ignoreWhite = true; 
    loadText = "Loading XML data...";
    // Need a function to display the xml
    function displayXML(success) {
     if (success == true) {
     
     // stuff to go in here
     }
     gotoAndPlay(2);
     }
     else {
      loadText = "Error Loading XML";
     } 
    }
    My xml file is (Not sure if this is correct):

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?> 
      <gallery> 
    	  <galleryOne> 
    		<gallery1Node jpegURL="images/gallery1/image1.jpg">Caption 1</gallery1Node>
    		<gallery1Node jpegURL="images/gallery1/image2.jpg">Caption 2</gallery1Node>
    		<gallery1Node jpegURL="images/gallery1/image3.jpg">Caption 3</gallery1Node>
    		<gallery1Node jpegURL="images/gallery1/image4.jpg">Caption 4</gallery1Node>
    		<gallery1Node jpegURL="images/gallery1/image5.jpg">Caption 5</gallery1Node> 
    	  </galleryOne>
    	  <galleryTwo> 
    		<gallery2Node jpegURL="images/gallery2/image1.jpg">Caption 1</gallery2Node>
    		<gallery2Node jpegURL="images/gallery2/image2.jpg">Caption 2</gallery2Node>
    		<gallery2Node jpegURL="images/gallery2/image3.jpg">Caption 3</gallery2Node>
    		<gallery2Node jpegURL="images/gallery2/image4.jpg">Caption 4</gallery2Node>
    		<gallery2Node jpegURL="images/gallery2/image5.jpg">Caption 5</gallery2Node> 
    	  </galleryTwo>
    	  <galleryThree> 
    		<gallery3Node jpegURL="images/gallery3/image1.jpg">Caption 1</gallery3Node>
    		<gallery3Node jpegURL="images/gallery3/image2.jpg">Caption 2</gallery3Node>
    		<gallery3Node jpegURL="images/gallery3/image3.jpg">Caption 3</gallery3Node>
    		<gallery3Node jpegURL="images/gallery3/image4.jpg">Caption 4</gallery3Node>
    		<gallery3Node jpegURL="images/gallery3/image5.jpg">Caption 5</gallery3Node> 
    	  </galleryThree>
    	  <galleryFour> 
    		<gallery4Node jpegURL="images/gallery4/image1.jpg">Caption 1</gallery4Node>
    		<gallery4Node jpegURL="images/gallery4/image2.jpg">Caption 2</gallery4Node>
    		<gallery4Node jpegURL="images/gallery4/image3.jpg">Caption 3</gallery4Node>
    		<gallery4Node jpegURL="images/gallery4/image4.jpg">Caption 4</gallery4Node>
    		<gallery4Node jpegURL="images/gallery4/image5.jpg">Caption 5</gallery4Node> 
    	  </galleryFour>
    	  <galleryFive> 
    		<gallery5Node jpegURL="images/gallery5/image1.jpg">Caption 1</gallery5Node>
    		<gallery5Node jpegURL="images/gallery5/image2.jpg">Caption 2</gallery5Node>
    		<gallery5Node jpegURL="images/gallery5/image3.jpg">Caption 3</gallery5Node>
    		<gallery5Node jpegURL="images/gallery5/image4.jpg">Caption 4</gallery5Node>
    		<gallery5Node jpegURL="images/gallery5/image5.jpg">Caption 5</gallery5Node> 
    	  </galleryFive>
    	  <gallerySix> 
    		<gallery6Node jpegURL="images/gallery6/image1.jpg">Caption 1</gallery6Node>
    		<gallery6Node jpegURL="images/gallery6/image2.jpg">Caption 2</gallery6Node>
    		<gallery6Node jpegURL="images/gallery6/image3.jpg">Caption 3</gallery6Node>
    		<gallery6Node jpegURL="images/gallery6/image4.jpg">Caption 4</gallery6Node>
    		<gallery6Node jpegURL="images/gallery6/image5.jpg">Caption 5</gallery6Node> 
    	  </gallerySix>
    	  <gallerySeven> 
    		<gallery7Node jpegURL="images/gallery7/image1.jpg">Caption 1</gallery7Node>
    		<gallery7Node jpegURL="images/gallery7/image2.jpg">Caption 2</gallery7Node>
    		<gallery7Node jpegURL="images/gallery7/image3.jpg">Caption 3</gallery7Node>
    		<gallery7Node jpegURL="images/gallery7/image4.jpg">Caption 4</gallery7Node>
    		<gallery7Node jpegURL="images/gallery7/image5.jpg">Caption 5</gallery7Node> 
    	  </gallerySeven>
      </gallery>
    Cheers,
    DMAX

  2. #2
    Dumb PHP codin' cat
    Join Date
    Aug 2000
    Location
    San Diego, CA
    Posts
    5,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just finished helping someone else do this on another board. Have a look
    http://www.actionscript.org/forums/s...010#post133010

    I opted out of XML, because of parser considerations, and feel a delimited text file would probably be easier, Although switching to XML to load the images would be a snap.

    Here is an example of getting the XML parsed and ready to use in the code I posted above. Also I would reformat the XML file to be a bit more abstract.

    Here is the parser to load the XML file into an array called galleries
    PHP Code:
    //And images array
    var galleries = [];

    gXML = new XML();
    gXML.ignoreWhite true;
    gXML.load("gallery.xml" );
    gXML.onLoad = function(s) {
    tGallery this.firstChild.childNodes;
    for(var 
    i=0;i<tGallery.length;i++) {
    var 
    tmpObj = {};
    tmpObj.title tGallery[i].attributes.title;
    tmpObj.imgPath tGallery[i].attributes.imgPath;
    tGalleryItems tGallery[i].childNodes;
    var 
    tmpGArr = [];
    for(var 
    j=0;j<tGalleryItems.length;j++) {
    var 
    tmpGObj = {};
    tmpGObj.jpegURL tGalleryItems[j].attributes.jpegURL;
    tmpGObj.caption tGalleryItems[j].firstChild.nodeValue;
    tmpGArr.push(tmpGObj);
    }
    tmpObj.galleryItems tmpGArr;
    galleries.push(tmpObj);
    }

    Where the XML file looks like
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?> 
    <galleries> 
    <gallery title="Gallery 1" imgPath="images/gallery1/"> 
    <galleryNode jpegURL="image1.jpg">Caption 1</galleryNode>
    <galleryNode jpegURL="image2.jpg">Caption 2</galleryNode>
    <galleryNode jpegURL="image3.jpg">Caption 3</galleryNode>
    <galleryNode jpegURL="image4.jpg">Caption 4</galleryNode>
    <galleryNode jpegURL="image5.jpg">Caption 5</galleryNode> 
    </gallery>
    <gallery title="Gallery 2" imgPath="images/gallery2/"> 
    <galleryNode jpegURL="image1.jpg">Caption 1</galleryNode>
    <galleryNode jpegURL="image2.jpg">Caption 2</galleryNode>
    <galleryNode jpegURL="image3.jpg">Caption 3</galleryNode>
    <galleryNode jpegURL="image4.jpg">Caption 4</galleryNode>
    <galleryNode jpegURL="image5.jpg">Caption 5</galleryNode> 
    </gallery>
    <gallery title="Gallery 3" imgPath="images/gallery3/"> 
    <galleryNode jpegURL="image1.jpg">Caption 1</galleryNode>
    <galleryNode jpegURL="image2.jpg">Caption 2</galleryNode>
    <galleryNode jpegURL="image3.jpg">Caption 3</galleryNode>
    <galleryNode jpegURL="image4.jpg">Caption 4</galleryNode>
    <galleryNode jpegURL="image5.jpg">Caption 5</galleryNode> 
    </gallery>
    <gallery title="Gallery 4" imgPath="images/gallery4/"> 
    <galleryNode jpegURL="image1.jpg">Caption 1</galleryNode>
    <galleryNode jpegURL="image2.jpg">Caption 2</galleryNode>
    <galleryNode jpegURL="image3.jpg">Caption 3</galleryNode>
    <galleryNode jpegURL="image4.jpg">Caption 4</galleryNode>
    <galleryNode jpegURL="image5.jpg">Caption 5</galleryNode> 
    </gallery>
    <gallery title="Gallery 5" imgPath="images/gallery5/"> 
    <galleryNode jpegURL="image1.jpg">Caption 1</galleryNode>
    <galleryNode jpegURL="image2.jpg">Caption 2</galleryNode>
    <galleryNode jpegURL="image3.jpg">Caption 3</galleryNode>
    <galleryNode jpegURL="image4.jpg">Caption 4</galleryNode>
    <galleryNode jpegURL="image5.jpg">Caption 5</galleryNode> 
    </gallery>
    <gallery title="Gallery 6" imgPath="images/gallery6/"> 
    <galleryNode jpegURL="image1.jpg">Caption 1</galleryNode>
    <galleryNode jpegURL="image2.jpg">Caption 2</galleryNode>
    <galleryNode jpegURL="image3.jpg">Caption 3</galleryNode>
    <galleryNode jpegURL="image4.jpg">Caption 4</galleryNode>
    <galleryNode jpegURL="image5.jpg">Caption 5</galleryNode> 
    </gallery>
    <gallery title="Gallery 7" imgPath="images/gallery7/"> 
    <galleryNode jpegURL="image1.jpg">Caption 1</galleryNode>
    <galleryNode jpegURL="image2.jpg">Caption 2</galleryNode>
    <galleryNode jpegURL="image3.jpg">Caption 3</galleryNode>
    <galleryNode jpegURL="image4.jpg">Caption 4</galleryNode>
    <galleryNode jpegURL="image5.jpg">Caption 5</galleryNode> 
    </gallery>
    </galleries>
    And you would end up with a array of objects looking like
    Code:
    Variable _level0.galleries = [object #3, class 'Array'] [
    0:[object #4, class 'Object'] {
    title:"Gallery 1",
    imgPath:"images/gallery1/",
    galleryItems:[object #5, class 'Array'] [
    0:[object #6, class 'Object'] {
    jpegURL:"image1.jpg",
    caption:"Caption 1"
    },
    1:[object #7, class 'Object'] {
    jpegURL:"image2.jpg",
    caption:"Caption 2"
    },
    2:[object #8, class 'Object'] {
    jpegURL:"image3.jpg",
    caption:"Caption 3"
    },
    3:[object #9, class 'Object'] {
    jpegURL:"image4.jpg",
    caption:"Caption 4"
    },
    4:[object #10, class 'Object'] {
    jpegURL:"image5.jpg",
    caption:"Caption 5"
    }
    ]
    },
    1:[object #11, class 'Object'] {
    title:"Gallery 2",
    imgPath:"images/gallery2/",
    galleryItems:[object #12, class 'Array'] [
    0:[object #13, class 'Object'] {
    jpegURL:"image1.jpg",
    caption:"Caption 1"
    },
    1:[object #14, class 'Object'] {
    jpegURL:"image2.jpg",
    caption:"Caption 2"
    },
    2:[object #15, class 'Object'] {
    jpegURL:"image3.jpg",
    caption:"Caption 3"
    },
    3:[object #16, class 'Object'] {
    jpegURL:"image4.jpg",
    caption:"Caption 4"
    },
    4:[object #17, class 'Object'] {
    jpegURL:"image5.jpg",
    caption:"Caption 5"
    }
    ]
    },
    2:[object #18, class 'Object'] {
    title:"Gallery 3",
    imgPath:"images/gallery3/",
    galleryItems:[object #19, class 'Array'] [
    0:[object #20, class 'Object'] {
    jpegURL:"image1.jpg",
    caption:"Caption 1"
    },
    1:[object #21, class 'Object'] {
    jpegURL:"image2.jpg",
    caption:"Caption 2"
    },
    2:[object #22, class 'Object'] {
    jpegURL:"image3.jpg",
    caption:"Caption 3"
    },
    3:[object #23, class 'Object'] {
    jpegURL:"image4.jpg",
    caption:"Caption 4"
    },
    4:[object #24, class 'Object'] {
    jpegURL:"image5.jpg",
    caption:"Caption 5"
    }
    ]
    },
    3:[object #25, class 'Object'] {
    title:"Gallery 4",
    imgPath:"images/gallery4/",
    galleryItems:[object #26, class 'Array'] [
    0:[object #27, class 'Object'] {
    jpegURL:"image1.jpg",
    caption:"Caption 1"
    },
    1:[object #28, class 'Object'] {
    jpegURL:"image2.jpg",
    caption:"Caption 2"
    },
    2:[object #29, class 'Object'] {
    jpegURL:"image3.jpg",
    caption:"Caption 3"
    },
    3:[object #30, class 'Object'] {
    jpegURL:"image4.jpg",
    caption:"Caption 4"
    },
    4:[object #31, class 'Object'] {
    jpegURL:"image5.jpg",
    caption:"Caption 5"
    }
    ]
    },
    4:[object #32, class 'Object'] {
    title:"Gallery 5",
    imgPath:"images/gallery5/",
    galleryItems:[object #33, class 'Array'] [
    0:[object #34, class 'Object'] {
    jpegURL:"image1.jpg",
    caption:"Caption 1"
    },
    1:[object #35, class 'Object'] {
    jpegURL:"image2.jpg",
    caption:"Caption 2"
    },
    2:[object #36, class 'Object'] {
    jpegURL:"image3.jpg",
    caption:"Caption 3"
    },
    3:[object #37, class 'Object'] {
    jpegURL:"image4.jpg",
    caption:"Caption 4"
    },
    4:[object #38, class 'Object'] {
    jpegURL:"image5.jpg",
    caption:"Caption 5"
    }
    ]
    },
    5:[object #39, class 'Object'] {
    title:"Gallery 6",
    imgPath:"images/gallery6/",
    galleryItems:[object #40, class 'Array'] [
    0:[object #41, class 'Object'] {
    jpegURL:"image1.jpg",
    caption:"Caption 1"
    },
    1:[object #42, class 'Object'] {
    jpegURL:"image2.jpg",
    caption:"Caption 2"
    },
    2:[object #43, class 'Object'] {
    jpegURL:"image3.jpg",
    caption:"Caption 3"
    },
    3:[object #44, class 'Object'] {
    jpegURL:"image4.jpg",
    caption:"Caption 4"
    },
    4:[object #45, class 'Object'] {
    jpegURL:"image5.jpg",
    caption:"Caption 5"
    }
    ]
    },
    6:[object #46, class 'Object'] {
    title:"Gallery 7",
    imgPath:"images/gallery7/",
    galleryItems:[object #47, class 'Array'] [
    0:[object #48, class 'Object'] {
    jpegURL:"image1.jpg",
    caption:"Caption 1"
    },
    1:[object #49, class 'Object'] {
    jpegURL:"image2.jpg",
    caption:"Caption 2"
    },
    2:[object #50, class 'Object'] {
    jpegURL:"image3.jpg",
    caption:"Caption 3"
    },
    3:[object #51, class 'Object'] {
    jpegURL:"image4.jpg",
    caption:"Caption 4"
    },
    4:[object #52, class 'Object'] {
    jpegURL:"image5.jpg",
    caption:"Caption 5"
    }
    ]
    }
    ]

  3. #3
    SitePoint Member DMAX's Avatar
    Join Date
    May 2003
    Location
    Australia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there freddydoesphp

    Thanks for your help and advice.
    I'll give it a go and see how it works out.


Bookmarks

Posting Permissions

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