I’ve been working on this script to show a grid of thumbnails, and to have this photo viewer show the large version of the thumbs when you click on them. If the user then clicks on the viewer, it should minimize again.
here is the actionscript (2.0) code:
/*var description_mc = new LoadVars();
description_mc.onData = function(raw_text){
description.text = raw_text;
}*/
var thumb_spacingx = 110;
var thumb_spacingy = 85;
var a = 0;
var b = 0;
window.stop(graphic_mc);
window.stop(background_mc);
function GenerateGallery(gallery_xml){
var Galleryimages = gallery_xml.firstChild.childNodes;
for (var i = 0; i < Galleryimages.length; i++){
gallery_name.text = gallery_xml.firstChild.attributes.name;
//Create thumbnail array
var currentimage = Galleryimages*;
var thumbnail_mc = viewer.createEmptyMovieClip("thumbnail_mc"+i,i);
if (a==4) {
thumbnail_mc._x = (a * thumb_spacingx) + 10;
thumbnail_mc._y = (b * thumb_spacingy) + 10;
a = 0;
b = b+1;
}
else {
thumbnail_mc._x = (a * thumb_spacingx) + 10;
thumbnail_mc._y = (b * thumb_spacingy) + 10;
a = a+1;
}
//converting XML data to objects
thumbnail_mc.createEmptyMovieClip("thumb_container",0);
thumbnail_mc.thumb_container.loadMovie(currentimage.attributes.thumb);
thumbnail_mc.title = currentimage.attributes.title;
thumbnail_mc.image = currentimage.attributes.image;
thumbnail_mc.description = currentimage.attributes.description;
//using variables to enable/disable text viewing depending on if the large image is being displayed
var v=0;
if (v=0){
thumbnail_mc.onRollOver = thumbnail_mc.onDragOver = function(showtext){
title_txt.text = this.title;
description_txt.text = this.description;
}
}
else {
thumbnail_mc.onRollOver = thumbnail_mc.onDragOver = function(hidetext){
title_txt.text = "";
description_txt.text="";
}
}
thumbnail_mc.onRollOut = thumbnail_mc.onDragOut = function(){
title_txt.text = "";
description_txt.text="";
}
//function defining what happens when clicking on a thumbnail
thumbnail_mc.onRelease = function(maximize){
//creates costom mc for image
window.graphic_mc.holder_mc.createEmptyMovieClip("image_container",0);
window.graphic_mc.holder_mc.image_container.loadMovie(this.image);
//aligns this image depending if its 4:3 of 3:2 format
var h = this._height;
if (h > 67){
window.graphic_mc.holder_mc.image_container._x = 33;
}
else{
window.graphic_mc.holder_mc.image_container._x = 0;
}
//runs zooming animation upto the first "stop();" command
window.play(graphic_mc);
window.play(background_mc);
//states what to show in the title and description boxes when large image is showing (doesn't work)
title_txt.text = this.title;
description_txt.text = this.description;
//adapts variable so that rollover doesn't show text
v=1;
}
//what happens when clicking on large image
graphic_mc.onRelease = function(minimize){
window.graphic_mc.gotoAndPlay(20);
window.background_mc.gotoAndPlay(20);
v=0;
}
}
}
// xml object for xml content (defines sources for selections)
var gallery_xml = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success){
if (success) GenerateGallery(this);
else trace("Error loading XML file"); // no success? trace error (wont be seen on web)
}
// load
gallery_xml.load("imagegallery.xml");
An online version of this setup can be viewed here (this link should work):
http://x079030.lr-s.tudelft.nl/gallery.html
problem:
a) thumbnails still clickable behind large image (can this be turned off, the entire grid?). The the “maximize” function can’t be invoked again
b) no text displayed using rollover: because the “maximize” function is being invoked again to continue the playing of the animation (which minimizes it), the variable stays = 1, and the rollover won’t work
c) large image not clickable
d) when seeing a large image, click on a different thumbnail than the one that enlarged it, and you’ll see that the “maximize” function in the code is being used again, as opposed to the “minimize function” (which has to do with problem c)
If anybody know a solution to any one of these issues i would be very very thankful, I haven’t been able to find any code snippet on the web which could resolve any of these.
regards, Frederik