Aligning Photo Gallery in all resolutions.

enduser · #1 (**permalink**) 01-18-11, 11:20 PM

Hello,
I am stuck on properly aligning my photo gallery pictures in all resolutions.
I am using VisualLightBox 4.4 to generate the galleries. I then open the index in dreamweaver.
I have a base background and buttons that I set in behind the gallery. I set all my buttons as
AP Divs and centre align them with css:
left:50%:
margin-left

number)px;

And this works to centre and align the added buttons and background properly with all screen resolutions. Now centering and aligning the pictures in the gallery is another thing. VisualLightBox generates the script , and I do not know enough CSS to pin point which scripts I should change to get the pictures to act like my buttons do. Persay if you visit:
bomb-test generated by VisualLightBox.com
If you restore down the page, the banner and buttons move in unicen.
The pictures of the gallery remain in the same spot.
Pulling and shrinking the page you can see this.

I will post the script in hopes some one knows what to change to get these centre aligning with all resolutions. If not, what I'm looking for is a lightbox gallery that I can centre align with all resolutions. If there is an easier one to use to accomplish this it would be much appreciated.

This is my source script:

HTML 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" lang="en" xml:lang="en">
	<head>
		<title>bomb-test generated by VisualLightBox.com</title>
        <style type="text/css">
		<!--

a img { border:none;}
#wrapper {
	position:absolute;
	width:864px;
	height:856px;
	z-index:1;
	left:50%;
	margin-left:-430px;
	background-color: #000000;
	top: 4px;
}
body {
	background-color: #333;
}

}
.style1 {color: #FFFFFF}
#photo-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:2;
	left: 50%;
	top: 82px;
	margin-left:-426px;
}
#o-a-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:3;
	left: 50%;
	top: 82px;
	margin-left:-282px;
}
#pastel-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:4;
	left: 50%;
	top: 82px;
	margin-left:-140px;
}
#wc-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:5;
	left: 50%;
	top: 82px;
	margin-left:3px;
}
#res-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:6;
	left: 50%;
	top: 82px;
	margin-left:148px;
}
#mm-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:7;
	left: 50%;
	top: 82px;
	margin-left:290px;
}
#test {
	position:absolute;
	width:805px;
	height:759px;
	z-index:8;
	left: 107px;
	top: 133px;
}
-->
        
        </style>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="bomb-test, VisualLightBox, LightBox, Photo Gallery, Lightbox Gallery2, Lightbox Image Viewer" />
		<meta name="description" content="bomb-test created with VisualLightBox, a free wizard program that helps you easily generate beautiful Lightbox-style web photo galleries" />
		<link rel="shortcut icon" href="favicon.ico" />
		
		<!-- Start VisualLightBox.com HEAD section -->
		<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
		<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
		<script src="engine/js/vlbdata.js" type="text/javascript"></script>
		<!-- End VisualLightBox.com HEAD section -->
		
	</head>
	<body>
    
    <div id="wrapper"><img src="http://www.hotscripts.com/backgrounds/HQ-PG-BG-base2.jpg" width="864" height="949" /></div>
<label></label>

<div style="width: 790px;height: 600px;overflow:-moz-scrollbars-vertical;overflow-y:auto; 
margin-left:23%;
margin-top:170px;">
<div id="photo-butt"><em> </em><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/photo-butt.jpg" width="136" height="34" /></div>
<div id="o-a-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/o&amp;a-button.jpg" width="136" height="34" /></div>
<div id="pastel-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/pastels-button.jpg" width="136" height="34" /></div>
<div id="wc-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/watercolour-button.jpg" width="136" height="34" /></div>
<div id="res-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/resources-button.jpg" width="136" height="34" /></div>
<div id="mm-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/mm-button.jpg" width="136" height="34" /></div>
<div id="test"></div>
    
    
    
	
	<!-- Start VisualLightBox.com BODY section id=1 -->
	<div id="vlightbox1">
	<a class="vlightbox1" href="data/images1/_igp6217_5_6.jpg" title="_IGP6217_5_6"><img src="data/thumbnails1/_igp6217_5_6.jpg" alt="_IGP6217_5_6"/></a>
<a class="vlightbox1" href="data/images1/_igp5354.jpg" title="_IGP5354"><img src="data/thumbnails1/_igp5354.jpg" alt="_IGP5354"/></a>
<a class="vlightbox1" href="data/images1/_igp5366.jpg" title="_IGP5366"><img src="data/thumbnails1/_igp5366.jpg" alt="_IGP5366"/></a>
<a class="vlightbox1" href="data/images1/_igp5402.jpg" title="_IGP5402"><img src="data/thumbnails1/_igp5402.jpg" alt="_IGP5402"/></a>
<a class="vlightbox1" href="data/images1/_igp5417.jpg" title="_IGP5417"><img src="data/thumbnails1/_igp5417.jpg" alt="_IGP5417"/></a>
<a class="vlightbox1" href="data/images1/_igp5418.jpg" title="_IGP5418"><img src="data/thumbnails1/_igp5418.jpg" alt="_IGP5418"/></a>
<a class="vlightbox1" href="data/images1/_igp5483_acopy_2and2more.jpg" title="_IGP5483 acopy 2And2more"><img src="data/thumbnails1/_igp5483_acopy_2and2more.jpg" alt="_IGP5483 acopy 2And2more"/></a>
<a class="vlightbox1" href="data/images1/_igp5528.jpg" title="_IGP5528"><img src="data/thumbnails1/_igp5528.jpg" alt="_IGP5528"/></a>
<a class="vlightbox1" href="data/images1/_igp5536aa.jpg" title="_IGP5536aa"><img src="data/thumbnails1/_igp5536aa.jpg" alt="_IGP5536aa"/></a>
<a class="vlightbox1" href="data/images1/_igp5562a.jpg" title="_IGP5562a"><img src="data/thumbnails1/_igp5562a.jpg" alt="_IGP5562a"/></a><a class="vlb" style="display:none" href="http://visuallightbox.com">Free Slideshow Script by VisualLightBox.com v4.4</a>
	</div>
	<!-- End VisualLightBox.com BODY section -->
	
	</body>
</html>

[B]This is the vlightbox1.css script:[/B]

#vlightbox1 {
	width:100%;
	zoom:1;	
	left:50%;
}
#vlightbox1 .vlightbox1 {
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	position:relative;
	vertical-align:top;
	margin:5px;
	width:160px;
	font-family:Trebuchet,Tahoma,Arial,sans-serif;
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
	text-align:center;
	opacity:0.87;
	
	z-index:20;
	
}
#vlightbox1 .vlightbox1 a{
	margin:0;
	
}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
	opacity:1;
}
#vlightbox1 .vlightbox1 img{
	display:block;
	border:none;
	margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}

I have the visuallightbox.css script but I believe that only applies to the lightbox itself.

job0107 · #2 (**permalink**) 01-19-11, 02:36 AM

Change your CSS like this:

HTML Code:

<style>
#vlightbox1 {
position:absolute;
z-index:100;
width:700px;
zoom:1;
}
.vlightbox1 {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:5px;
width:160px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
/*text-align:center;*/
opacity:0.87;

z-index:20;

}
#vlightbox1 .vlightbox1 a{
margin:0;

}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
opacity:1;
}
#vlightbox1 .vlightbox1 img{
display:block;
border:none;
margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}
</style>
<!--[if IE]>
<style>
#vlightbox1 {
top:170px;
}
</style>
<![endif]-->

Then add this JavaScript function to your head element:

HTML Code:

<script>
function position_gallery()
{
 var obj = document.getElementById("vlightbox1");
 if (parseInt(navigator.appVersion)>3) {
  if (navigator.appName=="Netscape") {
   var ww = window.innerWidth;
   var gw = obj.clientWidth;
   var l = ((ww-gw)/2)-4;
   obj.style.left = l+"px";
  }
  if (navigator.appName.indexOf("Microsoft")!=-1) {
   var ww = document.body.offsetWidth;
   var gw = obj.offsetWidth;
   var l = ((ww-gw)/2)+16;
   obj.style.left = l+"px";
  }
 }
}
</script>

Then change your body element like this:

HTML Code:

<body onload="position_gallery()" onresize="position_gallery()">

enduser · #3 (**permalink**) 01-19-11, 07:08 PM

Jerry ,
Thank you for your advice on the script addition. I inserted the script where you had adviced. I may not have added them into the exact spot needed. In IE, the pictures still
align at the top, and with IE and firefox the pictures still do not align centre in all resolutions.
Here's the script as it stands.
Thanks once agian, cheers.
-Andy

bomb-test generated by VisualLightBox.com

Source CODE:

HTML 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" lang="en" xml:lang="en"><head>
		<title>bomb-test generated by VisualLightBox.com</title>
        <style type="text/css">
		<!--

a img { border:none;}
#wrapper {
	position:absolute;
	width:864px;
	height:856px;
	z-index:1;
	left:50%;
	margin-left:-430px;
	background-color: #000000;
	top: 4px;
}
body {
	background-color: #333;
}

}
.style1 {color: #FFFFFF}
#photo-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:2;
	left: 50%;
	top: 82px;
	margin-left:-426px;
}
#o-a-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:3;
	left: 50%;
	top: 82px;
	margin-left:-282px;
}
#pastel-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:4;
	left: 50%;
	top: 82px;
	margin-left:-140px;
}
#wc-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:5;
	left: 50%;
	top: 82px;
	margin-left:3px;
}
#res-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:6;
	left: 50%;
	top: 82px;
	margin-left:148px;
}
#mm-butt {
	position:absolute;
	width:136px;
	height:34px;
	z-index:7;
	left: 50%;
	top: 82px;
	margin-left:290px;
}
#test {
	position:absolute;
	width:805px;
	height:759px;
	z-index:8;
	left: 107px;
	top: 133px;
}
-->
        
        </style>
        
    
        
        
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="bomb-test, VisualLightBox, LightBox, Photo Gallery, Lightbox Gallery2, Lightbox Image Viewer" />
		<meta name="description" content="bomb-test created with VisualLightBox, a free wizard program that helps you easily generate beautiful Lightbox-style web photo galleries" />
		<link rel="shortcut icon" href="favicon.ico" />
		
		<!-- Start VisualLightBox.com HEAD section -->
        <head>
       
		<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
		<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
		<script src="engine/js/vlbdata.js" type="text/javascript"></script>
                 
 <script>
function position_gallery()
{
 var obj = document.getElementById("vlightbox1");
 if (parseInt(navigator.appVersion)>3) {
  if (navigator.appName=="Netscape") {
   var ww = window.innerWidth;
   var gw = obj.clientWidth;
   var l = ((ww-gw)/2)-4;
   obj.style.left = l+"px";
  }
  if (navigator.appName.indexOf("Microsoft")!=-1) {
   var ww = document.body.offsetWidth;
   var gw = obj.offsetWidth;
   var l = ((ww-gw)/2)+16;
   obj.style.left = l+"px";
  }
 }
}
</script>   
		<!-- End VisualLightBox.com HEAD section -->
		
	</head>
	<body onload="position_gallery()" onresize="position_gallery()">
    
    <div id="wrapper"><img src="http://www.hotscripts.com/backgrounds/HQ-PG-BG-base2.jpg" width="864" height="949" /></div>
<label></label>

<div style="width: 790px;height: 600px;overflow:-moz-scrollbars-vertical;overflow-y:auto; 
margin-left:23%;
margin-top:170px;">
<div id="photo-butt"><em> </em><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/photo-butt.jpg" width="136" height="34" /></div>
<div id="o-a-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/o&amp;a-button.jpg" width="136" height="34" /></div>
<div id="pastel-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/pastels-button.jpg" width="136" height="34" /></div>
<div id="wc-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/watercolour-button.jpg" width="136" height="34" /></div>
<div id="res-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/resources-button.jpg" width="136" height="34" /></div>
<div id="mm-butt"><img src="http://www.hotscripts.com/backgrounds/buttons/gal-gal-buttons/mm-button.jpg" width="136" height="34" /></div>
<div id="test"></div>
    
    
    
	
	<!-- Start VisualLightBox.com BODY section id=1 -->
    
	<div id="vlightbox1">
	<a class="vlightbox1" href="data/images1/_igp6217_5_6.jpg" title="_IGP6217_5_6"><img src="data/thumbnails1/_igp6217_5_6.jpg" alt="_IGP6217_5_6"/></a>
<a class="vlightbox1" href="data/images1/_igp5354.jpg" title="_IGP5354"><img src="data/thumbnails1/_igp5354.jpg" alt="_IGP5354"/></a>
<a class="vlightbox1" href="data/images1/_igp5366.jpg" title="_IGP5366"><img src="data/thumbnails1/_igp5366.jpg" alt="_IGP5366"/></a>
<a class="vlightbox1" href="data/images1/_igp5402.jpg" title="_IGP5402"><img src="data/thumbnails1/_igp5402.jpg" alt="_IGP5402"/></a>
<a class="vlightbox1" href="data/images1/_igp5417.jpg" title="_IGP5417"><img src="data/thumbnails1/_igp5417.jpg" alt="_IGP5417"/></a>
<a class="vlightbox1" href="data/images1/_igp5418.jpg" title="_IGP5418"><img src="data/thumbnails1/_igp5418.jpg" alt="_IGP5418"/></a>
<a class="vlightbox1" href="data/images1/_igp5483_acopy_2and2more.jpg" title="_IGP5483 acopy 2And2more"><img src="data/thumbnails1/_igp5483_acopy_2and2more.jpg" alt="_IGP5483 acopy 2And2more"/></a>
<a class="vlightbox1" href="data/images1/_igp5528.jpg" title="_IGP5528"><img src="data/thumbnails1/_igp5528.jpg" alt="_IGP5528"/></a>
<a class="vlightbox1" href="data/images1/_igp5536aa.jpg" title="_IGP5536aa"><img src="data/thumbnails1/_igp5536aa.jpg" alt="_IGP5536aa"/></a>
<a class="vlightbox1" href="data/images1/_igp5562a.jpg" title="_IGP5562a"><img src="data/thumbnails1/_igp5562a.jpg" alt="_IGP5562a"/></a><a class="vlb" style="display:none" href="http://visuallightbox.com">Free Slideshow Script by VisualLightBox.com v4.4</a>
	</div>
	<!-- End VisualLightBox.com BODY section -->
	
	</body>
</html>


[B]vlightbox1.css CODE:[/B]

<style>
#vlightbox1 {
position:absolute;
z-index:100;
width:700px;
zoom:1;
top:170px;
}
.vlightbox1 {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:5px;
width:160px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
/*text-align:center;*/
opacity:0.87;

z-index:20;

}
#vlightbox1 .vlightbox1 a{
margin:0;

}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
opacity:1;
}
#vlightbox1 .vlightbox1 img{
display:block;
border:none;
margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}
</style><!--[if IE]>
<style>
#vlightbox1 {
top:170px;
}
</style>
<![endif]-->

enduser · #4 (**permalink**) 01-23-11, 06:05 PM

I tried replying to this post again, saying the code that you posted Jerry did not work in correcting my problem. Although it has not yet been cleared by a moderator... Still waiting for it to get here.

job0107 · #5 (**permalink**) 01-23-11, 07:12 PM

Your CSS isn't working because you have two opening <head> tags.
The first one is where it is supposed to be, in the beginning of the document.
The second one is here:

HTML Code:

<!-- Start VisualLightBox.com HEAD section -->
        <head>

Remove that second one and see if it helps.

UnrealEd · #6 (**permalink**) 01-24-11, 06:24 AM

I approved your post, so it's visible now. Please use the [html] code tags to highlight html code

enduser · #7 (**permalink**) 01-24-11, 08:48 PM

Jerry, I removed the second <head> tag.
Although it did not help, these centre
alignments have always been so tricky.

Thanks UnrealEd, I'll be sure to [html]isize the next post.

-Andy

job0107 · #8 (**permalink**) 01-24-11, 11:29 PM

This is the exact code I used and it works in IE and FireFox.

HTML 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" lang="en" xml:lang="en">
<head>
<title>bomb-test generated by VisualLightBox.com</title>
<style type="text/css">
<!--

a img { border:none;}
#wrapper {
position:absolute;
width:864px;
height:856px;
z-index:1;
left:50%;
margin-left:-430px;
background-color: #000000;
top: 4px;
}
body {
background-color: #333;
}

}
.style1 {color: #FFFFFF}
#photo-butt {
position:absolute;
width:136px;
height:34px;
z-index:2;
left: 50%;
top: 82px;
margin-left:-426px;
}
#o-a-butt {
position:absolute;
width:136px;
height:34px;
z-index:3;
left: 50%;
top: 82px;
margin-left:-282px;
}
#pastel-butt {
position:absolute;
width:136px;
height:34px;
z-index:4;
left: 50%;
top: 82px;
margin-left:-140px;
}
#wc-butt {
position:absolute;
width:136px;
height:34px;
z-index:5;
left: 50%;
top: 82px;
margin-left:3px;
}
#res-butt {
position:absolute;
width:136px;
height:34px;
z-index:6;
left: 50%;
top: 82px;
margin-left:148px;
}
#mm-butt {
position:absolute;
width:136px;
height:34px;
z-index:7;
left: 50%;
top: 82px;
margin-left:290px;
}
#test {
position:absolute;
width:805px;
height:759px;
z-index:8;
left: 107px;
top: 133px;
}
-->

</style>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="bomb-test, VisualLightBox, LightBox, Photo Gallery, Lightbox Gallery2, Lightbox Image Viewer" />
<meta name="description" content="bomb-test created with VisualLightBox, a free wizard program that helps you easily generate beautiful Lightbox-style web photo galleries" />
<link rel="shortcut icon" href="favicon.ico" />

<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="http://baucheart.com/Galleries/bomb-test/engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="http://baucheart.com/Galleries/bomb-test/engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="http://baucheart.com/Galleries/bomb-test/engine/js/jquery.min.js" type="text/javascript"></script>
<script src="http://baucheart.com/Galleries/bomb-test/engine/js/visuallightbox.js" type="text/javascript"></script>
<script src="http://baucheart.com/Galleries/bomb-test/engine/js/vlbdata.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
<style>
#vlightbox1 {
position:absolute;
z-index:100;
width:700px;
zoom:1;
}
.vlightbox1 {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:5px;
width:160px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
/*text-align:center;*/
opacity:0.87;

z-index:20;

}
#vlightbox1 .vlightbox1 a{
margin:0;

}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
opacity:1;
}
#vlightbox1 .vlightbox1 img{
display:block;
border:none;
margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}
</style>
<!--[if IE]>
<style>
#vlightbox1 {
top:170px;
}
</style>
<![endif]-->

<script>
function position_gallery()
{
 var obj = document.getElementById("vlightbox1");
 if (parseInt(navigator.appVersion)>3) {
  if (navigator.appName=="Netscape") {
   var ww = window.innerWidth;
   var gw = obj.clientWidth;
   var l = ((ww-gw)/2)-4;
   obj.style.left = l+"px";
  }
  if (navigator.appName.indexOf("Microsoft")!=-1) {
   var ww = document.body.offsetWidth;
   var gw = obj.offsetWidth;
   var l = ((ww-gw)/2)+16;
   obj.style.left = l+"px";
  }
 }
}
</script>
</head>
<body onload="position_gallery()" onresize="position_gallery()">

<div id="wrapper"><img src="http://baucheart.com/backgrounds/HQ-PG-BG-base2.jpg" width="864" height="949" /></div>
<label></label>

<div style="width: 790px;height: 600px;overflow:-moz-scrollbars-vertical;overflow-y:auto;
margin-left:23%;
margin-top:170px;">
<div class="butt" id="photo-butt"><em> </em><img src="http://baucheart.com/backgrounds/buttons/gal-gal-buttons/photo-butt.jpg" width="136" height="34" /></div>
<div class="butt" id="o-a-butt"><img src="http://baucheart.com/backgrounds/buttons/gal-gal-buttons/o&amp;a-button.jpg" width="136" height="34" /></div>
<div class="butt" id="pastel-butt"><img src="http://baucheart.com/backgrounds/buttons/gal-gal-buttons/pastels-button.jpg" width="136" height="34" /></div>
<div class="butt" id="wc-butt"><img src="http://baucheart.com/backgrounds/buttons/gal-gal-buttons/watercolour-button.jpg" width="136" height="34" /></div>
<div class="butt" id="res-butt"><img src="http://baucheart.com/backgrounds/buttons/gal-gal-buttons/resources-button.jpg" width="136" height="34" /></div>
<div class="butt" id="mm-butt"><img src="http://baucheart.com/backgrounds/buttons/gal-gal-buttons/mm-button.jpg" width="136" height="34" /></div>
<div id="test"></div>




<!-- Start VisualLightBox.com BODY section id=1 -->
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/_igp6217_5_6.jpg" title="_IGP6217_5_6"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp6217_5_6.jpg" alt="_IGP6217_5_6"/></a>
<a class="vlightbox1" href="data/images1/_igp5354.jpg" title="_IGP5354"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp5354.jpg" alt="_IGP5354"/></a>
<a class="vlightbox1" href="data/images1/_igp5366.jpg" title="_IGP5366"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp5366.jpg" alt="_IGP5366"/></a>
<a class="vlightbox1" href="data/images1/_igp5402.jpg" title="_IGP5402"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp5402.jpg" alt="_IGP5402"/></a>
<a class="vlightbox1" href="data/images1/_igp5417.jpg" title="_IGP5417"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp5417.jpg" alt="_IGP5417"/></a>
<a class="vlightbox1" href="data/images1/_igp5418.jpg" title="_IGP5418"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp5418.jpg" alt="_IGP5418"/></a>
<a class="vlightbox1" href="data/images1/_igp5483_acopy_2and2more.jpg" title="_IGP5483 acopy 2And2more"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp5483_acopy_2and2more.jpg" alt="_IGP5483 acopy 2And2more"/></a>
<a class="vlightbox1" href="data/images1/_igp5528.jpg" title="_IGP5528"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp5528.jpg" alt="_IGP5528"/></a>
<a class="vlightbox1" href="data/images1/_igp5536aa.jpg" title="_IGP5536aa"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp5536aa.jpg" alt="_IGP5536aa"/></a>
<a class="vlightbox1" href="data/images1/_igp5562a.jpg" title="_IGP5562a"><img src="http://baucheart.com/Galleries/bomb-test/data/thumbnails1/_igp5562a.jpg" alt="_IGP5562a"/></a><a class="vlb" style="display:none" href="http://visuallightbox.com">Free Slideshow Script by VisualLightBox.com v4.4</a>
</div>
<!-- End VisualLightBox.com BODY section -->

</body>
</html>

enduser · #9 (**permalink**) 01-25-11, 12:05 AM

Jerry,
After copying your revised script it worked !!! Truely amazing, I really can't thank you enough.
This enables me to now generate all the galleries and get them uploaded , sending me onto
the next stages of this website. Which is great, now I have time to sit down, read and learn some css, dreamweaver operations, java and good old html. I had volunteered to work on this site (with some time restrictions) all the while trying to re-learn most aspects. This was an easy way out... but it gets the artists
work onto the web as desired. Cheers and thank you.

Thanks from: BAUCHE ART - Common Sparrow Studios 'Common Sparrow Studios'
(Now flying through development, Thanks to Jerry)

-Andy Bauche

job0107 · #10 (**permalink**) 01-25-11, 12:12 AM

Your welcome.