[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
www.dhtmlgoodies.com • View topic - Allign gallery script to absolute middle is nog possible
Page 1 of 1

Allign gallery script to absolute middle is nog possible

PostPosted: Mon Dec 04, 2006 5:30 pm
by chris1382
I'm trying to allign my Gallery script to the centre of my page. horizontal en vertical.
I tried it with a table and css but i cant get it done.
I hope someone knows how to get it done???
Here is my code

<!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>Untitled Document</title>
</head>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Image slideshow</title>
<link rel="stylesheet" href="css/image-slideshow.css" type="text/css">
<script type="text/javascript" src="js/image-slideshow.js">
</script>
<script language="JavaScript" type="text/javascript">
<!--



// hieronder de namen en de url van de afbeeldingen wijzigen
var afbeeldingen=new Array()
afbeeldingen[0]=["radexpo/3groot.jpg", "radexpo/3.html"]
afbeeldingen[1]=["radexpo/4groot.jpg", "radexpo/4.html"]
afbeeldingen[2]=["radexpo/5groot.jpg", "radexpo/5.html"]
afbeeldingen[3]=["radexpo/6groot.jpg", "radexpo/6.html"]
afbeeldingen[4]=["radexpo/7groot.jpg", "radexpo/7.html"]
afbeeldingen[5]=["radexpo/8groot.jpg", "radexpo/8.html"]
afbeeldingen[6]=["radexpo/9groot.jpg", "radexpo/9.html"]
afbeeldingen[7]=["radexpo/10groot.jpg", "radexpo/10.html"]
afbeeldingen[8]=["radexpo/11groot.jpg", "radexpo/11.html"]
afbeeldingen[9]=["radexpo/12groot.jpg", "radexpo/12.html"]
afbeeldingen[10]=["radexpo/13groot.jpg", "radexpo/13.html"]
afbeeldingen[11]=["radexpo/14groot.jpg", "radexpo/14.html"]
afbeeldingen[12]=["radexpo/15groot.jpg", "radexpo/15.html"]
afbeeldingen[13]=["radexpo/16groot.jpg", "radexpo/16.html"]
afbeeldingen[14]=["radexpo/17groot.jpg", "radexpo/17.html"]
afbeeldingen[15]=["radexpo/18groot.jpg", "radexpo/18.html"]
afbeeldingen[16]=["radexpo/19groot.jpg", "radexpo/19.html"]
afbeeldingen[17]=["radexpo/20groot.jpg", "radexpo/20.html"]
afbeeldingen[18]=["radexpo/21groot.jpg", "radexpo/21.html"]
afbeeldingen[19]=["radexpo/22groot.jpg", "radexpo/22.html"]
afbeeldingen[20]=["radexpo/23groot.jpg", "radexpo/23.html"]


var voorladen="ja" // ja of nee
var optlinktarget="_blank" // hier kun je de target invullen
var beeldrandbreedte=0 // breedte rand voor plaatjes
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

// hieronder niets meer wijzigen

if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}

function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}

function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}

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];}}
}
//-->

</script>
<style type="text/css">
<!--

#Layer1 {
position:absolute;
width:635px;
height:441px;
z-index:0;
left: -17px;
top: 106px;
margin-left:auto;
margin-right:auto;
}
#Layer2 {
position:absolute;
width:743px;
height:107px;
z-index:0;
left: 97px;
top: 5px;
margin-left:100px;
margin-right:00px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#Layer3 {
position:absolute;
width:96px;
height:115px;
z-index:0;
left: 0px;
top: 0px;
}
body {
margin-left: 0%;
margin-top: 20%;
margin-right: 0%;
margin-bottom: 0%;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0"
height="100%">
<tr>
<td align="center" valign="middle"></td>

<div id="Layer2">

<div id="dhtmlgoodies_slideshow">
<div id="Layer1">
<div id="previewPane"> <A TARGET="_blank" href="radexpo/3.html"><img src="radexpo/3groot.jpg"
width="498" height="462"
align="center" border="0"></a> <span id="waitMessage"></span>
<div id="largeImageCaption"></div>
</div>
</div>
<div id="galleryContainer">



<div id="arrow_left"><A TARGET="" href="exposities.html"><img src="rad/arrow_left.gif" border="0"></a></div>
<div id="arrow_right"><img src="rad/arrow_right.gif"></div>
<div id="theImages">


<!-- Thumbnails -->
<a href="#" target="_blank" onMouseover="wijzigbeeld('previewPane', 0)"><img src="radexpo/3klein.jpg" width="133" height="100" border="0"></a>
<a href="#" target="_blank" onMouseover="wijzigbeeld('previewPane', 1)"><img src="radexpo/4klein.jpg" width="133" height="100" border="0"></a>
<a href="#" target="_blank" onMouseover="wijzigbeeld('previewPane', 2)"><img src="radexpo/5klein.jpg" width="133" height="100" border="0"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 3)"><img src="radexpo/6klein.jpg" width="133" height="100" border="0"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 4)"><img src="radexpo/7klein.jpg" width="75" height="100" border="0"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 5)"><img src="radexpo/8klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 6)"><img src="radexpo/9klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 7)"><img src="radexpo/10klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 8)"><img src="radexpo/11klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 9)"><img src="radexpo/12klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 10)"><img src="radexpo/13klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 11)"><img src="radexpo/14klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 12)"><img src="radexpo/15klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 13)"><img src="radexpo/16klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 14)"><img src="radexpo/17klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 15)"><img src="radexpo/18klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 16)"><img src="radexpo/19klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 17)"><img src="radexpo/20klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 18)"><img src="radexpo/21klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 19)"><img src="radexpo/22klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 20)"><img src="radexpo/23klein.jpg"></a>
<!-- End thumbnails -->
<!-- Image captions -->
<div class="imageCaption">This is the caption of image number 1</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>

<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
<!-- End image captions -->
<div id="slideEnd"></div>
</div>
</div>
</div>
</div>








</body>
</html>

PostPosted: Mon Dec 04, 2006 5:59 pm
by Batalf

PostPosted: Mon Dec 04, 2006 6:38 pm
by chris1382

PostPosted: Mon Dec 04, 2006 6:51 pm
by Batalf

PostPosted: Mon Dec 04, 2006 8:18 pm
by chris1382
Thx.
It's working now :D
I had a good moment and got lucky i placed the code in the right place..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image slideshow</title>
<link rel="stylesheet" href="css/image-slideshow.css" type="text/css">
<script type="text/javascript" src="js/image-slideshow.js">
</script>
<script language="JavaScript" type="text/javascript">
<!--



// hieronder de namen en de url van de afbeeldingen wijzigen
var afbeeldingen=new Array()
afbeeldingen[0]=["radexpo/3groot.jpg", "radexpo/3.html"]
afbeeldingen[1]=["radexpo/4groot.jpg", "radexpo/4.html"]
afbeeldingen[2]=["radexpo/5groot.jpg", "radexpo/5.html"]
afbeeldingen[3]=["radexpo/6groot.jpg", "radexpo/6.html"]
afbeeldingen[4]=["radexpo/7groot.jpg", "radexpo/7.html"]
afbeeldingen[5]=["radexpo/8groot.jpg", "radexpo/8.html"]
afbeeldingen[6]=["radexpo/9groot.jpg", "radexpo/9.html"]
afbeeldingen[7]=["radexpo/10groot.jpg", "radexpo/10.html"]
afbeeldingen[8]=["radexpo/11groot.jpg", "radexpo/11.html"]
afbeeldingen[9]=["radexpo/12groot.jpg", "radexpo/12.html"]
afbeeldingen[10]=["radexpo/13groot.jpg", "radexpo/13.html"]
afbeeldingen[11]=["radexpo/14groot.jpg", "radexpo/14.html"]
afbeeldingen[12]=["radexpo/15groot.jpg", "radexpo/15.html"]
afbeeldingen[13]=["radexpo/16groot.jpg", "radexpo/16.html"]
afbeeldingen[14]=["radexpo/17groot.jpg", "radexpo/17.html"]
afbeeldingen[15]=["radexpo/18groot.jpg", "radexpo/18.html"]
afbeeldingen[16]=["radexpo/19groot.jpg", "radexpo/19.html"]
afbeeldingen[17]=["radexpo/20groot.jpg", "radexpo/20.html"]
afbeeldingen[18]=["radexpo/21groot.jpg", "radexpo/21.html"]
afbeeldingen[19]=["radexpo/22groot.jpg", "radexpo/22.html"]
afbeeldingen[20]=["radexpo/23groot.jpg", "radexpo/23.html"]


var voorladen="ja" // ja of nee
var optlinktarget="_blank" // hier kun je de target invullen
var beeldrandbreedte=0 // breedte rand voor plaatjes
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

// hieronder niets meer wijzigen

if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}

function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}

function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}

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];}}
}
//-->
</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:635px;
height:441px;
z-index:0;
left: -17px;
top: 106px;
margin-left:auto;
margin-right:auto;
}
#Layer2 {
position:absolute;
width:743px;
height:107px;
z-index:0;
left: 97px;
top: 5px;
margin-left:100px;
margin-right:00px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#Layer3 {
position:absolute;
width:96px;
height:115px;
z-index:0;
left: 0px;
top: 0px;
}
body {
margin-left: 0%;
margin-top: 20%;
margin-right: 0%;
margin-bottom: 0%;
}
-->
</style>

<HTML>
<HEAD>
<title>Center align content</title>
<style type="text/css">
body{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
/* This container should be center aligned */
#Layer2{
background-color:#FFFFFF;
color:#FFF;
width:498px;
height:462px;
position:absolute;
left:50%;
top:50%;
margin-left:-300px; /* 1/2 of the width */
margin-top:-300px; /* 1/2 of the height */
}
</style>







<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>



<div id="Layer2">

<div id="dhtmlgoodies_slideshow">
<div id="Layer1">
<div id="previewPane"> <A TARGET="_blank" href="radexpo/3.html"><img src="radexpo/3groot.jpg"
width="498" height="462"
align="center" border="0"></a> <span id="waitMessage"></span>
<div id="largeImageCaption"></div>
</div>
</div>
<div id="galleryContainer">

<div id="arrow_left"><A TARGET="" href="exposities.html"><img src="rad/arrow_left.gif" border="0"></a></div>
<div id="arrow_right"><img src="rad/arrow_right.gif"></div>
<div id="theImages">
<!-- Thumbnails -->
<a href="#" target="_blank" onMouseover="wijzigbeeld('previewPane', 0)"><img src="radexpo/3klein.jpg" width="133" height="100" border="0"></a>
<a href="#" target="_blank" onMouseover="wijzigbeeld('previewPane', 1)"><img src="radexpo/4klein.jpg" width="133" height="100" border="0"></a>
<a href="#" target="_blank" onMouseover="wijzigbeeld('previewPane', 2)"><img src="radexpo/5klein.jpg" width="133" height="100" border="0"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 3)"><img src="radexpo/6klein.jpg" width="133" height="100" border="0"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 4)"><img src="radexpo/7klein.jpg" width="75" height="100" border="0"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 5)"><img src="radexpo/8klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 6)"><img src="radexpo/9klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 7)"><img src="radexpo/10klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 8)"><img src="radexpo/11klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 9)"><img src="radexpo/12klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 10)"><img src="radexpo/13klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 11)"><img src="radexpo/14klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 12)"><img src="radexpo/15klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 13)"><img src="radexpo/16klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 14)"><img src="radexpo/17klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 15)"><img src="radexpo/18klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 16)"><img src="radexpo/19klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 17)"><img src="radexpo/20klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 18)"><img src="radexpo/21klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 19)"><img src="radexpo/22klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 20)"><img src="radexpo/23klein.jpg"></a>
<!-- End thumbnails -->
<!-- Image captions -->
<div class="imageCaption">This is the caption of image number 1</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>

<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
<!-- End image captions -->
<div id="slideEnd"></div>
</div>
</div>
</div>
</div>
</body>
</html>