Photo Album

sub_sonic · July 28, 2003, 8:21pm

Ok, I found this awesome component here:

http://www.mr10.net/components/gallery/

I got it all set up and it works fine all except for one thing that I can’t figure out how to do. When the user clicks the larger thumbnail, I would like it to either go to a page where the user can save the image, or start downloading the image. If anyone can help it is greatly appreciated.

system · August 5, 2003, 1:54pm

So sorry to butt-in on your thread, subzero, but since it’s related to the component, I didn’t want to start a new thread…

Anyone know how to make this work if I do a loadmovie of this gallery on top of my mainmovie ? All I get is http://www.rh71.com/temp/picturesScreen2.jpg … but when I don’t load it on top of a movie, it works just fine --> Hi I saw your link to the mr10.net photo album through the kirupa forums. I’m trying to get it to work myself and haven’t been able to get the pics to load when doing a loadmovie. I was wondering if you had to do some tweaking to get it to work with loadmovie (on top of a main .swf) or are you just using the album as a main .swf already ?

When I do loadmovie, it shows up like http://www.rh71.com/temp/picturesScreen2.jpg (pics don’t load, but it knows how many thumbnails are present in the xml file). It has something to do with my image paths not working since I am loading it into another movie.

Because when I don’t do a loadmovie and make it its own standalone .swf, it works just fine --> http://www.rh71.com/projects/henryandterri/gallery/gallery.html … has to have something to do with paths or code in the “thumbnail gallery” component.

Here’s the component’s code (sorry I’m desperate)… what do I have to modify ?

#initclip

//— ::[gallery component]:: -------------------------------------//
//------ Gallery Component 1.2 by mr10 [maarten@mr10.net] ---------//
// //
//------ Demo at [www.mr10.net/components/gallery/] ---------------//

_global.GalleryClass = function (){
this.init();
}

var p = GalleryClass.prototype = new FUIComponentClass();

p.setSize = function(w,h){
super.setSize(w,h);

this.componentWidth = w;
this.componentHeight = h;
this.stageW = w;
this.stageH = h;
	
this.boundingBox_mc._width = w;
this.boundingBox_mc._height = h;

this.layout();

}

p.setTnSize = function(width,height) {
this.tnSizeW = width;
this.tnSizeH = height;
this.layout();
}

p.getTnWidth = function() {
return this.tnSizeW;
}

p.getTnHeight = function() {
return this.tnSizeH;
}

p.setTnBorder = function(bSize) {
this.tnBorder = bSize;
this.layout();
}

p.getTnBorder = function() {
return this.tnBorder;
}

p.getTnSpacing = function() {
return this.tnSpacing;
}

p.setTnSpacing = function(sSize) {
this.tnSpacing = sSize;
this.layout();
}

p.setColumns = function(nr) {
this.maxColumns = nr;
this.layout();
}

p.getColumns = function() {
return this.maxColumns;
}

p.setXMLFile = function(file) {
this.XMLFile = file;
this.refreshGallery();
}

p.getXMLFile = function() {
return this.XMLFile;
}

p.getXMLNode = function() {
return this.XMLNode;
}

p.setActiveTn = function(id) {
this.activeTn = id;
this.onEnterFrame = function(){
if (this.loading == false){
var tnPos = this.tnStage.content[‘box’ + id]._y
if((tnPos + this.tnSizeH) > this.stageH)
this.pane.setScrollPosition(0,tnPos - this.tnSpacing);

		this.tnStage.content['box' + id].onRelease();
		delete this.onEnterFrame;
	}
}

}

p.getActiveTn = function() {
return this.activeTn;
}

p.getTotalTns = function() {
return this.totalImages;
}

p.getGalleryWidth = function() {
return this.stageW;
}

p.getGalleryHeight = function() {
return this.stageH;
}

p.getTnStageWidth = function() {
return this.tnStageW;
}

p.getTnStageHeight = function() {
return this.tnStageH;
}

p.setTnStageSide = function(alignment) {
//‘left’, 'right’
if(alignment == undefined)
alignment == ‘left’

this.tnStageSide = alignment;
this.layout();

}

p.getTnStageSide = function() {
return this.tnStageSide;
}

p.setTnTitleStyle = function(style){
//‘name’, 'title’
this.tnTitleStyle = style;
this.refreshGallery();
}

p.getTnTitleStyle = function(){
return this.tnTitleStyle;
}

p.setLabelHeight = function(dy){
this.labelOffset = dy;
}

p.getLabelHeight = function(){
return this.labelOffset;
}

p.getMaxLabelHeight = function(){
return this.maxLabelOffset;
}

p.getPicStageWidth = function() {
return this.picStageW;
}

p.getPicStageHeight = function() {
return this.picStageH;
}

p.init = function(){
super.init();

this.componentWidth = this._width;
this.componentHeight = this._height;
this._xscale = this._yscale = 100;
this.boundingBox_mc._visible = 0;

// global settings	
if(this.tnSizeW == undefined)		
	this.tnSizeW = 84;

if(this.tnSizeH == undefined)		
	this.tnSizeH = 84;

if(this.maxColumns == undefined)	
	this.maxColumns = 3;

if(this.tnBorder == undefined)
	this.tnBorder   = 12;

if(this.tnSpacing == undefined)
	this.tnSpacing  = 12;
	
this.scrollBarW = 16; // read only

this.setClickHandler(this.clickHandler);

this.loading = true;
this.inited = true;
this.setSize(this.componentWidth, this.componentHeight);

if(this.XMLFile)
	this.load(this.XMLFile);

}

p.layout = function(){
// stage sizes
this.tnStageW = this.maxColumns * this.tnSizeW + (this.maxColumns - 1) * this.tnSpacing + 2 * this.tnBorder + this.scrollBarW; //read only

this.tnStageH   = this.stageH;

this.medStageW  = this.stageW - this.tnStageW;
this.medStageH  = this.stageH;

this.medSizeW   = this.medStageW - 2 * this.tnBorder;
this.medSizeH   = this.medStageH - 2 * this.tnBorder;

if(this.tnStageW &gt;= this.StageW){
	var nwMaxColumns = Math.floor(this.StageW/(this.tnSizeW + this.tnSpacing + this.tnBorder));
	trace('--::[Gallery Component Notice]::--');
	trace('  the thumbnail stage is to wide:'); 
	trace('  the maximum number of columns');
	trace('  with these settings is: ' + nwMaxColumns);
	delete nwMaxColumns;
}

// stage placement
if(this.tnStageSide == 'left'){
	this.tnStageX   = 0;
	this.medStageX  = this.tnStageW;
} else {
	this.tnStageX   = this.stageW - this.tnStageW;
	this.medStageX  = 0;
}

this.tnStageY   = 0;
this.medStageY  = 0;

// render pane
this.attachMovie("FScrollPaneSymbol", "pane", 50);
this.pane.setSize(this.tnStageW,this.tnStageH);
this.pane._x = this.tnStageX;
this.pane._y = this.tnStageY;
this.pane.VScroll = true;
this.pane.HScroll = false;
this.pane.boundingBox_mc._visible = 0;

}

*** continued in next post ***

system · August 5, 2003, 1:55pm

p.refreshGallery = function(){
if(!this.inited){
this.init();
} else {
this.load(this.XMLFile);
}
}

p.loaded = false;
p.load = function(data){
var isXML,xDoc;
isXML = data instanceof XML;
if(!isXML && data != undefined){
(xDoc = new XML()).parent = this;
xDoc.onLoad=this._onLoad;
xDoc.ignoreWhite = true;
xDoc.load(data);
return;
}
this.loaded = true;
this.renderGallery(data);
}

p.getLoaded = function(){
return this.loaded;
}

p._onLoad=function(){
this.parent.load(this);
}

p.setClickHandler = function(chng,obj){
this.handlerObj = (arguments.length<2) ? this._parent : obj;
this.clickHandler = chng;
}

p.executeCallBack = function(id)
{
this.handlerObjthis.clickHandler;
}

p.renderGallery = function(node) {
this.XMLNode = node;

// re-init gallery variables
this.dir = node.firstChild.attributes.directory;

// xml parsing
this.totalImages        = node.firstChild.childNodes.length;
this.firstImageNode     = node.firstChild.firstChild;
this.currentImageNode   = this.firstImageNode;

this.startGallery();

}

p.startGallery = function(){
this.imMed.removeMovieClip();

this.row          = 0;
this.column       = 0;
this.currentIndex = 1;

// render gallery
this.loading = true;

// turn off pane outline
this.pane.boundingBox_mc._visible = 0;

var tStage = this.createEmptyMovieClip('tnStage',1);
var tContent = tStage.createEmptyMovieClip('content',1,{_x:this.tnBorder, _y:this.tnBorder});

//dirty fix for weird pane behaviour: pane doesn't accept _x,_y offset in an empty movieclip...
tContent.lineStyle(0,0xFFFFFF,0);
tContent.lineTo(1,1);

this.pane.setScrollContent(tStage);
this.contentMC = this.pane.getScrollContent();
this.first = false;
this.loadNext(this.firstImageNode);

}

p.loadNext = function(imageNode){
if (imageNode == null) {
this.statusText = “”;
this.loading = false;
if(!this.first){
if(!this.ActiveTn)
this.setActiveTn(1);
this.first = true;
}
break;
} else {
var pane_content_mc = this.contentMC;
var tn_mc = pane_content_mc.content.createEmptyMovieClip(“box” + this.currentIndex, this.currentIndex);

		// thumbnail bg
		tn_mc.attachMovie('tn_holder_mc', 'bg', 1);
		tn_mc.bg._width = this.tnSizeW;
		tn_mc.bg._height = this.tnSizeH;

		tn_mc._name = "box" + this.currentIndex;
		tn_mc.tnID = this.currentIndex;
		
		if(this.tnTitleStyle != undefined){
			tn_mc.controller = this;
			
			//place label mc
			var label = tn_mc.attachMovie('FLabelSymbol', 'label_mc', 2);
			label._x = 0;
			label._y = this.tnSizeH;
			
			label.labelField.autoSize = 'left';
			label.labelField.selectable = false;
			label.labelField.multiline = true;
			label.labelField.wordWrap = true;
			
			if(this.tnTitleStyle == 'title'){
				//fill with title attribute from xml
				label.setLabel(imageNode.attributes.title);
			} else if (this.tnTitleStyle == 'name') {
				//fill with jpegUrl attribute from xml
				label.setLabel(imageNode.attributes.jpegURL);
			}
			
			if(this.maxLabelOffset &lt; label._height)
				this.maxLabelOffset = label._height;
				
			if(this.labelOffset == undefined)
				this.labelOffset = 17;
			
		}
		
		// place in rows & columns
		tn_mc._x = this.tnBorder + (this.column *  (this.tnSizeW + this.tnSpacing));
		tn_mc._y = this.tnBorder + (this.row *  (this.tnSizeH + this.tnSpacing + this.labelOffset));
		
		if (this.column &lt; (this.maxColumns - 1)){
			this.column++;
		} else {
			this.column = 0;
			this.row++;
		}
		
		//if found: thumbnail image is loaded here
		var checkFile = new LoadVars();
		checkFile._tl = this;
		checkFile.onLoad = function(success){ 
			if(success){
				this._tl.image(tn_mc, this._tl.dir + '/' + imageNode.attributes.thumbURL,this._tl.tnSizeW,this._tl.tnSizeH);
			} else {
				trace('--::[Gallery Component Notice]::--');
				trace('  "' + this._tl.dir + '/' + imageNode.attributes.thumbURL + '" does not exsist!

');
//skip to next image
this._tl.currentIndex++;
this._tl.statusText = “”;
this._tl.currentImageNode = this._tl.currentImageNode.nextSibling;
this._tl.loadNext(this._tl.currentImageNode);
}
delete checkFile;
}
checkFile.load(this.dir + ‘/’ + imageNode.attributes.thumbURL);

		tn_mc.useHandCursor();
		tn_mc.onRelease  = function(){
			var th = this._parent._parent._parent
			th.activeTn = this.tnID;
			
			// changes the bg color of the selected thumbnail
			th.oldactive = th.active;
			var tnorm = th.oldactive;
			tnorm.bg.gotoAndStop('normal');
			delete tnorm;
			th.active = this;
			var tact = th.active;
			tact.bg.gotoAndStop('active');
			delete tact;
	
			// create stage for medium(large) image
			var pic_mc = th.createEmptyMovieClip("image_mc",1000);
			pic_mc._x = th.medStageX + th.tnBorder;
			pic_mc._y = th.medStageY + th.tnBorder;
			
			if(th.clickHandler != '' && th.clickHandler != undefined){
				pic_mc.onRelease = function(){
					th.executeCallBack(th.activeTn);
				}
			}
			
			// bg stuff of large image
			var content_mc = pic_mc.createEmptyMovieClip("image_content_mc",1);
			var pic_bg = content_mc.attachMovie('pic_holder_mc', 'bg', 1);
			pic_bg.frame3._width = th.medSizeW;
			pic_bg.frame3._height = th.medSizeH;
			pic_bg.frame2._width = th.medSizeW - 1;
			pic_bg.frame2._height = th.medSizeH - 1;
			pic_bg.frame1._width = th.medSizeW - 2;
			pic_bg.frame1._height = th.medSizeH - 2;
			pic_bg.frame1._x = pic_bg.frame1._y = 1;
			
			//comments to go with image
			th.imageText = imageNode.firstChild.nodeValue;
			
			//load image
			th.image(content_mc, th.dir + '/' + imageNode.attributes.jpegURL,th.medSizeW,th.medSizeH);
				
		}
		pane_content_mc.stageBG._height = pane_content_mc.content._height + 2 * this.tnBorder;
		this.pane.setScrollContent(pane_content_mc);
	}
	this.pane.refreshPane();

}

// load image
p.image = function(trgt, file,imageSizeW,imageSizeH) {
this.statusText = “loading images: please wait…”;

var controller = this;
var container = trgt.createEmptyMovieClip("container", 100);
var pic  = container.createEmptyMovieClip("img", 102);	
var crt  = container.createEmptyMovieClip("control", 103);

// preloader stuff
var ldr = container.attachMovie("loader", "loader", 104);
ldr._xscale = ldr._yscale = imageSizeW / 4;
ldr._x = (imageSizeW - ldr._width)/2;
ldr._y = (imageSizeH - ldr._height)/2;
ldr.bar_mc._xscale = 1;

pic.loadMovie(file);
pic.cnt = 0;
crt.onEnterFrame = function() {
	pic._visible = false;
	var ready = int(pic.getBytesLoaded()*100/pic.getBytesTotal());
	
	if(ready &gt; 0 && ready &lt; 100)
		ldr.bar_mc._xscale = ready;
		
	if (ready == 100 && pic.getBytesLoaded() &gt; 4) {
		pic.cnt++;
		if(pic.cnt&gt;1){
			delete crt.onEnterFrame;
			removeMovieClip(ldr);
			pic._visible = true;
			
			// find pic width & height
			var ratio;
			var pw = pic._width;
			var ph = pic._height;
			
			// find if pic is portrait or landscape
			if (pw &gt;= ph){
				ratio = imageSizeW / pw;
				if (ph * ratio &gt; imageSizeH)
					ratio = imageSizeH / ph;
			} else {
				ratio = imageSizeH / ph;
				if (pw * ratio &gt; imageSizeW)
					ratio = imageSizeW / pw;
			}
			
			// resize the pic to fit in medStage
			pic._width = pw * ratio - 2;
			pic._height = ph* ratio - 2;
			
			// place pic in the middle of medStage
			pic._x = Math.round((imageSizeW - pic._width)/2);
			pic._y = Math.round((imageSizeH - pic._height)/2);
			
			//next image
			controller.currentIndex++;
			controller.statusText = "";
			controller.currentImageNode = controller.currentImageNode.nextSibling;
			controller.loadNext(controller.currentImageNode);
		}
	}
}

}

Object.registerClass(“FGallerySymbol”, GalleryClass);

delete p;

#endinitclip

this.deadPreview._visible = 0;

Topic	Replies	Views
PLS HELP: Regarding the "Photo Gallery" tutorial	73	October 7, 2003
Basic Dynamic Photo Gallery	47	January 27, 2005
Photo gallery woe	44	April 29, 2006
Nest kirupa's photo gallery into your movie	82	December 22, 2006
Help with loadMovie?	42	April 24, 2005

Photo Album

Follow:

Popular

Loose Ends

Photo Album

Related topics

Follow:

Popular

Loose Ends