Hello
I am trying to make on xml driven horizontal photo gallery using Kirupa’s great tutorial
“PHOTOGALLERY USING XML AND FLASH”
YOU CAN ALSO VIEW THE RESULT HERE.
http://www.flashybee.com/gallery/gal_01.html
http://www.flashybee.com/gallery/gal_01.html
Now my problem is I am trying to make one square box ( **with some different color probably green / red/ or white **) to be displayed when the user mouse over the thumbnail and also trying to link the bigger image to some specified “url”, but could not make it.
One more thing now the thumbnail scroller is scrolling with the mouse movement . Is there any way that the thumbnail scroller will move all time and when the user roll over in any thumbnail it will stop and start again when the mouse roll out the thumbnail scroller. ?
I append below the code and xml for your look.
PLEAE HELP ME.
TRNGHOSH
CODE FOR FLASH. (FROM KIRUPA)
// new xml declaration
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(“images.xml”);
// function to load xml
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
thumbnails* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
} else {
content = “file not loaded!”;
}
}
///////////////////////////////////// for key functions
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
// function for previous btn and next btn
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
///////////////////////////////////// function for preloader.
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;
}
}
};
// end of preloader function.
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();
}
}
// for loading first image.
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;
}
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip(“tscroller”, 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip(“t”+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = hit_left._x+(target_mc._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
line._x = 715.0;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], “thumbnail_mc.t”+k);
}
**XML CODE FOR LOADING THE THUMBNAIL AND IMAGES. **
<?xml version=“1.0” encoding=“utf-8” standalone=“yes”?>
<images>
** <pic>**
** <image>images/1.jpg</image>**
** <caption>WIND MILL FUTURE POWER SOURCE</caption>**
** <thumbnail>images/1th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/2.jpg</image>**
** <caption>ALONE FOR THE REST OF LIFE</caption>**
** <thumbnail>images/2th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/3.jpg</image>**
** <caption>CANYON CANAL</caption>**
** <thumbnail>images/3th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/4.jpg</image>**
** <caption>GLASS PYRAMID</caption>**
** <thumbnail>images/4th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/5.jpg</image>**
** <caption>CONSTRUCTION OVER WATER</caption>**
** <thumbnail>images/5th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/6.jpg</image>**
** <caption>DREAMY WORLD</caption>**
** <thumbnail>images/6th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/7.jpg</image>**
** <caption>FULL MOON OVER SEA</caption>**
** <thumbnail>images/7th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/8.jpg</image>**
** <caption>PASSAGE THROUGH THE WOODS</caption>**
** <thumbnail>images/8th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/9.jpg</image>**
** <caption>LOVELY AUTUMN</caption>**
** <thumbnail>images/9th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/10.jpg</image>**
** <caption>BEAUTIFUL SWEET HOME</caption>**
** <thumbnail>images/10th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/11.jpg</image>**
** <caption>LAVA!!</caption>**
** <thumbnail>images/11th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/12.jpg</image>**
** <caption>MIGHTY LANDSCAPES</caption>**
** <thumbnail>images/12th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/13.jpg</image>**
** <caption>LIGHTNING</caption>**
** <thumbnail>images/13th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
** <pic>**
** <image>images/14.jpg</image>**
** <caption>HOLY RIVER BOATS</caption>**
** <thumbnail>images/14th.jpg</thumbnail>**
** <link>http://www.flashybee.com/gallery/vertical.html/</link>**
** </pic>**
</images>
