enlarge quicktime mov mp4 in pop up window

**Charlene1** · 01-25-2008, 04:47 AM

Hi there! I'm trying to open a pop up window from flash that plays a quicktime movie. Then you have a button that you can click to enlarge the movie to screen size (and then of course a button on that screen to reduce it back to small size). Such as - http://www.showreelsonline.com/INDEPENDENT/Floyd_Albee

So far I have the pop up window working with the movie playing, but can not get the enlarge/reduce function working. I borrowed a lot of the code from this site, but it seems that some of the code is generated, and I can't figure out what I need to write to make this happen.

I'm good with html/css/flash and know how to put javascript into my script but don't know how to write it - so if anyone could help - it would be much appreciated!

Code:

<script src="AC_QuickTime.js" language="JavaScript" type="text/javascript"></script>

<script type="text/JavaScript">
   var W = 775;
   var H = 516;
   var X = (screen.availWidth - W) / 2;
   var Y = (screen.availHeight - H) / 2;
	if(screen.availWidth < 850 && 1 == 1.6)  {
		var scale = 1.6;
	} else {
   		var scale = '1';
   	}
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function changeMovie() {
	
	var movie = $('selectMovie').options[$('selectMovie').selectedIndex].value;
	location.href = movie + '&scale=' + scale;
	//var newmovie = QT_GenerateOBJECTText(movie, '100%', '100%', '', 'controller', 'true', 'bgcolor', 'black', 'SCALE', scale, 'autoplay', 'true', 'loop', 'false');
	//$('movie').update(newmovie);
}
function doScale(scale) {
	if(scale == 2 || scale == 1.6) {
		//$('scaleimage').src = "images/reduce.gif";
		moveTo(0,0);
		self.resizeTo(screen.availWidth ,screen.availHeight);
		
	} else if(scale == 1) {
		scale = 1;
		//$('scaleimage').src = "images/enlarge.gif";
		self.resizeTo(W,H);
		moveTo(X,Y);
	}
}
function changeScale() {
	if(scale == 1) {
		scale = 1.6;
		changeMovie();
	} else if(scale == 2 || scale == 1.6) {
		scale = 1;
		changeMovie();
	}
}
doScale(scale);
//-->

</script>

</head>
<body bgcolor="#000000" onload=";MM_preloadImages('images/enlarge_over.gif','images/reduce_over.gif');">

<div style="background: #000 url(images/title_classic.jpg) no-repeat top left; height:40px; padding-left:700px; padding-top:5px;">
  <a style="cursor: pointer;" onclick="javascript:changeScale()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('scaleimage','','images/enlarge_over.gif',1)">
  <img src="images/enlarge.gif" alt="larger size" name="scaleimage" id="scaleimage" border="0" height="30" width="30">
  </a>
</div>
<div>
<script language="JavaScript" type="text/javascript">
  QT_WriteOBJECT_XHTML('reels/falbee_classic.mp4', '100%', '100%', '',
    'autoplay', 'true',
    'bgcolor', '#000000',
	'loop', 'false',
	'SCALE', scale,
	'controller', 'true',
    'align', 'middle'); 
</script>

</div>

The enlarge button should show up on the smaller window, and the reduce button should show up on the larger window (if that wasn't obvious). I'm not sure I need the changeMovie function - I think this is just for the option box to select a different movie?

Thank you in advance! I soooo appreciate your help!!

**jscheuer1** · 01-25-2008, 05:20 AM

Well, those are just ordinary images, do you have them? Are they in the location that the page expects to see them?

**Charlene1** · 01-25-2008, 05:54 AM

Originally Posted by jscheuer1

Well, those are just ordinary images, do you have them? Are they in the location that the page expects to see them?

Yes - the images are there. it's not the images that are as important as the quicktime movie to enlarge when the enlarge image is clicked on.

**jscheuer1** · 01-25-2008, 06:15 AM

If the images are there, why aren't they showing up? I think the name or path to them might be wrong, or they might not be there at all. It is hard to just guess about these things though, so:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**Charlene1** · 01-25-2008, 06:36 AM

[QUOTE=jscheuer1;127848]If the images are there, why aren't they showing up? I think the name or path to them might be wrong, or they might not be there at all. It is hard to just guess about these things though, so:

http://www.charleneburris.com/floyd/floyd.html
click on "reel" - then the "classics" reel has an actual enlarge button. I've got the pop up working with the quicktime movie playing, but can't get the enlarge button working.

The functionality of the reels should be like this - http://www.showreelsonline.com/reels...ee current.mp4 where you can click on a reel and the quicktime movie opens in a pop up window, and when you click on the enlarge button the movie opens full screen, the you can click on the "smaller" button and it goes back to the original size.

THANK YOU!!

**jscheuer1** · 01-25-2008, 06:53 AM

OK, in your posted code you have:

Code:

<div style="background: #000 url(images/title_classic.jpg) no-repeat top left; height:40px; padding-left:700px; padding-top:5px;">
  <a style="cursor: pointer;" onclick="javascript:changeScale()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('scaleimage','','images/enlarge_over.gif',1)">
  <img src="images/enlarge.gif" alt="larger size" name="scaleimage" id="scaleimage" border="0" height="30" width="30">
  </a>
</div>
<div>

But I don't see anything like that in the source code of the pop ups that pop up from the page you just gave me a link to. Now, I didn't mention this before because I thought if you weren't seeing the images, you at least had an attempt in your source code to display them, as was shown in your post. But code for the images must be there in the source because, as I said, they are ordinary images - and once you have that, it must point to actual copies of the images on the server.

**Charlene1** · 01-27-2008, 07:15 PM

Allright - so anyone looking to enlarge a quicktime movie - we figured it out. It starts the movie over every time you enlarge or reduce, but personally I prefer that because I hate when i miss the beginning while waiting for it to enlarge.

Code:

<!-- saved from url=(0022)http://internet.e-mail -->
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript" src="AC_QuickTime.js"></script>
<script language="javascript" type="text/javascript">
var IE = (navigator.appName.indexOf("Microsoft") > -1);
var origWidth = 0;
var origHeight = 0;
var origX = 0;
var origY = 0;
var scale = '1';

function maximize()
{
	scale = '1.6';
	this.moveTo(0,0);
	this.resizeTo(screen.availWidth, screen.availHeight);
	writeQT();
}
function resizeOrig()
{
	scale = '1';
	this.resizeTo(origWidth, origHeight);
	this.moveTo(origX, origY);
	writeQT();
}
function getSize()
{
	origWidth = (IE?document.body.clientWidth:window.innerWidth);
	origHeight = (IE?document.body.clientHeight:window.innerHeight);
	origX = (IE?window.screenLeft:window.screenX);
	origY = (IE?window.screenTop:window.screenY);
}

function writeQT()
{
	var qtDiv = document.getElementById("divQT");

	qtDiv.innerHTML = "";
	qtDiv.innerHTML = QT_WriteOBJECT_XHTML('reels/movie.mp4', '100%', '100%', '',
    'autoplay', 'true',
    'bgcolor', 'black',
	'loop', 'false',
	'scale', scale,
	'controller', 'true',
    'align', 'middle'); 
}
</script>
</head>
<body onload="writeQT();getSize();">
<p><a href="javascript:maximize();">maximize</a></p>
<p><a href="javascript:resizeOrig();">resize to original</a></p>
<div id="divQT" style="text-align:center;vertical-align:middle;"></div>
</body>
</html>

and the the last line of code in the AC_QuickTime.js file, we changed to

Code:

function QT_WriteOBJECT_XHTML()
{
	//document.writeln(_QTGenerate("QT_WriteOBJECT_XHTML", true, arguments));
	return _QTGenerate("QT_WriteOBJECT_XHTML", true, arguments);
}

I don't have it so the buttons change, both buttons are on both sizes - maybe I'll figure that out for a later date. Anyways - hope this helps somebody!

Thread: enlarge quicktime mov mp4 in pop up window

Thread Tools

Search Thread

enlarge quicktime mov mp4 in pop up window

Bookmarks

Bookmarks

Posting Permissions