# Gallery with Portrait and Landscape images

**URL:** https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366
**Category:** flash
**Created:** [June 30, 2003, 12:23am UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366 "2003-06-30T00:23:23Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![slickset09](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slickset09](https://forum.kirupa.com/u/slickset09)
#### Post date: [June 30, 2003, 12:23am UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/1 "2003-06-30T00:23:23Z")

</div>

Ok, I’ve been searching these forums for the last 3 days trying to find a solution so please don’t just tell me to do a search for it.

I’ve gone through the gallery tutorial and that works fine. The problem is my galleries are a good mix of photos that are oriented in different ways (portrait and landscape), more specifically they are either 480x360 or 360x480 (hey, this is real life, sometimes you have to turn the camera sideways to get the best picture). Is it possible to tweak the gallery so that it displays all the images correctly?

If you need to see what i’m talking about, download the .fla in the gallery tutorial, open the animations folder, rotate one of the pictures 180 degrees and run the movie.

I’ve looked at a couple of lostinbeta’s threads about centering the movie but I can’t figure anything out. Thanks.

\*also, what about adding a counter to it, so it displays something like ‘01 of 22’. the ‘22’ is the total length of the array but I am new to actionscript so I dont know var names and the ‘01’ could be determined by a counter in the loop but I don’t know how or where to add it.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [June 30, 2003, 4:31pm UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/2 "2003-06-30T16:31:01Z")

</div>

Hello i had the same problem as yours but i solved it using XML files it takes a little bit of extra time but it is a guaranteed solution.

Sorry that i can’t remember the thread but somewhere on this forum there are a post of an image gallery based on XML file the actionscript code is written there on how to extract the information from it.

The thing i’ve done is that i added an attribute to the items of the file including the image state if it is vertical or horizontal and then based on that value i placed the empty movieClip that will load the image on the correct coordinates.

If you are interested in the code i’ll post it and i will be pleased to provide any further help.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [June 30, 2003, 6:17pm UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/3 "2003-06-30T18:17:03Z")

</div>

Yes I would be interested! I don’t know much about XML though so you might need to explain your code. Go ahead and post it if you can and I let you know if i’m still running into problems.

Thanks.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [June 30, 2003, 10:06pm UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/4 "2003-06-30T22:06:30Z")

</div>

Well the XML we use here is so simple and you’d be more comfortable with it if you have a previous knowledge of HTML.

The thing you need to know is that you can create XML files using NOTEPAD and then saving them as .XML file you can still edit them with notepad after that. The next step is creating your XML data file.

You should always begin the XML file with this line it is called the identifier:

```php
<?xml version="1.0" encoding="UTF-8"?>

```

The you open a tag for your parent entity:

```php
<Gallery>

```

Then you begin to add your children entities

```php
<image>

```

with their respective attributes in our case **imageName** and **state**. For state i used ‘1’ for landscape and ‘2’ for portrait.

Your final XML file should look somrthing like this:

```php

<?xml version="1.0" encoding="UTF-8"?>
<Gallery>
     <image imageName = "image01.jpg" state = "1" />
     <image imageName = "image02.jpg" state = "2" />
     <image imageName = "image03.jpg" state = "2" />
</Gallery>

```

and so on you must use this format or the XML parser in flash will not interpret the XML well.Do not use an empty line between to child entities entries.

A last note about XML if you have a large number of photos for example 100 it will be very time consuming to file the images name in the notepad i advice you to rename the images automatically using photoshop or ACDSee in a series from image001.jpg to image100.jpg then use EXCEL to provide the string name squence and you can simply copy and paste the sequence from EXCEL to an XML editor called XMLSpy.

Now you got your XML file the next step is to get the data from it.  
you can use this actionscript code it is straight forward any strange command is clearly explained in the FLASH MX actionscript reference.

[AS]  
stop();  
XML.prototype.ignorewhite = true;  
var \_root.imagePointer = 0;  
var ImageName = new Array();  
var ImageState = new Array();  
var myXML = new XML();

myXML.load("…/XMLFiles/myXML.xml");

function getFilesNames() {  
// Parse XML  
imageCount = tempXML.firstChild.childNodes.length;  
node = tempXML.firstChild.childNodes;  
for (var i = 0; i\<myXML.firstChild.childNodes.length; i++) {  
ImageName.push(node\*.attributes.imageName);// Store the information of the imageName attribute in ImageName array  
ImageState.push(node\*.attributes.state);//same as above  
}  
return (imageCount);  
}

if (myXML.loaded) {  
play();  
}  
[/AS]  
since sometimes the loading of the XML file may have some errors the last if statement is used to confirm loading the file.

when you reach the next frame you’ll have the following code  
[AS]  
stop();  
getFilesNames(); // use the previous function to parse the file  
if (ImageState[0] == 1) {  
\_root.mainImage.\_x = 204; // good position for landscape images  
\_root.mainImage.\_y = 180;  
} else {  
\_root.mainImage.\_x = 304; // good position for portrait photos  
\_root.mainImage.\_y = 80;  
}

// in my case i created on the root an empty movieClip to hold the images with an instance name mainImage  
\_root.mainImage.loadMovie("…/PhotosFolder/" + ImageName[0]);  
// use this command to initially place the first image on stage

// in your case you have two buttons on stage one to cycle through the images upward (next) and one downward (previous)  
// next and previous are the instances’ names of the buttons on the root  
\_root.next.onPress = function () {  
if (\_root.imagePointer == imageCount) {  
\_root.imagePointer = 0; // return to the first image if you are at the last one  
} else {  
\_root.imagePointer ++; // increment pointer  
}

```
      if (ImageState[_root.imagePointer] == 1) {
_root.mainImage._x = 204;
_root.mainImage._y = 180;
       }else {
_root.mainImage._x = 304;
_root.mainImage._y = 80;
       }

```

\_root.mainImage.loadMovie("…/PhotosFolder/" + ImageName[imagePointer]);  
}

\_root.previous.onPress = function () {  
if (\_root.imagePointer == 0) {  
\_root.imagePointer = imageCount; // return to the last image if you are at the first one  
} else {  
\_root.imagePointer --; // decrement pointer  
}

```
      if (ImageState[_root.imagePointer] == 1) {
_root.mainImage._x = 204;
_root.mainImage._y = 180;
       }else {
_root.mainImage._x = 304;
_root.mainImage._y = 80;
       }

```

\_root.mainImage.loadMovie("…/PhotosFolder/" + ImageName[imagePointer]);  
}  
[/AS]

That’s all hope everything is clear

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 3:35am UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/5 "2003-07-02T03:35:58Z")

</div>

Ok, thank you the code you posted makes sense, it’s just I can’t get it to work. I keep getting the error

> Error opening URL “file:///C|/Documents%20and%20Settings/user/Desktop/animation/”

I have no idea how to fix it, I could post a zip with my fla, xml and images folder if you could take a look at it. Once again, thank you.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 11:31am UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/6 "2003-07-02T11:31:58Z")

</div>

make sure you are making a proper path reference to your XML file and images folder as you can see in the code you have two path. “…/XMLFiles/” and “…/PhotosFolder/” this means that your XML files and photos must be in their respective folders.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 9:23pm UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/7 "2003-07-02T21:23:52Z")

</div>

Hey, I checked all the paths and they’re all right. You can download the files here: [http://www.exshield.com/gallery.zip](http://www.exshield.com/gallery.zip) (~1.4mb) if you have a chance, please check it out and see what I did wrong.

Thanks

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 11:53pm UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/8 "2003-07-02T23:53:33Z")

</div>

Hello this is a final working version of the code.

I will explain what went wrong later.  
some of the errors were mistakes by me sorry :tie:

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 3, 2003, 2:01am UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/9 "2003-07-03T02:01:13Z")

</div>

Thank you so much, it works like a charm. The only problem is I can’t see the buttons now??? I’ll look into this and see if i can fix it on my own. Thanks so much for the help.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 3, 2003, 2:05am UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/10 "2003-07-03T02:05:43Z")

</div>

Nevermind, they don’t show up in test movie but when I play the swf externally it works awesome. Thank you so much.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 3, 2003, 5:27pm UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/11 "2003-07-03T17:27:33Z")

</div>

All right, now i’m just frustrated. The whole thing works when it’s on my desktop by as soon as I put it online, the swf will play but the pictures are no where to be seen. I’ve tried everything, including putting the entire folder (fla, swf, folders with images and xml) on my site and it still won’t load the pics. Any suggestions?

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 3, 2003, 9:44pm UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/12 "2003-07-03T21:44:42Z")

</div>

make sure that you have uploaded the files in the same order i mean by that folders included. the swf in a folder, xml in the XMLFiles and the photos in the Photo Folder.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 4, 2003, 6:56am UTC](https://forum.kirupa.com/t/gallery-with-portrait-and-landscape-images/24366/13 "2003-07-04T06:56:50Z")

</div>

It’s the exact same order, I unziped your file which created a folder called finished that contains the swf and folders for the xml and jpgs, I ran the swf and it worked. uploaded the folder called finished and tried to run the swf and an htm with the swf inside and both would load the swf and I can see the next and previous buttons but no picture (and its not waiting for the pic to load, the pic is about 20k and i’m on a dsl connection). Any other suggestions?