# XML Image Gallery w/ Crossfades?

**URL:** <https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896>\
**Category:** flash\
**Created:** [March 14, 2006, 2:59am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896 "2006-03-14T02:59:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![JBN](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jbn/32/2239_2.png) [@JBN](https://forum.kirupa.com/u/JBN)\
**Post date:** [March 14, 2006, 2:59am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/1 "2006-03-14T02:59:00Z")

</div>

I’ve got a good working XML gallery up and running finally. However, I want to make the images crossfade, going forwards and backwards. I can’t seem to work my way around it, the images just disappear and then fade in from 0. Anyone point me the right way?

---

<div class="post-metadata">

**Author:** ![JBN](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jbn/32/2239_2.png) [@JBN](https://forum.kirupa.com/u/JBN)\
**Post date:** [March 22, 2006, 4:31am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/2 "2006-03-22T04:31:22Z")

</div>

Thanks so much scotty, i’ve learned so much from your posts! I just have one more quick question. I’ve been spending all week trying to get my photos to load centered horizontally. I’ve looked at probably every post on this site trying to incorporate other people’s suggestions, but its not working. Could you suggest a way to get them to load horizontally. Thanks!

---

<div class="post-metadata">

**Author:** ![frez](https://avatars.discourse-cdn.com/v4/letter/f/bbe5ce/32.png) [@frez](https://forum.kirupa.com/u/frez)\
**Post date:** [March 22, 2006, 8:24am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/3 "2006-03-22T08:24:48Z")

</div>

Just found this post … that’s pretty cool scotty.

How would one do the same thing - but instead of preloading all the images at the beginning … have the images preloaded as they are requested?

ie:

1. have the preloader bar show up over the current image as the next image is being loaded.

2. when the new image is fully loaded, hide the preloader bar

3. cross fade to the next image

---

<div class="post-metadata">

**Author:** ![JBN](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jbn/32/2239_2.png) [@JBN](https://forum.kirupa.com/u/JBN)\
**Post date:** [March 27, 2006, 11:27pm UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/4 "2006-03-27T23:27:03Z")

</div>

Sorry to bring this back up, but I am still unable to get this thing centered. I have tried all kinds of different approaches, but none are working with the crossfade. Its going to be full screen and the pictures are going to be all kinds of different sizes. I just want to be able to choose a y value for the top of the image, and let the images center themselves on the screen. Any help incorporating this code? Thanks!

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 28, 2006, 5:55am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/5 "2006-03-28T05:55:59Z")

</div>

```auto
function preloadPic() {
	clearInterval(id);
	var con = picture.duplicateMovieClip("con"+k, 9984+k);
	con.loadMovie(image[k]);
	var temp = _root.createEmptyMovieClip("temp"+k, 99+k);
	temp.onEnterFrame = function() {
		var total = con.getBytesTotal();
		var loaded = con.getBytesLoaded();
		percent = Math.round((loaded/total*100)/image.length);
		preloader.preload_bar._xscale = loadTot+percent;
		info.text = "Loading picture "+k+" of "+image.length+" total";
		if (con._width) {
			//center your pics:
			con._x = Stage.width/2-con._width/2
			con._y = Stage.height/2-con._height/2
			con._visible = 0;
			nextPic();
			loadTot += percent;
			delete this.onEnterFrame;
		}
	};
}

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![JBN](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jbn/32/2239_2.png) [@JBN](https://forum.kirupa.com/u/JBN)\
**Post date:** [March 28, 2006, 8:33am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/6 "2006-03-28T08:33:10Z")

</div>

you’re a life saver scotty, i was ready to start pulling hair. i had the code kinda right, just no where near the right spot!

---

<div class="post-metadata">

**Author:** ![thesainter](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@thesainter](https://forum.kirupa.com/u/thesainter)\
**Post date:** [March 29, 2006, 11:19am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/7 "2006-03-29T11:19:07Z")

</div>

I would love to see this.

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 30, 2006, 9:34am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/8 "2006-03-30T09:34:03Z")

</div>

> [@thesainter](#):
>
> I would love to see this.

download the fla?

scotty(-:

---

<div class="post-metadata">

**Author:** ![frez](https://avatars.discourse-cdn.com/v4/letter/f/bbe5ce/32.png) [@frez](https://forum.kirupa.com/u/frez)\
**Post date:** [March 30, 2006, 9:37am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/9 "2006-03-30T09:37:34Z")

</div>

scotty … does your code above address my question above or jbn’s? thx 🙂

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 30, 2006, 10:07am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/10 "2006-03-30T10:07:05Z")

</div>

it’s addressed to jbn’s post, I overlooked your question…  
this will answer yours?

scotty(-:

---

<div class="post-metadata">

**Author:** ![JBN](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jbn/32/2239_2.png) [@JBN](https://forum.kirupa.com/u/JBN)\
**Post date:** [April 6, 2006, 4:06am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/11 "2006-04-06T04:06:51Z")

</div>

Wow, seriously scotty, you are awesome. I like this one even better. With the other one if you click the next or previous buttons too fast the last image doesn’t quite fade out all the way and is stuck over the other images until you go back to it. This totally solves the problem and even makes the gallery a little more user friendly!

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [April 6, 2006, 7:03am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/12 "2006-04-06T07:03:14Z")

</div>

no problem =)

---

<div class="post-metadata">

**Author:** ![Beebs](https://avatars.discourse-cdn.com/v4/letter/b/47e85d/32.png) [@Beebs](https://forum.kirupa.com/u/Beebs)\
**Post date:** [April 13, 2006, 11:42pm UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/13 "2006-04-13T23:42:09Z")

</div>

Hi Scotty,

Care to help me for post #15 with option to run the slide automatically and have option to loop/not?

Thanks

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [April 15, 2006, 8:22am UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/14 "2006-04-15T08:22:12Z")

</div>

You want it to start as a slideshow or have an option to start it?  
_edit, in the as you’ll find a variable ‘slide’ it is set to 1, this will start with the slideshow, if you don’t want that, set it to 0 🙂 edit_

scotty(-:

---

<div class="post-metadata">

**Author:** ![Beebs](https://avatars.discourse-cdn.com/v4/letter/b/47e85d/32.png) [@Beebs](https://forum.kirupa.com/u/Beebs)\
**Post date:** [April 15, 2006, 8:05pm UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/15 "2006-04-15T20:05:04Z")

</div>

Thanks a lot, Scotty. I have 2 other further questions, I hope you don’t mind.

1. I have read the code, but I can’t find where to change the option, wether the slideshow is loop or not?

So I have 62 images for this slideshow :

1. How to disable the play/pause/prev/next button to prevent they are clicked during the slideshow is running? - so that they only appear on the last image number 62?

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [April 15, 2006, 8:18pm UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/16 "2006-04-15T20:18:33Z")

</div>

It’s in line 3, but you can leave it as it is if you wnat to start with the slideshow.  
Because kirupa used buttons, I can’t use the enabled property, but you can do this, change the nextImage function like

```auto
function nextImage() {
	p<total-1 ? p++ : (enableControl(), p=0);
	desc_txt.text = description[p];
	picture_num();
	preloadPic();
}

```

and add this to make the buttons invisble (and disabled) untill the last picture has shown

```auto

previous_btn._visible = next_btn._visible=play_btn._visible=pause_btn._visible=0;
function enableControl() {
	previous_btn._visible = next_btn._visible=play_btn._visible=pause_btn._visible=1;
}

```

Another way is to convert the buttons to mc’s and replace the visible property with enabled property:)

scotty(-:

---

<div class="post-metadata">

**Author:** ![Beebs](https://avatars.discourse-cdn.com/v4/letter/b/47e85d/32.png) [@Beebs](https://forum.kirupa.com/u/Beebs)\
**Post date:** [April 15, 2006, 8:27pm UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/17 "2006-04-15T20:27:19Z")

</div>

Life saver! thanks alot , but …

1. Still about the loop , I guess I did not explain my post well. What I mean by loop is that after image number 62 finish being loaded the slideshow is stop. So user has to click play button in order to fire up the slideshow again.

This boolean on line 3, is that only to make the slideshow start automatically/not, right?

2 Quote “Another way is to convert the buttons to mc’s and replace the visible property with enabled property” - yes, I like this idea, and I’ll make it as my homework.

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [April 15, 2006, 8:32pm UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/18 "2006-04-15T20:32:18Z")

</div>

ok, then you have to set slide to false after the last picture has loaded:)

```auto
function enableControl() {
    slide = 0;
    previous_btn._visible = next_btn._visible=play_btn._visible=pause_btn._visible=1;
}

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![Beebs](https://avatars.discourse-cdn.com/v4/letter/b/47e85d/32.png) [@Beebs](https://forum.kirupa.com/u/Beebs)\
**Post date:** [April 15, 2006, 8:36pm UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/19 "2006-04-15T20:36:10Z")

</div>

Nearly there…It stops and the control appear, but the slideshow does not stop at image number 62, it stops at number 1???

Thanks alot

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [April 15, 2006, 8:40pm UTC](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896/20 "2006-04-15T20:40:33Z")

</div>

LOL, try it this way

```auto
function nextImage() {
    p<total-1 ? p++ : (enableControl(), slide=0);
    desc_txt.text = description[p];
    picture_num();
    preloadPic();
}

```

BTW I was wrong about the enabled property, off course it works for buttons :trout:

scotty(-:

[Next page](https://forum.kirupa.com/t/xml-image-gallery-w-crossfades/181896.md?page=2)