Kirupa Photo Gallery Help!!!

[kmolleson]

i need just a little bit more help to finish up the last of my flash project. The Kirupa.com photo gallery tutorial did wonders and i have it all setup but unlike the pics in the tutorial my pics arn't all the same size. Could somebody please tell me what i could add to the code to have it autofit the picture window? And last thing is there a way to make it so you can click on my pics and have it open a new page with the full sized pic kinda like a thubnail would?

[kmolleson]

sorry don't wanna sound like i'm asking for the world but i left one thing out. I would also like to be able to add a caption to each of the pictures underneath the picture window. Don't know how to do any of things things. I would really appreciate any help.

[kmolleson]

did i ask for too much at once? Is that why nobody has replied?

[kmolleson]

ok i got the pictures to autosize and center but i still need the pictures to have captions. Does anybody know how i can add captions to my pics for the kirupa.com photogallery setup?

[System-Idle]

hhmm, sounds like you need to run yr data/content from a data base.

If you have many pics then this would be the best option.

if you have a smaller amount you could store links and caption data in xml or text file

:)

[kmolleson]

how would i go about doing this in an xml file and what do i add to my code and timeline for this to work?

[System-Idle]

http://www.google.co.uk/search?hl=en&q=flash+xml+image+gallery&meta=

kirupa's at the to of the list! :)

[glosrfc]

http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm

Ooops, beaten to the punch :)
________
YAMAHA TG77 (http://www.yamaha-tech.com/wiki/Yamaha_TG77)

[kmolleson]

for some reason on that tutorial i can't get any of the downloaded files to work in flash mx. Ok here is what i'm really looking for. I have my slideshow the exact way i want it except i need to incorperate captions. As far as i've seen so far the best way to do this is with an .xml file. Here is my AS so far.


//
// i wrote this code, but you can use and abuse it however you like.
// the methods are defined in the order which they occur to make it
// easier to understand.
//
// variables ------------------------------------------
// put the path to your pics here, include the slashes (ie. "pics/")
// leave it blank if they're in the same directory
this.pathToPics = "C:\\Documents and Settings\\kenneth.molleson\\My Documents\\My Pictures/";
// fill this array with your pics
this.pArray = ["102_0277.JPG", "107_0744.JPG", "107_0747.JPG", "kmolleson.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
// loads an image automatically when you run animation
_root.photo.loadMovie(this.pathToPics+this.pArray[0]);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
// ------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.photo._width = 550;
this.photo._height = 413;
this.onEnterFrame = fadeIn;
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
// Actions -----------------------------------------
// these aren't necessary, just an example implementation
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);

[kmolleson]

that code is the same as the code in the tutorial except this pice of code which autofits my pictures to the MC window for me.



MovieClip.prototype.loadMeter = function() { var i, l, t; l = this.photo.getBytesLoaded(); t = this.photo.getBytesTotal(); if (t>0 && t == l) { this.photo._width = 550; this.photo._height = 350; this.onEnterFrame = fadeIn; }};


i was hoping Kirupa or somebody with a lot of experiece could help me keep the same basic code i have now and add captions that change as the pictures change via an .xml for or other means.

[kmolleson]

ok i've simplified it much much more. I ended up using the Kirupa tutorial with the .xml file. I almost copied it exact with very few changes. I have made the picture movie clip larger and changed the buttons and the size/placement of the dynamic text boxes. I changed the .xml file to use my pictures and descriptions. It seems to be working ok i just need help with 3 things: 1)How would i make the slideshow loop so after you finish looking at the last photo instead of stopping it loops back to the first photo again. 2)I'd like to impliment the nice fade effect between photos such as the other Kirupa tutorial does 3)most importantly i need to have the photos autofit to the MC window. The code below make the images fit to the MC window in the other Kirupa tutorial but i don't know if it will work with this tutorial nor do i know where to insert it in the AS. I would really appreciate any help. Trying to get it done by the weekend.


MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.photo._width = 388.9;
this.photo._height = 267.6;
this.onEnterFrame = fadeIn;
}
};

[System-Idle]

to loop the image viewer, just loop through the xml again, or call the initial function that starts it all off.
remember to reset any vars.

for fades check out the build in advanced colour properties (which you can tween)
or with mx the tween classes (actionscript)

to resize the images load them into an epmty mc, when the pic has fully loaded,
resize the mc to fit the size you want ._width ._height

[kmolleson]

i am horrible with actionscript so i don't think i can create the loop and phade on my own. As for the resizing that code i posted above worked with the other photo slideshow will it not work with this one? I just don't know where to put it.

[scotty]

delay = 10000;
// -----------------------
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
caption = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
caption[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images1.xml");
p = 0;
function preload(clip) {
picture.loadMovie(clip);
preloader._visible = true;
var temp = this.createEmptyMovieClip("temp", 9987);
temp.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader.preload_bar._xscale = 100*loaded/filesize;
if (filesize>4 && filesize == loaded) {
//resize your pictures here
preloader._visible = false;
picture._alpha += 10;
if (picture._alpha>100) {
picture._alpha = 100;
slideshow();
delete this.onEnterFrame;
}
}
};
}
function nextImage() {
if (p<(total-1)) {
p++;
fadeOut(image[p]);
desc_txt.text = description[p];
caption_txt.htmlText = caption[p];
picture_num();
}
}
function firstImage() {
picture._alpha = 0;
fadeOut(image[0]);
desc_txt.text = description[0];
caption_txt.htmlText = caption[0];
picture_num();
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}
function fadeOut(clip) {
picture.onEnterFrame = function() {
this._alpha -= 20;
if (this._alpha<0) {
preload(clip);
delete this.onEnterFrame;
}
};
}


scotty(-:

[kmolleson]

awesome. You are the man Scotty. It's almost perfect. I'm working on several different AS tutorials to understand what most of the code does and means. I even got them to autosize correctly. Just want to add one maybe 2 things and it's a masterpiece. 1)what would i change to get rid of the auto slideshow and make my next and previous buttons function again? 2)is there a way to make the pictures clickable (like a thumbnail) so when the user clicks on the photo in the slideshow it opens the full size pictures in a new window. These are the last two things. Thanks so much for all the help so far guys. I really do appreciate it.

[kmolleson]

i got too excited too early :( Turns out my autosizing images isn't working. I'm not sure why. This is a big problem.

[kmolleson]

anybody left that can help me?

[kmolleson]

delay = 10000;
// -----------------------
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
caption = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
caption[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images1.xml");
p = 0;
function preload(clip) {
picture.loadMovie(clip);
preloader._visible = true;
var temp = this.createEmptyMovieClip("temp", 9987);
temp.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader.preload_bar._xscale = 100*loaded/filesize;
if (filesize>4 && filesize == loaded) {
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.photo._width = 388.9;
this.photo._height = 267.6;
this.onEnterFrame = fadeIn;
}
};
preloader._visible = false;
picture._alpha += 10;
if (picture._alpha>100) {
picture._alpha = 100;
slideshow();
delete this.onEnterFrame;
}
}
};
}
function nextImage() {
if (p<(total-1)) {
p++;
fadeOut(image[p]);
desc_txt.text = description[p];
caption_txt.htmlText = caption[p];
picture_num();
}
}
function firstImage() {
picture._alpha = 0;
fadeOut(image[0]);
desc_txt.text = description[0];
caption_txt.htmlText = caption[0];
picture_num();
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}
function fadeOut(clip) {
picture.onEnterFrame = function() {
this._alpha -= 20;
if (this._alpha<0) {
preload(clip);
delete this.onEnterFrame;
}
};
}

[kmolleson]

MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.photo._width = 388.9;
this.photo._height = 267.6;
this.onEnterFrame = fadeIn;
}
};


this is my autosize/fit images code that i can't seem to get to work

[kirupa]

I just conferred with you on AIM, but for anybody else who needs help in getting the photos act as hyperlinks, my two attachments in this thread may help: http://www.kirupa.com/forum/showthread.php?t=81020

:)

[kmolleson]

thank you so much Kirupa for your time and helping me realize something i should have known in the first place. Ok i'm asking for one last thing. Scotty please chime in here and make my day. This is my new code posted below. Can somebody or anybody please tell me what i can add to make the pictures in my slideshow autoscale to the size of my viewer window? I'm desperate as this is all i need to finish. Please help me!!!



function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
//
//define link variable
//
link = [];
//
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
//
//adding links
//
link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
//
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("image_and_link.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
//
//getURL statement
//
picture.onRelease = function() {
getURL(link[p], "_blank");
};
//
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}

[scotty]

Not tested but I think it will work :)

this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
preloader.preload_bar._xscale = 100*loaded/filesize;
if (loaded == filesize && picture._width>0 && picture._height>0) {
preloader._visible = false;
picture._width = 388.9;
picture._height = 267.6;
if (picture._alpha<100) {
picture._alpha += 10;
}
picture.onRelease = function() {
getURL(link[p], "_blank");
};
}
};


scotty(-:

[kmolleson]

where would i place this?

[kmolleson]

doh. nevermind. Thanks a million scotty it works like a charm. Thank you all for your help. I'll post the link to my site when i get er done.

[kmolleson]

anybody know how to make the slideshow loop back to the first picture at the end? I tried using the code from a different tutorial but it didn't work.

[ortablaze]

DUDE! I musta spent over 20hrs tryin to solve this resizing problem and I've just found the solution thatnks to you.

I luv u mang! ur my boy blue!

oh is there a way to customize thumbnail size too, not too important, only if ur not too busy.

Thanks dude.

here's (http://www.ortagrafix.com/ortagrafixbeta/)what i was working on.

[scotty]

You're both welcome =)