How can I add a border around thumbnails in XML gallery?
Hello,
I have a couple of problems with my XML gallery. I'd like the thumbnails to have a black border around them and also for the border to change color when a user touches the thumbnail... Is this possible??
I've tried to add some code, and it looks like it should work, but it doesn't. The code I have doesn't add a black border around the thumbnail and only changes the border color on the last thumbnail on the list when the user rollsoff and then back on again. Can you help?? I'll also attach my files, if this is helpful to see my problem.
Here is my code:
PHP Code:
var thumb_spacing = 45;
var vertical_spacing = 61;
var columns = 4;
function GeneratePortfolio(portfolio_xml, t) {
window.pArray = new Array();
for (var i = 0; i<currentLength; i++) {
menu_mc.box["thumbnail_mc"+i].removeMovieClip();
}
var portfolioPictures = portfolio_xml.childNodes;
currentLength = portfolioPictures.length;
for (var i = 0; i<portfolioPictures.length; i++) {
var currentPicture = portfolioPictures[i];
var currentThumb_mc = menu_mc.box.createEmptyMovieClip("thumbnail_mc"+i, i);
currentThumb_mc._x = 5+(i%columns)*thumb_spacing;
currentThumb_mc._y = 5+Math.floor(i/columns)*thumb_spacing;
currentThumb_mc.createEmptyMovieClip("thumb_container", 0);
//add black border around thumbnails (doesn't work)
currentThumb_mc.thumb_container._x -= currentThumb_mc.thumb_container._width/2;
currentThumb_mc.thumb_container._y -= currentThumb_mc.thumb_container._height/2;
currentThumb_mc.thumb_container.lineStyle(0, 0x000000, 100);
currentThumb_mc.thumb_container.lineTo(thumb_container._width, 0);
currentThumb_mc.thumb_container.lineTo(thumb_container._width, thumb_container._height);
currentThumb_mc.thumb_container.lineTo(0, thumb_container._height);
currentThumb_mc.thumb_container.lineTo(0, 0);
currentThumb_mc.thumb_container.loadMovie(currentPicture.attributes.thumb);
currentThumb_mc.image = currentPicture.attributes.image;
currentThumb_mc.id = i;
currentThumb_mc.onRollOver = currentThumb_mc.onDragOver=function () {
info_txt.text = this.title;
//Creates border around the thumbnails; only works on last thumbnail on the list and only works after you rolloff the thumbnail and then back on?
currentThumb_mc.onRollOver = function() {
currentThumb_mc.lineStyle(2, 0xFFFFFF, 100);
w = this._width;
h = this._height;
this.moveTo(0, 0);
this.lineTo(w, 0);
this.lineTo(w, h);
this.lineTo(0, h);
this.lineTo(0, 0);
};
};
currentThumb_mc.onRollOut = currentThumb_mc.onDragOut=function () {
info_txt.text = "";
//clears border around thumbnail
currentThumb_mc.onRollOut = function() {
this.clear();
};
};
}
setPortfolioNr(t);
}
function choosePortfolio(index) {
var portfolio_xml = new XML();
portfolio_xml.ignoreWhite = true;
portfolio_xml.onLoad = function(success) {
if (success) {
var gallery = this.firstChild.childNodes[index];
galleryInfo.text = this.firstChild.childNodes[index].attributes.title;
var totalGalleries = this.firstChild.childNodes.length;
GeneratePortfolio(gallery, totalGalleries);
} else {
trace("Error loading XML file");
}
};
portfolio_xml.load("portfolio.xml");
}
function setPortfolioNr(t) {
back_btn.onRelease = function() {
index>0 ? index-- : index=t-1;
choosePortfolio(index);
};
fwd_btn.onRelease = function() {
index<t-1 ? index++ : index=0;
choosePortfolio(index);
};
}
choosePortFolio(0);