Hello:
I went ahead and re sized the gallery via the style sheet to meet my image size needs. The gallery works great with the exception of one problem. When I mouse over the thumbnails they do not always position themseleves over the thumbox section, sometimes they show up cut off to the right of the thumnail with the top of the image being very close to where the mouse cursor is.
The site is http://dev.photographybee.com
Here is my design.css file:
#gallery #galleries #controls {
font-family: Verdana, Geneva, sans-serif;
height: 17px;
padding: 3px;
margin:0 auto;
width:795px;
border-bottom:1px solid #333;
text-align:left;
/*background-image: url(controls_bg.png);
background-repeat: repeat-x; */
color:#FFF;
}
#gallery #thumbnails {
height: 55px;
text-align: center;
width: 720px;
margin: 0 auto 0;
overflow: hidden;
position: relative;
}
#gallery {
font-family: Verdana, Geneva, sans-serif;
font-size: .9em;
width: 840px;
margin: 0 auto;
height: 592px;
position: relative;
z-index: 1;
overflow: hidden;
}
#gallery #galleries {
background: #333 url(images_bg.png) repeat-x;
position: absolute;
left:19px;
bottom: -567px;
height: 590px;
width: 800px;
text-align: center;
z-index: 50;
cursor: pointer;
border:1px solid #333;
}
#images {
height: 500px;
text-align: center;
position: relative;
width: 800px;
overflow: hidden;
margin:0 auto 0;
/*background: #333 url(images_bg.png) repeat-x; */
border-left: 1px solid #333;
border-right: 1px solid #333;
border-top: solid #333 1px;
}
#imagewrap {
position:absolute;
margin:0 auto;
width: 0px;
height: 0px;
top: 200px;
left: 380px;
}
#imgsrc{
cursor: pointer;
}
#thumbnailwrap {
left: 0px;
position: absolute;
}
.thumbnail {
background: #333;
margin: 7px 6px;
float: left;
height: 42px;
width: 42px;
border: solid #333 1px;
cursor: pointer;
overflow:hidden;
}
#gallery #thumbbox {
width: 800px;
margin:0 auto;
position:relative;
border:1px solid #333;
background: url(thumbwrap.png) no-repeat;
padding: 8px 0 0 0;
overflow: hidden;
height: 57px;
}
#loading {
height: 87px;
width: 150px;
position: absolute;
background-image: url(loading.png);
background-repeat: no-repeat;
background-position: center center;
z-index: 8888;
left: 311px;
top: 189px;
}
.gallery {
float: left;
height: 200px;
width: 250px;
background-image: url(gallery_bg.png);
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
#gallery #next {
height: 510px;
width: 19px;
background-image: url(next.png);
background-repeat: no-repeat;
background-position: right center;
position: absolute;
right: 0px;
cursor: pointer;
z-index: 5;
}
#gallery #previous {
height: 510px;
width: 19px;
background-image: url(prev.png);
background-repeat: no-repeat;
background-position: left center;
position: absolute;
left: 0px;
cursor: pointer;
z-index: 5;
}
#loading #loadingbar {
position: relative;
width: 100%;
height: 87px;
}
#loading #loadingbar #bar {
position: absolute;
bottom: 19px;
left: 44px;
width: 50px;
height: 50px;
}
#largeimage {
height: 0px;
width: 0px;
position: absolute;
z-index: 99;
overflow: visible;
}
#backdrop {
background-color: #000;
height: 0px;
width: 0px;
position: absolute;
z-index: 98;
left: 50%;
top: 0px;
cursor:pointer;
}
#largeimage #closebtn {
background-image: url(closebtn.png);
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 28px;
z-index: 100;
position: absolute;
left: -8px;
top: -8px;
cursor:pointer;
}
#galleryset .gallery h3 {
font-size: 1.3em;
font-weight: bold;
color: #666666;
margin: 10px 15px;
padding: 0px;
}
.tooltips{
z-index: 9999999;
}
.tip {
font-family: Verdana, Geneva, sans-serif;
color: #CCC;
width: 220px;
}
.tip-top {
margin: 0;
color: #CCCCCC;
padding: 37px 30px 0px 30px;
background: url(tip-top.png) top left;
}
.tip-title{
font-weight:bold;
font-size: 1.1em;
margin: 0;
color: #FFF;
padding: 0px 30px 3px 30px;
background: url(tip-middle.png) bottom right;
}
.tip-text {
font-size: 1.0em;
padding: 5px 30px 0px 30px;
background: url(tip-middle.png) bottom right;
}
.tip-bottom {
padding: 0px 25px 42px;
background: url(tip-bottom.png) bottom right;
}
.minitooltips{
z-index: 9999999;
}
.minitooltips .tip {
color: #FFF;
width: 130px;
}
.minitooltips .tip-top {
margin: 0;
color: #CCCCCC;
padding: 9px 12px 0px 12px;
background: url(minitop.png) top left;
}
.minitooltips .tip-title{
font-family: Verdana, Geneva, sans-serif;
text-align:center;
font-weight:normal;
font-size: .8em;
margin: 0;
color: #FFF;
padding: 0px 12px 3px 12px;
background: url(minimiddle.png) bottom right;
}
.minitooltips .tip-text {
text-align:center;
font-size: .8em;
padding: 8px 12px 0px 12px;
background: url(minimiddle.png) bottom right;
}
.minitooltips .tip-bottom {
padding: 0px 12px 8px;
background: url(minibottom.png) bottom right;
}
.gallery .galleryimg {
position: absolute;
left: 23px;
top: 37px;
}
#gallery #thumbbox #thumbleft {
width: 40px;
height: 65px;
left: 0px;
position: absolute;
background: url(left_arrow.png) no-repeat center center;
visibility: hidden;
cursor: pointer;
}
#gallery #thumbbox #thumbright {
height: 65px;
width: 40px;
position: absolute;
background: url(right_arrow.png) no-repeat center center;
right: 0px;
visibility: hidden;
cursor: pointer;
}
#gallery #images #smallmessage {
background-image: url(message-popup.png);
background-repeat: no-repeat;
background-position: center top;
position: absolute;
bottom: -85px;
height: 76px;
width: 205px;
text-align: center;
padding: 8px 5px 0px;
color: #CCC;
font-size: 1.2em;
}
#gallery #images #imageinfo {
position: absolute;
bottom: -300px;
height: 250px;
width: 90%;
text-align: center;
padding: 5px 5px 0px;
color: #333;
font-size: 1.0em;
}
#largeimage #lrgloader {
overflow: hidden;
}
#largeimage #lrgwrap {
overflow: hidden;
border: 1px solid #333;
background:#000;
}
#imageinfo #infoloader {
font-size: 1.0em;
color: #E1E1E1;
text-align: left;
margin: 0px;
position: releative;
}
#infoloader h2 {
font-size: 1.7em;
font-weight: bold;
color: #333;
margin: 0px;
padding: 0px;
text-shadow:#000;
}
#infoloader .copyright {
font-size: .9em;
}
#infoloader .author {
font-size:.9em;
}
.right {
float: right;
}
#fsbox {
width: 379px;
margin: 0 auto;
overflow:hidden;
height:300px;
z-index: 51;
position: absolute;
bottom: -350px;
left: 200px;
color: #FFF;
}
#fsbox #fsbutton {
color: #000;
background: url(buybutton.png) no-repeat center bottom;
height: 15px;
text-align: center;
padding: 2px 0 0 0;
margin:2px 0 6px;
font-size: 1.0em;
position: relative;
cursor:pointer;
}
#fsbox #fstop {
background: url(buynow_top.png) no-repeat center top;
height: 19px;
text-align: center;
padding: 0;
margin:0;
}
#fsbox #forsale {
background-image: url(buynow_middle.png);
background-repeat: repeat-y;
margin: 0px;
padding: 0 15px 20px;
position:relative;
}
#fsbox #forsale img{
padding: 0 10px 10px;
}
#fsbox hr {
clear:both;
visibility:hidden;
}
#fsbox #fsclose{
background-image: url(closebtn.png);
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 28px;
z-index: 220000;
cursor:pointer;
position: absolute;
left: 0px;
top: 15px;
}
#purchasebtn{
font-weight:bold;
text-align:center;
margin:10px;
padding:11px 0 0 5px;
position:absolute;
right:15px;
top:0px;
}
#gallery #galleries #galleryset {
text-align: left;
width: 800px;
margin: 0 auto;
}
#thumbnailPopUp{
z-index:1;
visibility:hidden;
background:url(pop_arrow.png) no-repeat center bottom;
padding-bottom:8px;
position:relative;
top:0;
left:-10000px;
}
#thumbnailPopUp img{
margin:0;
padding:0;
background:#333;
border:#FFF solid 3px;
}
.clear{clear:both;}