Scroll functie

Door Onbekende gebruiker op 09-03-2008 19:46

304 views

Hallo, ik heb de volgende code in elkaar gezet, met als hooftdoel een fotogallerij. Dit feit opzichzelf is niet moeilijk, ik haal informatie uit een mysql-tabel, echo een code, doe er wat javascript bij en ik heb een fotogallerij, maar ik loop nu vast bij het volgende punt: Je kan uit verschillende catogorieen kiezen, waarin foto's staan. Omdat in een catogorie meer dan een foto staat, moet je op een bepaalde manier kunnen scrollen. Die functie ziet er als volgt uit en die werkt ook:


<html>
<head>
<title>Scroller</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var Timer;
function ScrollLeft(id1){
  Timer = setInterval("document.getElementById('"+id1+"').scrollLeft -= 2", 15);
}
function ScrollRight(id2){
  Timer = setInterval("document.getElementById('"+id2+"').scrollLeft += 2", 15);
}
</script>
<style>
body {
margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; 
background-color:white;
font-family:Arial;
color:black;
}
#scherm{
        position:relative;
        width:800px; 
	height:600px;
        text-align:left;
	border-style:solid; border-color:black; border-width:1px;
}
#kader{
	position:absolute;
	top:200;
	left:200;
        width:350px; 
	height:100px; 
	border:ridge 5; 
	overflow:hidden;
	border-style:solid; border-color:black; border-width:1px;
}
#fotos {
	position:relative; 
	width:1000;
	height:100px; 
	background-color:black;
	overflow:hidden;
}
#knoplinks {
	position:absolute; 
	top:200;
	left:162;
	width:39; 
	height:100;
}
#knoprechts {
	position:absolute; 
	top:200;
	left:550;
	width:39; 
	height:100;
}
</style>
</head>
<body>
<div id="scherm">
<div id="kader">
<div id="fotos">
<img src="afbeeldingen/een.jpg"/>&nbsp;<img src="afbeeldingen/twee.jpg"/>&nbsp;<img src="afbeeldingen/drie.jpg"/>&nbsp;<img src="afbeeldingen/een.jpg"/>&nbsp;<img src="afbeeldingen/twee.jpg"/>&nbsp;<img src="afbeeldingen/drie.jpg"/>
</div>
</div>
<div id="knoplinks">
<img src="afbeeldingen/links.jpg" onMouseOver="ScrollLeft()" onMouseOut="clearInterval(Timer)">
</div>
<div id="knoprechts">
<img src="afbeeldingen/rechts.jpg" onMouseOver="ScrollRight()" onMouseOut="clearInterval(Timer)">
</div>
</div>
</body>
</html>

Maar als ik hem in mijn eigen script wil inbouwen geeft hij geen error, maar hij wil ook niet scrollen. Hieronder is mijn script:


<?PHP
error_reporting(E_ALL);
mysql_connect('localhost','BlackLightning','Phantom') or die(mysql_error());
mysql_select_db('peter') or die(mysql_error());
$con2=mysql_query('SELECT * FROM sub_pic order by made DESC') or die(mysql_error());
$con3=mysql_query('SELECT * FROM sub_pic order by made DESC') or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Website van Peter</title>
<style>
<!--
body{
	background-color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	/*text-decoration:none;*/
	color:#000000;
}
A:LINK,A:ACTIVE,A:VISITED{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	color:#000000;
}
A:HOVER{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	color:#939393;
}
div.new{
position:absolute;
top:0; left:0;
height:100%; width:100%;
right:0; bottom:0;
}
div.scherm{
position:relative;
width:1000; height:600;
}
div.logo{
position:relative;
width:691; height:696;
z-index:0;
background-image:url(images/ar.jpg);
}
div.photoselect{
background-color:#CCCCCC; opacity:.75;
}
div.photoselecttxt{
color:#000000;
}
div.title{
color:#003399;
font-size:24px;
font-weight:bold;
text-decoration:none;
}
div.img{
width:998; height:370;
position:absolute;
top:70px; bottom:385px; left:0px; right:0px;
border:solid 1px #000000;
}
div.bottomscreen{
width:998px; height:150px;
position:absolute;
bottom:0px; left:0px; right:0px; top:448px;
border:solid 1px #000000;
overflow:hidden;
}
div.leftscroll{
position:absolute;
top:0px; left:0px; bottom:0px;
width:15; height:150;
}
div.rightscroll{
position:absolute;
top:0px; right:0px; bottom:0px;
width:15; height:150;
}
-->
</style>
<script language="javascript" type="text/javascript">
function activatepic(title){
  document.getElementById(document.myForm.myText.value).style.display='none';
  document.getElementById(title).style.display='block';
  document.myForm.myText.value=title;
}
function actimg(loc){
  document.getElementById('picture').src='images/fotos/'+loc;
}

var Timer;

function ScrollLeft(){
  Timer = setInterval("document.getElementById(document.myForm.myText.value).scrollLeft -= 2", 15);
}
function ScrollRight(){
  Timer = setInterval("document.getElementById(document.myForm.myText.value).scrollRight += 2", 15);
}
</script>
</head>
<body>
<form name="myForm"><input type="hidden" name="myText" value="pino" /></form>
<table width="100%" align="center" height="100%">
<tr><td height="*" width="*">&nbsp;</td><td height="*" width="*">&nbsp;</td><td height="*" width="*">&nbsp;</td></tr>
<tr><td height="*" width="*">&nbsp;</td><td align="center"><div class="logo"><img src="images/ar.jpg" /></div></td><td height="*" width="*">&nbsp;</td></tr>
<tr><td height="*" width="*">&nbsp;</td><td height="*" width="*">&nbsp;</td><td height="*" width="*">&nbsp;</td></tr></table>
<div class="new">
  <table width="100%" height="100%"><tr><td align="center">
  <div class="scherm">
    <div class="title">Fotoalbum van Peter Sinnige</div>
    <div class="photoselect">
	  <div class="photoselecttxt"><?PHP
while($aRow=mysql_fetch_assoc($con2)){
  ?><a href="javascript:activatepic('<?PHP echo $aRow['title']; ?>')"><img src="images/folder.png" style="border:none;" />&nbsp;<?PHP echo $aRow['title']; ?>&nbsp;&nbsp;(<?PHP echo $aRow['numpic']; ?>)</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?PHP
}
	?></div></div>
  <div class="imgselect">
  <div id="pino" style="display:block;">
Hallo en welkom op de site van <b>Peter Sinnige</b>
  </div><div class="bottomscreen">
<?PHP
$i=1;
$y=1;
while($aRow=mysql_fetch_assoc($con3)){
  $con4=mysql_query("select * from ".$aRow['title']." order by nr asc") or die(mysql_error());
  $picwidth=(mysql_num_rows($con4)*129)+30;
  echo '<div style="display:none; position:absolute; width:'.$picwidth.'; height:150px; bottom:0px; left:0px; right:0px; top:0px; border:solid 1px #000000;" id="'.$aRow['title'].'">';
?>
<?PHP
  while($aRow2=mysql_fetch_assoc($con4)){
    ?>
    <a href="javascript:actimg('<?PHP echo $aRow2['location']; ?>')"><img src="images/fotos/<?PHP echo $aRow2['location']; ?>" name="<?PHP echo $aRow['title'].$y; ?>" width="125" style="border:none; margin-top:25px;" /></a>
    <?PHP
	$y++;
  }
  echo '</div>';
  $i++;
}
?>
<div class="leftscroll"><img src="images/left.jpg" onMouseDown="ScrollLeft()" onMouseOut="clearInterval(Timer)" /></div>
<div class="rightscroll"><img src="images/right.jpg" onMouseDown="ScrollRight()" onMouseOut="clearInterval(Timer)" /></div>
  </div></div>
  <div class="img">
  <img id="picture" height="100%" src="images/fotos/leeg.gif" />
  </div>
  </div>
  </td></tr></table>
</div>
</body>
</html>

Alvast bedankt voor de hulp,

Koen

Onbekende gebruiker

10-03-2008 19:45

Inmiddels is het scrollprobleem opgelost door een ander script te nemen. Helaas heb ik nu het volgende probleem: Opera en IE tonen de pagina goed, maar in Firefox lijkt het alsof hij de links overslaat waarmee je de plaatjes kan 'vergroten', kunnen jullie me helpen?


<?PHP
error_reporting(E_ALL);
mysql_connect('localhost','BlackLightning','Phantom') or die(mysql_error());
mysql_select_db('peter') or die(mysql_error());
$con2=mysql_query('SELECT * FROM sub_pic order by made ASC') or die(mysql_error());
$con3=mysql_query('SELECT * FROM sub_pic order by made ASC') or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Website van Peter</title>
<style>
<!--
body{
	background-color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	/*text-decoration:none;*/
	color:#000000;
}
A:LINK,A:ACTIVE,A:VISITED{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	color:#000000;
}
A:HOVER{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	color:#939393;
}
div.new{
position:absolute;
top:0; left:0;
height:100%; width:100%;
right:0; bottom:0;
}
div.scherm{
position:relative;
width:1000; height:600;
}
div.logo{
position:relative;
width:691; height:696;
z-index:0;
background-image:url(images/ar.jpg);
}
div.photoselect{
background-color:#CCCCCC; opacity:.75;
}
div.photoselecttxt{
color:#000000;
}
div.title{
color:#003399;
font-size:24px;
font-weight:bold;
text-decoration:none;
}

div.img{
width:998; height:370;
position:absolute;
top:70px; bottom:385px; left:0px; right:0px;
border:solid 1px #000000;
}
div.bottomscreen{
width:998px; height:150px;
position:absolute;
bottom:0px; left:0px; right:0px; top:448px;
border:solid 1px #000000;
overflow:hidden;
}
div.bottomscreen2{
width:998px; height:150px;
position:absolute;
bottom:0px; left:0px; right:0px; top:448px;
border:solid 1px #000000;
}
div.leftscroll{
position:absolute;
top:0px; left:0px; bottom:0px;
width:15; height:150;
}
div.rightscroll{
position:absolute;
top:0px; right:0px; bottom:0px;
width:15; height:150;
}
-->
</style>
<script language="javascript" type="text/javascript">
var Timer;
function activatepic(title){
  document.getElementById(document.myForm.myText.value).style.display='none';
  document.getElementById(title).style.display='block';
  document.myForm.myText.value=title;
}
function actimg(loc){
  document.getElementById('picture').src='images/fotos/'+loc;
}
function function1(zzzz) {
  document.getElementById('myDiv').scrollLeft=eval(document.getElementById('myDiv').scrollLeft+2);
  document.getElementById('mySL2').innerHTML = document.getElementById('myDiv').scrollLeft;
  Timer=window.setTimeout('function1()',15);
}
function function2(zzzz){
  document.getElementById('myDiv').scrollLeft=document.getElementById('myDiv').scrollLeft-2;
  document.getElementById('mySL2').innerHTML = document.getElementById('myDiv').scrollLeft;
  Timer=window.setTimeout('function2()',15);
}
</script>
</head>
<body>
<table width="100%" align="center" height="100%">
<tr><td height="*" width="*">&nbsp;</td><td height="*" width="*">&nbsp;</td><td height="*" width="*">&nbsp;</td></tr>
<tr><td height="*" width="*">&nbsp;</td><td align="center"><div class="logo"><img src="images/ar.jpg" /></div></td><td height="*" width="*">&nbsp;</td></tr>
<tr><td height="*" width="*">&nbsp;</td><td height="*" width="*">&nbsp;</td><td height="*" width="*">&nbsp;</td></tr></table>
<div class="new">
  <table width="100%" height="100%"><tr><td align="center">
  <div class="scherm">
    <div class="title">Fotoalbum van Peter Sinnige</div>
    <div class="photoselect">
	  <div class="photoselecttxt"><?PHP
while($aRow=mysql_fetch_assoc($con2)){
  ?><a href="javascript:activatepic('<?PHP echo $aRow['title']; ?>')"><img src="images/folder.png" style="border:none;" />&nbsp;<?PHP echo $aRow['title']; ?>&nbsp;&nbsp;(<?PHP echo $aRow['numpic']; ?>)</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?PHP
}
	?></div></div>
  <div class="imgselect">
  <div id="pino" style="display:block;">
Hallo en welkom op de site van <b>Peter Sinnige</b>
  </div><div class="bottomscreen" align="center" id="myDiv">
<?PHP
$i=1;
$y=1;
$z=0;
while($aRow=mysql_fetch_assoc($con3)){
  $con4=mysql_query("select * from ".$aRow['title']." order by nr asc") or die(mysql_error());
  $picwidth=(mysql_num_rows($con4)*129)+30;
  if($z<1){
	if($picwidth<=996){
	  echo '<div style="display:block; position:absolute; width:996; height:151px; bottom:0px; left:0px; right:0px; top:-1px; position:relative;" id="'.$aRow['title'].'">';
	}
	else{
	  echo '<div style="display:block; position:absolute; width:'.$picwidth.'; height:150px; bottom:0px; left:0px; right:0px; top:-1px; postition:relative" id="'.$aRow['title'].'">';
	}
	$pino=$aRow['title'];
	$z++;
  }
  else{
	if($picwidth<=996){
	  echo '<div style="display:none; position:absolute; width:996; height:151px; bottom:0px; left:0px; right:0px; top:0px;" id="'.$aRow['title'].'">';
	}
	else{
	  echo '<div style="display:none; position:absolute; width:'.$picwidth.'; height:150px; bottom:0px; left:0px; right:0px; top:0px;" id="'.$aRow['title'].'">';
	}
  }
  while($aRow2=mysql_fetch_assoc($con4)){
    ?>
    <a href="javascript:actimg('<?PHP echo $aRow2['location']; ?>')"><img src="images/fotos/<?PHP echo $aRow2['location']; ?>" name="<?PHP echo $aRow['title'].$y; ?>" width="125" style="border:none; margin-top:auto; margin-bottom:auto;" /></a>
    <?PHP
	$y++;
  }
  echo '</div>';
	?>
    <?PHP
  $i++;
}
?>
  </div>
  </div>
  <div class="img">
  <img id="picture" height="100%" src="images/fotos/leeg.gif" border="0" style="border:none;" />
  </div>
  <div class="bottomscreen2">
<div class="leftscroll"><img src="images/left.jpg" onMouseOver="function2()" onMouseOut="clearTimeout(Timer)" border="0" style="border:none;" /></div>
<div class="rightscroll"><img src="images/right.jpg" onMouseOver="function1()" onMouseOut="clearTimeout(Timer)" border="0" style="border:none;" /></div>
</div>
  </div>
  </td></tr></table>
</div>
<div style="display:none;">
<p>
   <b>Scroll Left:</b> 
   <span id="mySL2">0</span>
</p>
</div>
<form name="myForm"><input type="hidden" name="myText" value="<?PHP echo $pino; ?>" /></form>
</body>
</html>

Koen

bart van der veen

10-03-2008 20:22

link, dan kunnen we even meekijken....

Onbekende gebruiker

11-03-2008 07:25

Ja sorry, hier is een link:
Voor de informatie: ik weet dat de hoevelheid foto's in de onderwerpen niet klopt, en ik weet ook dat er niets in Test2 staat.

Klik

Koen

Reageren

Inloggen om te reageren