PHP Foto Gallery

**jbay** · 10.02.2006, 14:45

Mit Firefox zittert gar nix.

**pmf2** · 10.02.2006, 14:59

geh mal mit dem Mauszeiger auf pic 3,4,5 in meiner foto gallery 1 die zittern wie die bastarde vor der schlacht

**pmf2** · 10.02.2006, 21:39

HILFE!!!!!!!!!!!!!!!!!!!!!!!!

**jahlives** · 10.02.2006, 21:48

HILFE!!!!!!!!!!!!!!!!!!!!!!!!

So ein Post ist aber nicht wirklich dein Ernst ? Oder etwa doch

ich hab aber noch nen prob mit der gallery. Wenn man auf die Bilder draufgeht zittern die so

Wenn dein Link wenigstens funzen würde

Gruss

tobi

**pmf2** · 10.02.2006, 22:25

sry so richtiger link hier

**pmf2** · 12.02.2006, 11:31

kann mir niemand nen tip geben wie ich das beheben kann ???

**reallife** · 12.02.2006, 13:12

Hast du dir schonmal die Frage gestellt, wieso das bei den Bilder so zittert? Da das Bild immer rechts vom Mauszeiger positioniert wird und im mousemove nicht mit bewegt wird, kann es vorkommen, das der Mauszeiger eben über das vergrößerte Bild kommt und an diesem Punkt greift das onmouseout Event und das veranlasst, dass das vergrößerte Bild ausgeblendet wird. Da es ausgeblendet wird und der Mauszeiger wohlmöglich immernoch über einem Bild ist, das vergrößert werden soll, tritt das onmouseover Event in Kraft und vergrößert das Bild. Und das wiederholt sich und wiederholt sich und wiederholt sich und ... Da der Lösungsansatz von mir kam und das eigentlich für dich nur ein Denkanstoß sein sollte, könntest du mir hier jetzt keine Vorwürfe machen. Da ich aber so nett bin, geb ich dir hier noch einen weiteren Lösungsansatz für dein Problem. Aber das hättest du mit ein bisschen Debugging auch hinbekommen. So genug bla bla, hier der Lösungsansatz:

Code:

var iSizeWidth;
var iSizeHeight;
var iPercent = 50;
var obj_zoom = null;

function zoomIn(e, obj)
{		
	if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
	{
		e = (typeof(e) != 'object') ? window.event : e;
		
		var iNewWidth = (obj.width*100)/(100-iPercent);
		var iNewHeight = (obj.height*100)/(100-iPercent);
	
		obj_zoom.innerHTML = "<img src=\""+obj.src+"\" height=\""+iNewHeight+"\" width=\""+iNewWidth+"\">";

		obj_zoom.style.left = (typeof(e.pageX) != 'undefined') ? 
			(e.pageX+5)+'px' : (e.x+document.body.scrollLeft+5)+'px';
		obj_zoom.style.top = (typeof(e.pageY) != 'undefined') ? 
			(e.pageY+5)+'px' : (e.y+document.body.scrollTop+5)+'px';
		obj_zoom.style.display = '';
	}
}
	
function zoomOut(obj)
{
	if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
	{
		obj_zoom.style.display = 'none';
		bMouseMove = false;
	}
}	

function zoomMove(e)
{
	if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
	{
		e = (typeof(e) != 'object') ? window.event : e;
		obj_zoom.style.left = (typeof(e.pageX) != 'undefined') ? 
			(e.pageX+5)+'px' : (e.x+document.body.scrollLeft+5)+'px';
		obj_zoom.style.top = (typeof(e.pageY) != 'undefined') ? 
			(e.pageY+5)+'px' : (e.y+document.body.scrollTop+5)+'px';
	}
}

Da jetzt eine neue Funktion hinzugekommen ist, brauchen wir auch ein neues Event und das sieht dann im IMG-TAG wie folgt aus:

Code:

<img src="baby.jpg" width="50" height="70" 
onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" />

**pmf2** · 12.02.2006, 16:44

Jeder hat das Recht, dumm zu sein.
Einige missbrauchen dieses Recht
aber leider ständig!

Das trifft wohl auf mich zu. Danke

Aber es geht nicht.

1. Muss ich die div tags beibehalten?

2. Den bisherigen Javascript Quellcode beibehalten oder nur durch den neuen ersetzen

**reallife** · 12.02.2006, 19:03

Jeder hat das Recht, dumm zu sein.
Einige missbrauchen dieses Recht
aber leider ständig!

Das trifft wohl auf mich zu. Danke

Das ist meine Signatur, findest du in jedem Post von mir, aber wenn du dich damit identifizierst, dann wird das wohl so sein :P

Aber es geht nicht.

Das kann ich so nicht stehen lassen. Es geht wohl, sonst hätte ich es ja nicht hier gepostet!

1. Muss ich die div tags beibehalten?

2. Den bisherigen Javascript Quellcode beibehalten oder nur durch den neuen ersetzen

Zu 1.) Nein du musst die nicht beibehalten, lediglich das div tag in dem die vergrößerung angezeigt werden soll, musst du beibehalten.. Die Bilder kannst du auch in einer Tabelle darstellen, das ist ja deine Sache..

Zu 2.) Alten JS Code durch den neuen ersetzen und das Event in den img tags nicht vergessen..

**pmf2** · 13.02.2006, 15:05

was mache ich falsch ich hab den JS Code ersetzt durch den neuen die img tags richtig bearbeitet ... ka ? lol

<html>
<head>
<meta http-equiv="Content-Language" content="german,DE">
<meta http-equiv="Content-Type" content="text/html/Images; charset=windows-1252">
<title>Familie Koch-Ein Fotoalbum</title>
<script language="javascript">

var iSizeWidth;
var iSizeHeight;
var iPercent = 50;
var obj_zoom = null;

function zoomIn(e, obj)
{
if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
{
e = (typeof(e) != 'object') ? window.event : e;

var iNewWidth = (obj.width*100)/(100-iPercent);
var iNewHeight = (obj.height*100)/(100-iPercent);

obj_zoom.innerHTML = "<img src=\""+obj.src+"\" height=\""+iNewHeight+"\" width=\""+iNewWidth+"\">";

obj_zoom.style.left = (typeof(e.pageX) != 'undefined') ?
(e.pageX+5)+'px' : (e.x+document.body.scrollLeft+5)+'px';
obj_zoom.style.top = (typeof(e.pageY) != 'undefined') ?
(e.pageY+5)+'px' : (e.y+document.body.scrollTop+5)+'px';
obj_zoom.style.display = '';
}
}

function zoomOut(obj)
{
if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
{
obj_zoom.style.display = 'none';
bMouseMove = false;
}
}

function zoomMove(e)
{
if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
{
e = (typeof(e) != 'object') ? window.event : e;
obj_zoom.style.left = (typeof(e.pageX) != 'undefined') ?
(e.pageX+5)+'px' : (e.x+document.body.scrollLeft+5)+'px';
obj_zoom.style.top = (typeof(e.pageY) != 'undefined') ?
(e.pageY+5)+'px' : (e.y+document.body.scrollTop+5)+'px';
}
}
</script>
</head>

<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" rightmargin="o" bottommargin="0" bgcolor="#FFFFFF" link="white" alink="white" vlink="white">

<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/black.gif">
<tr>
<td width="100%"><font size="3" color="White">              &n bsp;          
                &nbs p;   Menü:  <A HREF="impressum.html">Impressum</A>  <A HREF="info.html">Informationen</A>  <A HREF="mitglied.html">Login</A>  <A HREF="kontakt.php">Kontakt</A>  <A HREF="index.html">Startseite</A>  </font></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/midbkg.gif">
<tr>
<td width="1%">
<p align="left"><img border="0" src="images/sitenav.gif" width="172" height="112"></td>
<td width="50%" valign="top">
<p align="right"><img border="0" src="images/logo.gif" width="211" height="62"><br>
<a href="mailto:koch.rpk@t-online.de"><img border="0" src="images/contact.gif" width="211" height="50"></td></A>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="1%" background="images/sidebkg.gif" valign="top"><img border="0" src="images/sidespacer.gif" width="141" height="11"><br>
<a href="foto1.html"><img border="0" src="images/foto1.gif" width="141" height="30"><br></A>
<a href="foto1.1.html"><img border="0" src="images/foto1.1.gif" width="141" height="30"><br></A>
<a href="foto1.2.html"><img border="0" src="images/foto1.2.gif" width="141" height="30"><br></A>
<a href="foto2.html"><img border="0" src="images/foto2.gif" width="141" height="30"><br></A>
<a href="foto2.1.html"><img border="0" src="images/foto2.1.gif" width="141" height="30"><br></A>
<a href="foto2.2.html"><img border="0" src="images/foto2.2.gif" width="141" height="30"><br></A>
<a href="foto3.html"><img border="0" src="images/foto3.gif" width="141" height="30">
<p><font size="2">  </font></td>
<td width="99%" valign="top">
<p style="margin-left: 20"> </p>
<p style="margin-left: 20"><font face="Arial" color="#605890" size="4">Foto Gallery 1
</font></p>
<p style="margin-left: 20"><font face="Arial" size="2">Hier geht es um Autos. Bewegen sie den Cursor auf ein Bild um es zu vergrößern
</font></p>
<p style="margin-left: 20"><font face="Arial" size="2"> </font></p>
<p style="margin-left: 20"><font face="Arial" size="4" color="#605890">
</font></p>
<p style="margin-left: 20"><font face="Arial" size="2"><div id="div_zoom" style="position:absolute; display:none; z-index:100000;">
</div>

<div>
<div style="position:static; margin-left:5px; float:left;">
   <a href="bmw325ia.html"><img src="bmw325ia.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>

<div style="position:static; margin-left:5px; float:left;">
<a href="bmw325iaklein.html"><img src="bmw325iaklein.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>

<div style="position:static; float:left;">
 <a href="bmw325iamobile.html"><img src="bmw325iamobile.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>

<div style="position:static; float:left;">
 <a href="dscf0048.html"><img src="dscf0048.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>
<div style="position:static; float:left;">
 <a href="dscf0058.html"><img src="dscf0058.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>
<div style="position:static; float:left;">
 <a href="dscf0087.html"><img src="dscf0087.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>
<div style="position:static; float:left;">
 <a href="cockpit.html"><img src="cockpit.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>
<BR><BR><BR><BR><BR>
</div>

</font></p>
<p style="margin-left: 20"><font face="Arial" size="1"> </font></p>
<p style="margin-left: 20"><font face="Arial" size="1"> </font></p>
<p style="margin-left: 20" align="center"><font size="1" face="Arial">©
COPYRIGHT 2006 ALL RIGHTS RESERVED Pierre Friedrichsmeier</font></td>
</tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/black.gif">
<tr>
<td width="100%"><font size="1">     </font></td>
</tr>
</table>

</body>

</html>

**Abraxax** · 13.02.2006, 16:32

http://www.php-resource.de/forum/sho...threadid=50455

**pmf2** · 13.02.2006, 17:14

sry das hilft net weil es sich nicht um php sondern reines javascript handelt

**pmf2** · 13.02.2006, 20:33

bitte kann jemand sich das mal ansehen????

**reallife** · 13.02.2006, 20:34

Original geschrieben von pmf2
was mache ich falsch ich hab den JS Code ersetzt durch den neuen die img tags richtig bearbeitet ... ka ? lol

Das kann ich dir nicht sagen, weil ich ehrlich gesagt keine Luste habe, mir deinen Quellcode durchzulesen. Ich stell dir die änderungen online und dann kannst du dir daraus deinen Code zusammenbasteln.
Link: hier...

OffTopic:
Das Copyright liegt ja nicht mehr zu 100% bei dir, also kannste das auch von deiner Seite nehmen..
Zu deinem lol: es stellt sich nur die Frage, was hier so lol ist.

**archie** · 15.02.2006, 13:28

@ reallife: Würde gerne das Script auf meiner Seite verwenden. Ist das kostenlos, kann ich das nutzen?

PHP Foto Gallery

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Wird geladen... Bitte warte.

PHP Foto Gallery

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar