AS3 XML Thumbnail Photo Gallery
October 26, 2008 by jared
Just a basic example of a thumbnail XML driven photo gallery. This version limits the number of thumbnails to the width of the photo, it’s not a perfect solution but at least it’ll get you started somewhere!
very nice jared. keep them coming!
Very nice indeed, what i would like to see is how you make the thumbnails horisontally scrollable to allow more thumbnails and because it looks good.
really nice example jared.
however, try clicking the second thumbnail. then click the big picture. it will go back to the first image.
hi johny thanks for pointing out the bug. I can tell you right now you just need to make a small change in the insertFirstRow function, to the eventlistener.
im in the midst of cleaning up the whole site, standardizing the code structure. there’ll be an updated version of this, including my personal tween engine, soon…
nice work
How would you make this so the images scaled if they are different sizes? Preferably with a tween:P And add a border around the images that tweens with them.
I need some help resizing the thumbnail to support more then 10 pictures. I found the part in the AS that seems to have the size, but I can’t figure out how to change it.
Is something like this possible?
I appreciate it guys!
Well I figured out how to resize the thumbs (just had to re-export it *doh*)
But as far as adding more thumbs to it, I’m still lost.
alrighty, maybe next time I’ll just play with the code more before asking for help.
To add more images, you just have to resize the thumbsize (in the MasterThumb.as file) and then set the spacing to the appropriate number (in the Thumbnail.as file).
Thanks anywho for reading all my posts.
Hi Jared,
I’ve been reading this script and looking at the fla. I cannot figure out how you have connected the AS files to the fla. Also, in the MasterThumb.as there is a typical “over” and “out” for the rollovers of the thumbnails. Where are those timelines? I can’t find any movieclips that have a timeline. I guess I need some help with the mysteries of as files. Thanks for your time and thank you for the script!
Hi Jared,
I figured out the “over” and “out” LOL. Now I am trying to add a title to each image via the xml. I’ve tried numerous angles but nothing is working. Can you help?
Thanks for the code!
Hi Jared,
I still cannot add text to this slide show. I’ve tried everything I can think of. Will send money for help!!!!! Let me know how much and I’ll put it in the “donate” box. Thanks!
this is very strange
why is that when you click on the big pic the the first image reloads ??
i mean why is the big pic clickable in the first place
nice work by the way
very minimalistic
how would I add a second row of thumbnails if there were more than 10 images?
excellent work, jared…
I added Key navigation (LeftArrow and RightArrow) by simply inserting into Thumbnail class:
—
import flash.events.*;
import flash.display.Sprite;
private var pressedKeys:Object = {};
private var graphicsArray:Array = new Array;
—–
into init() function:
stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDownHandler );
stage.addEventListener( KeyboardEvent.KEY_UP, keyUpHandler );
——
into insertFirstRow() function:
graphicsArray[i] = thumb;
——-
and finally adding these 3 functions:
private function keyDownHandler( e:KeyboardEvent ):void
{
if( pressedKeys[ e.keyCode ] )
{
return;
}
pressedKeys[ e.keyCode ] = 1;
traceEvent( e );
}
private function keyUpHandler( e:KeyboardEvent ):void
{
delete pressedKeys[ e.keyCode ];
}
private function traceEvent( e:KeyboardEvent ):void
{
if (e.keyCode==39) {
if (currentPhoto0) {
graphicsArray[currentPhoto-1].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
}
}
}
sorry, the last function has been cut by the box length:
private function traceEvent( e:KeyboardEvent ):void
{
if (e.keyCode==39) {
if (currentPhoto0) {
graphicsArray[currentPhoto-1].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
}
}
}
how can i scroll the thumbnails?
hi. i cant seem to find where to the colour margin round the thumbnails is set. any ideas?
thanks
How would I implement this so it only runs on a particular frame in my .fla file?
Thanks!
try using use the Loader() Class to load the swf
Look in the library, there’s an exported movieclip
I noticed in the Thumbnail class that we are only inserting one row. Ive had a hard time figuring out how to add a second or even third row of thumbails that can be loaded when clicked on. Any help?
Thanks!
Thanks Jared, Just what I was looking for.
Simone, I made some changes to your code for the keyboard event. Your traceEvent function wasn’t quite working for me:
private function traceEvent( e:KeyboardEvent ):void {
if (e.keyCode == 37)
{
graphicsArray[currentPhoto - 1].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
if (currentPhoto == 0)
{
graphicsArray[currentPhoto + 9].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
}
}
if (e.keyCode == 39)
{
graphicsArray[currentPhoto + 1].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
if (currentPhoto == 9)
{
graphicsArray[currentPhoto - 9].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
}
}
}