Lightbox XML Help please

[JUICE690]

Hi all, new here, after numerous hours googling I came across this forum and it looks as if someone may be abl to help me.

I'm Trying to add the Lightbox effect to my Flash movie but I just keep hitting a brick wall (metaphorically speaking, things haven't got that bad...yet)

Anyway to cut to the chase here's how my site works, brace yourselves

my_xml_data.xml >loads into> my_flash_portfolio.swf >loads into> my_dynamic_php_content.inc loads into>mywebsite.php

I think he .inc file can be ignored really as a stumbling block as it just contains the .swf's which I have working fine.

Here's the current build:- http://proofing.freeline-gfx.co.uk/p...ures_print.php ignore the silly button lol

What I'd like to add is the lightbox function when people click on the main image. I've read a few posts here explaining how to go about this but i'm still not able to get it working... well to be honest I'm not really sure how to implement it into my code.

Here's my Actionscript:- (well action script I purchased, jigged around to suit my design so it's probably a right mess, but it works!) Followed by my xml & php

// The following is for the thumbnails and big image
var myXML2:XML = new XML();
myXML2.ignoreWhite = true;
myXML2.load("portfolio.xml");
var Name:Array = Array();
var description:Array = Array();
var subdescription:Array = Array();
var imagenumber:Array = Array();
var clientdescription:Array = Array();
var imagedescriptiontwo:Array = Array();
var thumbPath:Array = Array();
var picPath:Array = Array();
var linkURL:Array = Array();
_root.currentCatID = 1;
_root.gapH = 0;
// horizontal space
myXML2.onLoad = function(success) {
	displayPage();
};
function displayPage() {
	mc_thumbnail._x=0;
	delete rightBtn.onEnterFrame;
	delete leftBtn.onEnterFrame;
	
	//remove existing thumbnails
	
	for (var i = 0; i<_root.numberOfItems; i++) {
		removeMovieClip(mc_thumbnail["img"+i]);
	}
	xml = myXML2.firstChild;
	_root.numberOfItems = xml.childNodes.length;
	_root.numberInCategory = 0;
	var itemsInThisCat:Array = Array();
	for (var i = 0; i<_root.numberOfItems; i++) {
		if (xml.childNodes[i].childNodes[9].childNodes[0].nodeValue == _root.currentCatID) {
			_root.numberInCategory++;
			itemsInThisCat.push(i);
		}
	}
	
	
	var numberOfImgs:Number = itemsInThisCat.length;
	var integer:Number = Math.floor(numberOfImgs/10);
	var remainder:Number = numberOfImgs%10;
	var maxRightClickTime:Number = 0;
	//if total imgs over 10
	if (remainder == 0) {
		maxRightClickTime = integer-1;
	} else {
		maxRightClickTime = integer;
	}
	var leftClickTime:Number = 0;
	var rightClickTime:Number = 0;
	var currentTarget:Number = 0;
	
	leftBtn._visible = false;
	//if total imgs less than 10 or equal 10
	if (numberOfImgs<11) {
		rightBtn._visible = false;
	} else {
		rightBtn._visible = true;
	}
	
	currentTarget = 0;
	
	rightBtn.onRelease = function() {
		leftBtn._visible = true;
		rightClickTime++;
		if (rightClickTime == maxRightClickTime) {
			rightBtn._visible = false;
		}
		
		currentTarget = 0-(mask._width+2)*rightClickTime;
		
		this.onEnterFrame = function() {
			diff = currentTarget-mc_thumbnail._y;
			mc_thumbnail._y += diff/4;
			
		};
		
	};
	
	
	leftBtn.onRelease = function() {
		rightBtn._visible = true;
		rightClickTime--;
		leftClickTime++;
		if (rightClickTime == 0) {
			leftBtn._visible = false;
		}
		
		
		currentTarget = 0-(mask._width+6)*rightClickTime;
		
		this.onEnterFrame = function() {
			diff = currentTarget-mc_thumbnail._y;
			mc_thumbnail._y += diff/4;
			
		};
		
	};
	
	
	for (var i = 0; i<itemsInThisCat.length; i++) {
		Name[i] = xml.childNodes[itemsInThisCat[i]].childNodes[0].childNodes[0].nodeValue;
		description[i] = xml.childNodes[itemsInThisCat[i]].childNodes[1].childNodes[0].nodeValue;
		subdescription[i] = xml.childNodes[itemsInThisCat[i]].childNodes[2].childNodes[0].nodeValue;
		imagenumber[i] = xml.childNodes[itemsInThisCat[i]].childNodes[3].childNodes[0].nodeValue;
		clientdescription[i] = xml.childNodes[itemsInThisCat[i]].childNodes[4].childNodes[0].nodeValue;
		imagedescriptiontwo[i] = xml.childNodes[itemsInThisCat[i]].childNodes[5].childNodes[0].nodeValue;
		thumbPath[i] = xml.childNodes[itemsInThisCat[i]].childNodes[6].childNodes[0].nodeValue;
		picPath[i] = xml.childNodes[itemsInThisCat[i]].childNodes[7].childNodes[0].nodeValue;
		linkURL[i] = xml.childNodes[itemsInThisCat[i]].childNodes[8].childNodes[0].nodeValue;

		
		mc_thumbnail.img.duplicateMovieClip("img"+i, i);
		mc_thumbnail.img0._x = 0;
		mc_thumbnail.img0._y = 80;
		mc_thumbnail.img1._x = 100;
		mc_thumbnail.img1._y = 80;
		mc_thumbnail.img2._x = 200;
		mc_thumbnail.img2._y = 80;
		mc_thumbnail.img3._x = 0;
		mc_thumbnail.img3._y = 140;
		mc_thumbnail.img4._x = 100;
		mc_thumbnail.img4._y = 140;
		mc_thumbnail.img5._x = 200;
		mc_thumbnail.img5._y = 140;
		
		if (thumbPath[i] == "undefined") {
			mc_thumbnail["img"+i].enabled = false;
		} else {
			mc_thumbnail["img"+i].enabled = true;
			mc_thumbnail["img"+i].img_mc.loadMovie(thumbPath[i]);
		}
		mc_thumbnail["img"+i].theImageName = Name[i];
		mc_thumbnail["img"+i].theLinkURL = linkURL[i];
		mc_thumbnail["img"+i].thePicPath = picPath[i];
		mc_thumbnail["img"+i].theImageDesc = description[i];
		mc_thumbnail["img"+i].theImageSubdesc = subdescription[i];
		mc_thumbnail["img"+i].theImageNum = imagenumber[i];
		mc_thumbnail["img"+i].theImageClientdesc = clientdescription[i];
		mc_thumbnail["img"+i].theImageDesctwo = imagedescriptiontwo[i];
		mc_thumbnail["img"+i].theWidth = imageWidth[i];
		mc_thumbnail["img"+i].theHeight = imageHeight[i];
		
		
	}
	//load the first big image   
		getFirst(picPath[0], linkURL[0], Name[0], description[0], subdescription[0], imagenumber[0], clientdescription[0], imagedescriptiontwo[0]);
}


//for loading first big image
function getFirst(thePicPath:String, theLinkURL:String, theImageName:String, theImageDesc:String, theImageSubdesc:String, theImageNum:String, theImageClientdesc:String, theImageDesctwo:String) {
	
	_root.main.big_mc.big_mc_image.textLoader._visible=false;
//define empty movieclip, my_mc and preloader object
var empty = _root.main.big_mc.big_mc_image.createEmptyMovieClip("container", "100");
empty._x = 0;
empty._y = 0;
_root.main.big_mc.big_mc_image.my_mc = new MovieClipLoader();
preload = new Object();
_root.main.big_mc.big_mc_image.my_mc.addListener(preload);

// here preload begins
preload.onLoadStart = function(targetMC) {
	_root.main.big_mc.big_mc_image.container._alpha =0;
	_root.main.big_mc.big_mc_image.textLoader._visible=true;
};
preload.onLoadProgress = function(targetMC, lBytes, tBytes) {
	percentage = int((lBytes / tBytes) * 100);
	_root.main.big_mc.big_mc_image.textLoader.loader.gotoAndStop(percentage);
	_root.main.big_mc.big_mc_image.textLoader.loader.autoSize=true;
	_root.main.big_mc.big_mc_image.textLoader.loader.text = Math.round((lBytes/tBytes)*100);
};
preload.onLoadComplete = function(targetMC) {
	changeColor();
	_root.main.big_mc.big_mc_image.container._alpha =100;
	_root.main.big_mc.big_mc_image.textLoader._visible = false;
	
};
//load image
_root.main.big_mc.big_mc_image.my_mc.loadClip(thePicPath, "_root.main.big_mc.big_mc_image.container");

_root.main.big_mc.onRelease = function() {
		getURL(theLinkURL, "_blank");
	};	
	
var alfa:Number = 0;
var percentage:Number = 0;
var amountLoaded:Number = 0;

if (theImageName != undefined) {
		_root.main.txtImageTitle.text=theImageName;
	} else {
		_root.main.txtImageTitle.text="";
	}
	
	if (theImageDesc != undefined) {
		_root.main.txtImageDescription.text=theImageDesc;
	} else {
		_root.main.txtImageDescription.text="";
	}
	
	if (theImageSubdesc != undefined) {
		_root.main.txtImageSubdescription.text=theImageSubdesc;
	} else {
		_root.main.txtImageSubdescription.text="";
	}
	
	if (theImageNum != undefined) {
		_root.main.txtImageNumber.text=theImageNum;
	} else {
		_root.main.txtImageNumber.text="";
	}
	
	if (theImageClientdesc != undefined) {
		_root.main.txtImageClientdescription.text=theImageClientdesc;
	} else {
		_root.main.txtImageClientdescription.text="";
	}
	
	if (theImageDesctwo != undefined) {
		_root.main.txtImageDescriptiontwo.text=theImageDesctwo;
	} else {
		_root.main.txtImageDescriptiontwo.text="";
	}

}


function changeColor():Void {
	var colorComponent:Number = 500;
	onEnterFrame = function () {
		myColor = new Color(_root.main.big_mc.big_mc_image.container);
		myColTr = new Object();
		colorComponent += (100-colorComponent)/10;
		myColTr = {ra:colorComponent, ga:colorComponent, ba:colorComponent};
		myColor.setTransform(myColTr);
		
		if (Math.round(colorComponent) == 100) {
			delete this.onEnterFrame;
			colorComponent=500;
		}
	};
}

[JUICE690]

<?xml version="1.0" encoding="iso-8859-1"?>
<folio>
		<site>
		<name>Wild Devon</name>
		<description>Devon Wildlife</description>
		<subdescription>Capricorn Imports are based in a 40,000 square feet showroom and distribution warehouse on the outskirts of Exeter in Devon. From within the distribution area we are able to offer a next day delivery service on hundreds of products including tables, chairs, stools and lounge.
</subdescription>
		<imagenumber>0</imagenumber>
		<clientdescription>De</clientdescription>
		<imagedescriptiontwo>Sub hea for</imagedescriptiontwo>
		<thumbnail>./images/2s.jpg</thumbnail>
		<pic>./images/2.jpg</pic>
		<url>./images/2.jpg</url>
		<categoryID>1</categoryID>
	</site>
	
		<site>
		<name>Wild Devon</name>
		<description>Devon Wildlife</description>
		<subdescription>Capricorn Imports are based in a 40,000 square feet showroom and distribution warehouse on the outskirts of Exeter in Devon. From within the distribution area we are able to offer a next day delivery service on hundreds of products including tables, chairs, stools and lounge.
</subdescription>
		<imagenumber>2</imagenumber>
		<clientdescription>De</clientdescription>
		<imagedescriptiontwo>Sub hea for</imagedescriptiontwo>
		<thumbnail>./images/2s.jpg</thumbnail>
		<pic>./images/2.jpg</pic>
		<url>./images/2.jpg</url>
		<categoryID>1</categoryID>
	</site>
	
		<site>
		<name>Wild Devon</name>
		<description>Devon Wildlife</description>
		<subdescription>Capricorn Imports are based in a 40,000 square feet showroom and distribution warehouse on the outskirts of Exeter in Devon. From within the distribution area we are able to offer a next day delivery service on hundreds of products including tables, chairs, stools and lounge.
</subdescription>
		<imagenumber>3</imagenumber>
		<clientdescription>De</clientdescription>
		<imagedescriptiontwo>Sub hea for</imagedescriptiontwo>
		<thumbnail>./images/3s.jpg</thumbnail>
		<pic>./images/3.jpg</pic>
		<url>./images/3.jpg</url>
		<categoryID>1</categoryID>
	</site>
	
		<site>
		<name>Wild Devon</name>
		<description>Devon Wildlife</description>
		<subdescription>Capricorn Imports are based in a 40,000 square feet showroom and distribution warehouse on the outskirts of Exeter in Devon. From within the distribution area we are able to offer a next day delivery service on hundreds of products including tables, chairs, stools and lounge.
</subdescription>
		<imagenumber>4</imagenumber>
		<clientdescription>De</clientdescription>
		<imagedescriptiontwo>Sub hea for</imagedescriptiontwo>
		<thumbnail>./images/2s.jpg</thumbnail>
		<pic>./images/2.jpg</pic>
		<url>./images/2.jpg</url>
		<categoryID>1</categoryID>
	</site>
	
		<site>
		<name>Wild Devon</name>
		<description>Devon Wildlife</description>
		<subdescription>Capricorn Imports are based in a 40,000 square feet showroom and distribution warehouse on the outskirts of Exeter in Devon. From within the distribution area we are able to offer a next day delivery service on hundreds of products including tables, chairs, stools and lounge.
</subdescription>
		<imagenumber>5</imagenumber>
		<clientdescription>De</clientdescription>
		<imagedescriptiontwo>Sub hea for</imagedescriptiontwo>
		<thumbnail>./images/1s.jpg</thumbnail>
		<pic>./images/1.jpg</pic>
		<url>./images/1.jpg</url>
		<categoryID>1</categoryID>
	</site>
	
		<site>
		<name>Wild Devon</name>
		<description>Devon Wildlife</description>
		<subdescription>Capricorn Imports are based in a 40,000 square feet showroom and distribution warehouse on the outskirts of Exeter in Devon. From within the distribution area we are able to offer a next day delivery service on hundreds of products including tables, chairs, stools and lounge.
</subdescription>
		<imagenumber>6</imagenumber>
		<clientdescription>De</clientdescription>
		<imagedescriptiontwo>Sub hea for</imagedescriptiontwo>
		<thumbnail>./images/3s.jpg</thumbnail>
		<pic>./images/3.jpg</pic>
		<url>./images/3.jpg</url>
		<categoryID>1</categoryID>
	</site>
	
	
////////////////////////////////////////PROJECT END/////////////////////////////////////////	


		<site>
		<name>Wild Devon</name>
		<description>Devon Wildlife</description>
		<subdescription>Capricorn Imports are based in a 40,000 square feet showroom and distribution warehouse on the outskirts of Exeter in Devon. From within the distribution area we are able to offer a next day delivery service on hundreds of products including tables, chairs, stools and lounge.
</subdescription>
		<imagenumber>1</imagenumber>
		<clientdescription>De</clientdescription>
		<imagedescriptiontwo>Sub hea for</imagedescriptiontwo>
		<thumbnail>./images/3s.jpg</thumbnail>
		<pic>./images/3.jpg</pic>
		<url>./images/3.jpg</url>
		<categoryID>2</categoryID>
	</site>
	
	
////////////////////////////////////////PROJECT END/////////////////////////////////////////	
	
	
</folio>

[JUICE690]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Freeline Graphics: Graphic Design Agency | Web Design | Exeter | Devon</title>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<meta name="keywords" content="" />
<link href="freeline_pages.css" rel="stylesheet" type="text/css" />
<!-- Lightbox++ -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" >
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" m

<script type="text/javascript">
   function LightboxDelegate(url,caption) {
   var objLink = document.createElement('a');
   objLink.setAttribute('href',url);
   objLink.setAttribute('rel','lightbox');
   objLink.setAttribute('title',caption);
   Lightbox.prototype.start(objLink);
}
</script>

</head>
<body>
<div id="wrap">
  <div id="main">
    <div id="main_top_left">
      <ul>
        <li class="brown"></li>
        <li class="freeline">Freeline Grraphics<br />
        <span class="graphic_design_agency">Graphic Design Agency</span></li>
      </ul>
    </div>
    <div id="main_top_right">
    </div>
   <div id="main_left">
     <?php 

$directory = './'; 

if (!empty($_GET['page'])) { 

   $page = $_GET['page']; 

   if (is_file($directory.$page.'.inc')) { 
      include $directory.$page.'.inc'; 
      } else { 
      print 'Sorry, no such page.'; 
   } 
} else { 
      $mypage = '1.inc'; 
      include $directory.$mypage; 
} 

?>
   </div>
  </div>
  <div id="nav_area">
    <div id="nav_one">
      <h1 style="background-image:url(images/blue_arrow.png); background-repeat:no-repeat;">Navigation</h1>
      <ul>
        <li><a href="http://proofing.freeline-gfx.co.uk/index.html">Home</a></li>
        <li><a href="about_freeline_graphics_exeter.html">About Freeline</a></li>
        <li><a href="exeter_design_portfolio.html">Portfolio</a></li>
        <li><a href="freeline_graphics_clients_exeter.html">Clients</a></li>
        <li><a href="contact_freeline_graphics_exeter.html">Contact</a></li>
      </ul>
    </div>
    <div id="nav_two">
      <h1 style="background-image:url(images/magenta_arrow.png); background-repeat:no-repeat;">Portfolio</h1>
      <ul>
        <li><a href="door_devon_options.php?page=7">Brochures &amp; Print</a></li>
        <li><a href="door_devon_options.php?page=7">Brand Identity</a></li>
        <li><a href="door_devon_options.php?page=7">Illustration</a></li>
        <li><a href="door_devon_options.php?page=7">Display</a></li>
        <li><a href="door_devon_options.php?page=7">Websites</a></li>
        <li><a href="door_devon_options.php?page=7"><br />
        <span class="email_footer">View by client</span></a></li>
      </ul>
    </div>
    <div id="nav_three">
      <h1 style="background-image:url(images/yellow_arrow.png); background-repeat:no-repeat;">Brochures
        &amp; Print</h1>
<ul>
        <li><a href="brochures_print.php?page=1">Conference Devon</a></li>
        <li><a href="brochures_print.php?page=2">Blackdown Hills AONB</a></li>
        <li><a href="brochures_print.php?page=3">Dolton County Council</a></li>
        <li><a href="brochures_print.php?page=4">Exeter City Council</a></li>
        <li><a href="brochures_print.php?page=5">Exeter Festival</a></li>
        <li><a href="brochures_print.php?page=6">Exeter Learning City</a></li>
        <li><a href="brochures_print.php?page=7">Learn Direct</a></li>
        <li><a href="brochures_print.php?page=8">Mid Devon District
            Council</a></li>
        <li><a href="brochures_print.php?page=9">Teignbrige District
            Council</a></li>
        <li><a href="brochures_print.php?page=10">Torbay Learning for
            Skills</a></li>
        <li><a href="brochures_print.php?page=11">Royal Albert Memorial Museum</a></li>
        <li><a href="brochures_print.php?page=12">South Hams District
            Council</a></li>
        <li><a href="brochures_print.php?page=13">Westcountry Ambulance</a></li>
        <li><a href="brochures_print.php?page=14">Services</a></li>

      </ul>
    </div>
</div>
  <div id="lower_shadow"></div>
</div>
</body>
</html>

[JUICE690]

I appreciate any help on this, thanks in advance

Indecently, I have lightbox++ working on this page (without any of my other actionscript & into a html document as apposed to the .php one i'm using)

http://proofing.freeline-gfx.co.uk/indexlightbox.html <just click the silly looking button

[Medyman]

Have you seen my demo here? The source code is linked at the bottom.

If you haven't, have a look and see if it helps you out any. Getting AS + Lightbox to work can be a fickle matter. Hopefully, my code will help (b/c I don't really have the time to troubleshoot through all of that code at the moment).

You might also want to check this out.

[JUICE690]

Hi Medyman,

Thanks for the links, I had seen them both & a couple other threads where you've helped people out. I have lightbox++ working fine in a quickly mocked up .html file (in the above link) I just don't know how to implement it into my actionscript & get it running with my .xml file, this level of coding is way above my head.

Completely understand you've got other things to be doing than sorting out my actionscript but if you do find a moment to look over the action script I'd appreciate any input. I'm pretty sure everything else is fine. If it would make it any easier I could zip up the files and upload them?

Thanks for the reply

[JUICE690]

Update:

I've got the lightbox working o.k now, but I still need to find out how to tell it to grab the images from my .xml (at the moment I've directed it to a single image in my images folder for testing purposes)

http://proofing.freeline-gfx.co.uk/p...ures_print.php

[Medyman]

Well, in your code, you have all the variables you need assigned in this code block:

mc_thumbnail["img"+i].theLinkURL = linkURL[i];
mc_thumbnail["img"+i].thePicPath = picPath[i];
mc_thumbnail["img"+i].theImageDesc = description[i];
mc_thumbnail["img"+i].theImageSubdesc = subdescription[i];
mc_thumbnail["img"+i].theImageNum = imagenumber[i];
mc_thumbnail["img"+i].theImageClientdesc = clientdescription[i];
mc_thumbnail["img"+i].theImageDesctwo = imagedescriptiontwo[i];
mc_thumbnail["img"+i].theWidth = imageWidth[i];
mc_thumbnail["img"+i].theHeight = imageHeight[i];

I looks like you're looking for the "thePicPath" property of the loaded movieclip.

[JUICE690]

Should i be looking into how the implement- mc_thumbnail["img"+i].thePicPath = picPath[i];

Into

big_mc.onRelease = function() {
getURL("javascript:LightboxDelegate('images/freeline_logo.jpg");
}

Sorry this is all very new to me, as mentioned above this is code I bought and manipulated to suite my layout needs so although I understand what some of the code is doing I don't understand the language well enough to write my own.

So far I've managed to do everything using a lengthy trial and many, many error processes!

Thanks for your help btw

[Medyman]

If I understand your code correctly (which is kind of unwieldy and somewhat bloated), all you should need to do is replace 'images/freeline_logo.jpg' with thePicPath.

So, instead of:

_root.main.big_mc.onRelease = function() {
	getURL(theLinkURL, "_blank");
};

Replace with something like this:

_root.main.big_mc.onRelease= function() {
   getURL("javascript:LightboxDelegate(thePicPath)");
}

I *think* that should work.