Populate IMG Gallery using Media List
Updated: Dec 29, 2007
Views: 2647
Description: This very simple tutorial will show you how to populate IMG Gallery using Media List.
This technique allows you to load multiple XML gallery files into a single IMG Gallery instance on your web page. I personally use it to load gallery files containing only a single image: example www.umusico.com/index.php, however each file can contain any number of items - essentially it will give you "multiple galleries". The below example is designed to load 5 items into Media List, each linked to an XML file to populate IMG Gallery.
Lets begin!
Create a new Flash document and resize it to 550px X 260px. Choose your preferred background color.
Next open the components window under Window >> Components and drag an instance of Media List to the stage. Give it an instance name of "myList". Resize it to 180px X 260px and give it both X and Y coordinates of 0.0 - it should now sit neatly on the left of the stage.
Now open the components window again and drag an instance of IMG Gallery to the stage. Give it an instance name of "myGallery". Resize it to 370px X 260px and give it an X coordinate of 180 and a Y coordinate of 0.
Next up, please select Media List and then select the properties dialog. Under "contentXML" set the path to your main XML file that will populate the list, eg. http://localhost/afc/content.xml. Set "itemHeight to 51". Set the "itemPadding" properties both to 3. Set the "thumbnailContainer" style to whatever suits you - mine is set at w:64, H:45 to suit my gallery images.
Now select IMG Gallery and again select the properties dialog. The default settings here will work just fine, however I have "navigation" set to off as I am only displaying a single image per gallery.
Next we need to create our XML files to populate both Media List (content.xml) and from within that file IMG Gallery. The <data> tag in the content.xml file will reference the xml files used to populate the gallery. The format for the Media List file should be as follows (only showing a single "item" but you should list 5 items for the purposes of this tutorial):
<?xml version="1.0"?>
<content>
<item>
<title>Media List/IMG Gallery</title>
<description>a tutorial</description>
<thumbnailPath>http://localhost/afc/thumbs/tutorial.jpg</thumbnailPath>
<data>http://localhost/afc/gallery1.xml</data>
</item>
</content>
You should now create 5 separate files naming them gallery1.xml, gallery2.xml etc. to populate IMG Gallery These should be referenced as such in the item <data> tags as in the above example used to populate Media List. The structure of our gallery XML files should be as follows.
<?xml version="1.0"?>
<content>
<image>
<path>http://localhost/afc/tutorial.jpg'</path>
<description>SUOMEDIA | MEDIA LIST/IMG GALLERY TUTORIAL</description>
<link>http://www.suomedia.com/page.php?3</link>
</image>
</content>
You should now have the following files:
content.xml
gallery1.xml
gallery2.xml
gallery3.xml
gallery4.xml
gallery5.xml
Now, to make this all work we need a little Actionscript. Create a new layer in your timeline and name it "actions". Select the first keyframe and then open the "Actions" dialog. Paste in the following code:
// automatically select the first item and populate the gallery
function listAutoSelect(evnt:Object) {
var item:Object = myList.getItemNum(0);
myList.selectItem(item);
var item:Object = myList.getSelectedItem();
myGallery.contentXML = item.data;
}
myList.addEventListener("CONTENT_LOAD_COMPLETE", listAutoSelect);
// populate the gallery with the selected item
function ITEM_ON_RELEASE(evnt:Object) {
myGallery.contentXML = evnt.target.data;
}
myList.addEventListener("ITEM_ON_RELEASE", this);
Thats it! Feel free to contact me through the Flow List Forums: my profile
Enjoy!
Matti Ressler
Suomedia
Matti Ressler is the CEO of Suomedia who specialise in dynamic web application development and ecommerce systems. He is also a Senior Team Member of the osCommerce open source ecommerce project.
www.suomedia.com
