Popup opent niet correct.

Riesjart01 · 2 feb 2007

Hoi,

Ik ben zojuist nieuw hier, en heb een vraag. Ik maak regelmatig voor me zelf websites.
Nu ben ik met een plaatjes popup bezig maar hij werkt niet zoals hij moet werken.
Ik heb internet al af gezocht maar kon me probleem niet vinden.

De popup werkt op de site goed maar zet ik de popup/plaatje in een Frame
dan opent de popup links uit de boven hoek en niet vanuit het plaatje.
nu heb ik van alles geprobeert, maar kom er niet uit en ik vraag jullie dus om hulp.

Ik heb het online gezet zodat het voor jullie ook wat makkelijker wordt.

.....

De bovenste plaatje staat in een frame en de onderste dus niet.

Alvast Bedankt!

Vr. Groet Richard

peter vazed · 3 feb 2007

Ik zie geen probleem.
Hier de code:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	
	<head>
		<title>
			(Type a title for your page here)
		</title>
		<meta name="GENERATOR" content="Arachnophilia 4.0">
		<meta name="FORMATTER" content="Arachnophilia 4.0">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

      BODY {
       margin: 0px 0px 0px 0px;
       font-family: verdana, arial, helvetica;
       background-image: url(layout/sfeerstrook/site_home.jpg);
       background-repeat: no-repeat;      
       font-size: 14px;
       font-color: #000000;
       color: #000066;
}
.info{
border: dotted 3px #000000;
padding:10px;
}
</style>
		
<script type="text/javascript">
<!--
function ImageExpander(oThumb, sImgSrc)
{
	// store thumbnail image and overwrite its onclick handler.
	this.oThumb = oThumb;
	this.oThumb.expander = this;
	this.oThumb.onclick = function() { this.expander.expand(); }

	// record original size
	this.smallWidth = oThumb.offsetWidth;
	this.smallHeight = oThumb.offsetHeight;

	this.bExpand = true;
	this.bTicks = false;

	// self organized list
	if ( !window.aImageExpanders )
	{
		window.aImageExpanders = new Array();
	}
	window.aImageExpanders.push(this);

	// create the full sized image.
	this.oImg = new Image();
	this.oImg.expander = this;
	this.oImg.onload = function(){this.expander.onload();}
	this.oImg.src = sImgSrc;
}

ImageExpander.prototype.onload = function()
{
	this.oDiv = document.createElement("div");
	document.body.appendChild(this.oDiv);
	this.oDiv.appendChild(this.oImg);
	this.oDiv.style.position = "absolute";
	this.oDiv.expander = this;
	this.oDiv.onclick = function() {this.expander.toggle();};
	this.oImg.title = "Klik om te verkleinen.";
	this.bigWidth = this.oImg.width;
	this.bigHeight = this.oImg.height;

	if ( this.bExpand )
	{
		this.expand();
	}
	else
	{
		this.oDiv.style.visibility = "hidden";
		this.oImg.style.visibility = "hidden";
	}
}
ImageExpander.prototype.toggle = function()
{
	this.bExpand = !this.bExpand;
	if ( this.bExpand )
	{
		for ( var i in window.aImageExpanders )
			if ( window.aImageExpanders[i] !== this )
				window.aImageExpanders[i].reduce();
	}
}
ImageExpander.prototype.expand = function()
{
	// set direction of expansion.
	this.bExpand = true;

	// set all other images to reduce
	for ( var i in window.aImageExpanders )
		if ( window.aImageExpanders[i] !== this )
			window.aImageExpanders[i].reduce();

	// if not loaded, don't continue just yet
	if ( !this.oDiv ) return;

	// hide the thumbnail
	this.oThumb.style.visibility = "hidden";

	// calculate initial dimensions
	this.x = this.oThumb.offsetLeft;
	this.y = this.oThumb.offsetTop;
	this.w = this.oThumb.clientWidth;
	this.h = this.oThumb.clientHeight;

	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";
	this.oDiv.style.visibility = "visible";
	this.oImg.style.visibility = "visible";

	// start the animation engine.
	if ( !this.bTicks )
	{
		this.bTicks = true;
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);
	}
}
ImageExpander.prototype.reduce = function()
{
	// set direction of expansion.
	this.bExpand = false;
}
ImageExpander.prototype.tick = function()
{
	// calculate screen dimensions
	var cw = document.body.clientWidth;
	var ch = document.body.clientHeight;
	var cx = document.body.scrollLeft + cw / 2;
	var cy = document.body.scrollTop + ch / 2;


	// calculate target
	var tw,th,tx,ty;
	if ( this.bExpand )
	{
		tw = this.bigWidth;
		th = this.bigHeight;
		if ( tw > cw )
		{
			th *= cw / tw;
			tw = cw;
		}
		if ( th > ch )
		{
			tw *= ch / th;
			th = ch;
		}
		tx = cx - tw / 2;
		ty = cy - th / 2; 
	}
	else
	{
		tw = this.smallWidth;
		th = this.smallHeight;
		tx = this.oThumb.offsetLeft;
		ty = this.oThumb.offsetTop;
	}
	// move 5% closer to target
	var nHit = 0;
	var fMove = function(n,tn) 
	{
		var dn = tn - n;
		if ( Math.abs(dn) < 3 )
		{
			nHit++;
			return tn;
		}
		else
		{
			return n + dn / 10;
		}
	}
	this.x = fMove(this.x, tx);
	this.y = fMove(this.y, ty);
	this.w = fMove(this.w, tw);
	this.h = fMove(this.h, th);

	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";

	// if reducing and size/position is a match, stop the tick
	if ( !this.bExpand && (nHit == 4) )
	{
		this.oImg.style.visibility = "hidden";
		this.oDiv.style.visibility = "hidden";
		this.oThumb.style.visibility = "visible";

		this.bTicks = false;
	}

	if ( this.bTicks )
	{
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);
	}
}
//-->
</script>
	</head>
	
	<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
		
		<center>
			De tabel:
		</center>
		<br>
		
		
		<table border="10" cellpadding="3" width="790" height="309" align="center">
			  
			<tr>
				    
				<td align="right" valign="top" width="53%" nowrap height="117">
				</td>
				    
				<td valign="top" width="16%" nowrap height="117">
					      
					<a href="#" onclick="this.href = 'javascript:void(0);';"><img src="cabrio-2tone-1.jpg" width="58" height="43" alt="" title="Klik om groot plaatje te zien." onclick="new ImageExpander(this, 'cabrio-2tone-1.jpg');"></a>
				</td>
				
				    
				<td valign="top" width="12%" nowrap height="117">
				</td>
				
				    
				<td valign="top" width="17%" nowrap height="117">
				</td>
				  
			</tr>
			  
			<tr>
				    
				<td align="right" valign="top" width="53%" height="85">
					<br>
					    
				</td>
				    
				<td valign="top" width="16%" height="85">
				</td>
				    
				<td valign="top" width="12%" height="85">
				</td>
				    
				<td valign="top" width="17%" height="85">
				</td>
				  
			</tr>
			
		</table>
		<br>
		<center>
			Het losse plaatje:
		</center>
		<br>
		
		
		   
		<a href="#" onclick="this.href = 'javascript:void(0);';"><img src="cabrio-geel-fr.jpg" width="51" height="38" alt="" title="Klik om groot plaatje te zien." onclick="new ImageExpander(this, 'cabrio-geel-fr.jpg');"></a>
		<br>
		<br>
		Originele plaatjes:
		<br>
		 
		<table  width="700" border="1" cellspacing="0" cellpadding="4" bgcolor="#dfdfdf" align="center">
			<tr>
				<!-- Row 1 Column 1 -->
				<td bgcolor="#c0c0c0">
					<b>
						<img src="cabrio-2tone-1.jpg" width="585" height="439" alt="">
					</b>
				</td>
			</tr>
			<tr>
				<!-- Row 2 Column 1 -->
				<td >
					<img src="cabrio-geel-fr.jpg" width="512" height="384" alt="">
				</td>
			</tr>
		</table>
		
		
	</body>
	
</html>

Twee door mij gebruikte plaatjes toegevoegd.

Riesjart01 · 3 feb 2007

Ook bij die opent hij links vanuit de boven hoek.

Bij de pagina zit een Javascripts/popup_zoomin.js bestand..
maar hij moet dus vanuit het plaatje openen de bovenste foto maar weigert dus
en opent vanuit de bovenhoek links. en dat komt door de frame verwacht ik.

Want de onderste foto staat dus buiten het frame en doet dit dus niet.

Ziet iemand anders dit ook?

Egel · 3 feb 2007

Het probleem zit hem in de .offsetLeft en .offsetTop die geven de marge tot het bevattende element, in dit geval een tabelcel, maar het zoomen gebeurt vanaf linksboven.

PHP:

<!--
function ImageExpander(oThumb, sImgSrc)
{
	// store thumbnail image and overwrite its onclick handler.
	this.oThumb = oThumb;
	this.oThumb.expander = this;
	this.oThumb.onclick = function() { this.expander.expand(); }
	
	// record original size
	this.smallWidth = oThumb.offsetWidth;
	this.smallHeight = oThumb.offsetHeight;	

	this.bExpand = true;
	this.bTicks = false;
	
	// self organized list
	if ( !window.aImageExpanders )
	{
		window.aImageExpanders = new Array();
	}
	window.aImageExpanders.push(this);

	// create the full sized image.
	this.oImg = new Image();
	this.oImg.expander = this;
	this.oImg.onload = function(){this.expander.onload();}
	this.oImg.src = sImgSrc;
}

ImageExpander.prototype.onload = function()
{
	this.oDiv = document.createElement("div");
	document.body.appendChild(this.oDiv);
	this.oDiv.appendChild(this.oImg);
	this.oDiv.style.position = "absolute";
	this.oDiv.expander = this;
	this.oDiv.onclick = function() {this.expander.toggle();};
	this.oImg.title = "Click to reduce.";
	this.bigWidth = this.oImg.width;
	this.bigHeight = this.oImg.height;
	
	if ( this.bExpand )
	{
		this.expand();
	}
	else
	{
		this.oDiv.style.visibility = "hidden";
		this.oImg.style.visibility = "hidden";
	}
}
ImageExpander.prototype.toggle = function()
{
	this.bExpand = !this.bExpand;
	if ( this.bExpand )
	{
		for ( var i in window.aImageExpanders )
			if ( window.aImageExpanders[i] !== this )
				window.aImageExpanders[i].reduce();
	}
}
ImageExpander.prototype.expand = function()
{
	// set direction of expansion.
	this.bExpand = true;

	// set all other images to reduce
	for ( var i in window.aImageExpanders )
		if ( window.aImageExpanders[i] !== this )
			window.aImageExpanders[i].reduce();

	// if not loaded, don't continue just yet
	if ( !this.oDiv ) return;
	
	// hide the thumbnail
	this.oThumb.style.visibility = "hidden";
	
	// calculate initial dimensions
	this.x = this.oThumb.offsetLeft;
	this.y = this.oThumb.offsetTop;

	// Edit: get absolute values 1/2 | Egel 070203 ;)
	var eT = this.oThumb;
	while (eT.offsetParent) {
	 eT = eT.offsetParent;
	 this.x += eT.offsetLeft;
	 this.y += eT.offsetTop;
	 };
	// End of edit.

	this.w = this.oThumb.clientWidth;
	this.h = this.oThumb.clientHeight;
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";
	this.oDiv.style.visibility = "visible";
	this.oImg.style.visibility = "visible";
	
	// start the animation engine.
	if ( !this.bTicks )
	{
		this.bTicks = true;
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);	
	}
}
ImageExpander.prototype.reduce = function()
{
	// set direction of expansion.
	this.bExpand = false;
}
ImageExpander.prototype.tick = function()
{
	// calculate screen dimensions
	var cw = document.body.clientWidth;
	var ch = document.body.clientHeight;
	var cx = document.body.scrollLeft + cw / 2;
	var cy = document.body.scrollTop + ch / 2;


	// calculate target
	var tw,th,tx,ty;
	if ( this.bExpand )
	{
		tw = this.bigWidth;
		th = this.bigHeight;
		if ( tw > cw )
		{
			th *= cw / tw;
			tw = cw;
		}	
		if ( th > ch )
		{
			tw *= ch / th;
			th = ch;
		}
		tx = cx - tw / 2;
		ty = cy - th / 2; 
	}
	else
	{
		tw = this.smallWidth;
		th = this.smallHeight;
		tx = this.oThumb.offsetLeft;
		ty = this.oThumb.offsetTop;

		// Edit: get absolute values 2/2 | Egel 070203 ;)
		var eT = this.oThumb;
		while (eT.offsetParent) {
		 eT = eT.offsetParent;
		 tx += eT.offsetLeft;
		 ty += eT.offsetTop;
		 };
		// End of edit.


	}
	// move 5% closer to target
	var nHit = 0;
	var fMove = function(n,tn) 
	{
		var dn = tn - n;
		if ( Math.abs(dn) < 3 )
		{
			nHit++;
			return tn;
		}
		else
		{
			return n + dn / 10;
		}
	}
	this.x = fMove(this.x, tx);
	this.y = fMove(this.y, ty);
	this.w = fMove(this.w, tw);
	this.h = fMove(this.h, th);
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";

	// if reducing and size/position is a match, stop the tick	
	if ( !this.bExpand && (nHit == 4) )
	{
		this.oImg.style.visibility = "hidden";
		this.oDiv.style.visibility = "hidden";
		this.oThumb.style.visibility = "visible";

		this.bTicks = false;
	}
	
	if ( this.bTicks )
	{
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);
	}
}
//-->

Lost 't op.

Het telt recursief de verschillende offset's bij elkaar op.

Het gaat om deze twee stukken:

PHP:

this.x = this.oThumb.offsetLeft; 
this.y = this.oThumb.offsetTop; 

// Edit: get absolute values 1/2 | Egel 070203 ;) 
var eT = this.oThumb; 
while (eT.offsetParent) { 
 eT = eT.offsetParent; 
 this.x += eT.offsetLeft; 
 this.y += eT.offsetTop; 
 }; 
// End of edit.



tx = this.oThumb.offsetLeft;
ty = this.oThumb.offsetTop;

// Edit: get absolute values 2/2 | Egel 070203 ;)
var eT = this.oThumb;
while (eT.offsetParent) {
 eT = eT.offsetParent;
 tx += eT.offsetLeft;
 ty += eT.offsetTop;
 };
// End of edit.

Vr.Gr. Egel.

Riesjart01 · 3 feb 2007

Het werkt. :thumb:

Heel erg bedankt voor je hulp en snelle reactie..

Edit://

Nu heb ik nog een vraag,
Nu werkt het allemaal wel, alleen nu heb ik een flash slideshow er bij gezet op de pagina.
de foto gaat daar dus niet overheen maar blijft onder door steken.
hoe los ik dit op?

Egel · 3 feb 2007

Graag gedaan!

Dat ie eronder doorgaat ...
Probeer het eens met in het javascript achter deze zin:
this.oDiv.style.position = "absolute";

deze zin invoegen:
this.oDiv.style.zIndex = 10;

dat zou de div waarin het plaatje wordt gezoomd omhoog moeten halen.

Vr.Gr. Egel.

Riesjart01 · 3 feb 2007

hoi hoi,

dit heb ik zojuist gedaan maar het werkt niet..

Riesjart01 · 8 feb 2007

Iemand anders nog een andere manier hier ik de popup boven een flash beeld kan laten gaan?

het probleem en voorbeeld is te zien op de site (boven in)

Egel · 8 feb 2007

Het blijkt aan de flash te liggen, met

PHP:

<object style="background: #000" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="232" height="175" id="tech" align="middle">
 <param name="wmode" value="transparent">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="movie" value="car1.swf" />
 <param name="quality" value="high" />
 <embed wmode="transparent" src="car1.swf" quality="high" width="232" height="175" name="tech" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

los je het op.

Het gaat om twee keer wmode-transparent, door de style in de object-tag krijg je weer een zwarte achtergrond.

Vr.Gr. Egel.

Riesjart01 · 8 feb 2007

Super bedankt voor je tijd, het werkt :thumb:

Popup opent niet correct.

Riesjart01

Gebruiker

peter vazed

Meubilair

Bijlagen

Riesjart01

Gebruiker

Egel

Terugkerende gebruiker

Riesjart01

Gebruiker

Egel

Terugkerende gebruiker

Riesjart01

Gebruiker

Riesjart01

Gebruiker

Egel

Terugkerende gebruiker

Riesjart01

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy