hey guys… long time lurker first time poster 
http://barbarapurdydesign.com/site/
I purchased this gallery code from CodeCanyon and I’m trying to figure out how to center it vertically on the page. Keeping in mind I need to keep the footer where it is (static to the bottom of the page)
So I want it centered vertically. Because right now on different screen resolutions it looks a bit funky… especially on more vertically sized resolutions.
Any help? thanks!!
The class needs to be on the anchor and not the image
<a href="#thumb" class="thumbnail [B]thumbnailstay[/B]"><img width="100px" height="100px" border="0" src="images/gbay/006_thumb.jpg"><span><img src="images/gbay/006.jpg"></span></a>
sorry it was for this page:
http://barbarapurdydesign.com/site/hillhouse.php
I tried adding the code but it doesn’t put it where the rest are…?
Hi, Welcome to Sitepoint
You can only (easily) centre the element vertically as long as it is always the same height.
Assuming your content is 500px high then you would need to do this:
[B]html,body{
height:100%;
margin:0;
padding:0
}
#hoz{
height:50%;
margin-top:-299px;
float:left;
width:100%;
}
#wrap {
margin:0 auto;
height:500px;
clear:both;
}
[/B]
Then add this html:
<body>
[B]<div id="hoz"></div>[/B]
<div id="wrap">
The technique works by putting a 50% high float above the content and then dragging the float back upwards bu half the content height. This ensures that the content is vertically centred and unlike other methods does not disappear off the top of the screen. (I added some extra margin to take into account the footer height.)
Hi,
You didn’t say which page you had added it to?
Looking at the code it seems you could add an extra class to one of the thumbnails and then set that to display by default.
e.g.
.[B]thumbnailname[/B] span{visibility:visible;top:0;left:230px;z-index;50}
That’s basically the same code as the hover code except that it applies to just one image with that unique classname.
You would also need to ensure that the first image displayed is smaller than the rest (or the same size) because the other images will need to sit on top and hide it when hovered.
I have a similar demo here which shows the hover effect on inks but is the same as if they were images.
so I was having issues and changed the way the gallery looks again… check out the same site above.
im now using this:
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
does anyone know how to make the first image a “default” image? so that there is a larger image present when the site is loaded and is not blank?
also does the whole thing look centered horizontally to you guys?
I feel like something is off…
Thank you!
For the footer the easiest solution is to measure the exact width of those two elements and then place them both in a parent div of fixed width and use margin:auto to automatically center them. At present you just have one element at 3% from the left which is just an approximation.
ah sweet. thank you.
is there a code I should add to the footer for the content to be more centered? I think it’s a bit off kilter.
thank you very much for all your help. i wish I could figure out this stuff on my own but my knowledge is very limited.
You could add this to your style sheet:
img.downarrow {opacity: 0.8 !important;}
and how to make the scrolling stop… I want it to manual scroll… I would assume most of this would have to be done in the JS file?
Yes, but it’s a bit hard to understand that minified file—a bit beyond me. Most gallery scripts have an easy way to turn features like that on or off, and they are free. You don’t always get what you pay for. 
another question on this site…
do you know how to stop the down arrow button from appearing on hover? I just want it to stay on.
and how to make the scrolling stop… I want it to manual scroll.
this was created by someone else (as mentioned) and they’re not being very helpful.
I would assume most of this would have to be done in the JS file?
thank you
I looked in the JS file and it’s not even formatted like a JS file… so I wouldn’t even know where to play around to get it to do what I wanted it to do…
but this will work for now… thank you!
of course I made typos… lol. I really can’t stand coding!!
thank you for your help… works great
Hi,
You made some typos in my code
Here is the whole working page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>BARBARA PURDY DESIGN || www.barbarapurdydesign.com</title>
<meta name="description" content="Barbara Purdy Design is a interior designer who has worked with various clients and has appeared on HGTV's Home to Stay" />
<meta name="keywords" content="barbara curdy design, barabara purdy design, BPD, interior design, interior designers toronto, toronto ontario canada, canada, hgtv, hgtv canada, home to stay, peter fallico, olivia bootie, tv designers, toronto designers, gta designers, gta interior designer, gta, toronto, mississauga, north york, oakville, etobicoke, forest hill" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
<style type="text/css">
@font-face {
font-family: 'BellGothicStdLight';
src: url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-light-webfont.eot');
src: local('☺'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-light-webfont.woff') format('woff'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-light-webfont.ttf') format('truetype'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-light-webfont.svg#webfontFLqzS0IN') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BellGothicStdBold';
src: url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-bold-webfont.eot');
src: local('☺'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-bold-webfont.woff') format('woff'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-bold-webfont.ttf') format('truetype'), url('http://barbarapurdydesign.com/site/fonts/bellgothicstd-bold-webfont.svg#webfontStN6OXL0') format('svg');
font-weight: normal;
font-style: normal;
}
.BellGothicStd-Light {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'BellGothicStdLight', sans-serif;
font-size-adjust: 0.48;
}
.BellGothicStd-Bold {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'BellGothicStdBold', sans-serif;
font-size-adjust: 0.52;
}
* {
padding :0;
margin:0;
}
#description {margin-top: 50px;}
pre {font-size: 8pt;}
html,body{
height:100%;
margin:0;
padding:0
}
body {
background: #303030;
font-family: Arial;
}
#hoz{
height:50%;
margin-top:-299px;
float:left;
width:100%;
}
#wrap {
margin:0 auto;
height:500px;
clear:both;
overflow: hidden;
width: 800px;
}
a {
color: #C2B281;
text-decoration: none;
}
a:hover {
color: #C2B281;
text-decoration: underline;
}
img {
border: 0;
}
.itunesfeature {
width: 1000px;
height: 500px;
position: relative;
display: none;
overflow: hidden;
font-family: Verdana, Tahoma, "Lucida Sans";
font-size: 9pt;
font-weight: normal;
}
.itunesfeature #transparentGlass {
width: 1000px;
height: 500px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
cursor: pointer;
}
.itunesfeature img {
width: auto;
height: 1000px;
}
.itunesfeature #billboardone, .itunesfeature #billboardtwo {
position: absolute;
top: 0px;
left: 0px;
height: 1000px;
width: 500px;
z-index: -1;
}
.itunesfeature #paneltwo {
opacity : 0.0;
z-index: -2;
}
.itunesfeature #carrousel {
margin-left: 510px;
position: relative;
padding: 0px;
z-index: 0;
list-style: none;
}
.itunesfeature #carrousel li {
width : 200px;
height: 100px;
overflow: hidden;
}
.itunesfeature .downarrow {
height: 116px;
width: 23px;
cursor: pointer;
background: url(http://barbarapurdydesign.com/site/images/downarrow.png) no-repeat;
z-index: 1000;
position: absolute;
top: 450px;
left: 600px;
}
.itunesfeature .featuretitle {
position: absolute;
bottom: 20px;
left: 20px;
color: #FFF;
padding: 3px 6px;
z-index: 100;
}
.itunesfeature .downarrowIE6 {
background: url(http://barbarapurdydesign.com/site/images/downarrow.gif);
}
.itunesfeature .featuretitleIE6 {
background: #000;
}
.footer {
margin: auto;
width: 100%;
background-color: #1d1d1d;
height: 85px;
text-align: center;
color: #C2B59B;
font-size:14px;
font-family:Verdana;
padding-top: 10px;
position:fixed;
left:0px;
bottom:0px;
}
#logo {
float: left;
margin-left: 25%;
width: 311px;
}
#menu {
margin-left: 30px;
float: left;
}
#menu ul {
list-style: none;
}
#menu li {
padding: 10px;
display: inline;
}
</style>
<script type="text/javascript" src="http://barbarapurdydesign.com/site/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://barbarapurdydesign.com/site/js/ItunesFeature-min.js"></script>
<script type="text/javascript">
$(window).ready(function(){
jQuery("#feature").itunesFeature();
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="hoz"></div>
<div id="wrap">
<div id="feature" class="itunesfeature">
<div> <img src="http://barbarapurdydesign.com/site/images/gbay/001_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/001.jpg" alt=""/> </div>
<div> <img src="http://barbarapurdydesign.com/site/images/gbay/002_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/002.jpg" alt=""/> </div>
<div> <img src="http://barbarapurdydesign.com/site/images/gbay/003_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/003.jpg" alt=""/> </div>
<div> <img src="http://barbarapurdydesign.com/site/images/gbay/004_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/004.jpg" alt=""/> </div>
<div> <img src="http://barbarapurdydesign.com/site/images/gbay/005_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/005.jpg" alt=""/> </div>
<div> <img src="http://barbarapurdydesign.com/site/images/gbay/006_thumb.jpg" alt=""/> <img src="http://barbarapurdydesign.com/site/images/gbay/006.jpg" alt=""/> </div>
</div>
</div>
<div class="footer">
<div id="logo"><a href="index.php" title="Barbara Purdy Design"><img src="http://barbarapurdydesign.com/site/images/bpd_logo.png"></a></div>
<div id="menu">
<ul>
<li class="BellGothicStd-Light samplebox" style="font-size:17px;"><a href="company.php" title="company">company</a></li>
<li class="BellGothicStd-Light samplebox" style="font-size:17px;"><a href="portfolio.php" title="portfolio">portfolio</a></li>
<li class="BellGothicStd-Light samplebox" style="font-size:17px;"><a href="press.php" title="press">press</a></li>
<li class="BellGothicStd-Light samplebox" style="font-size:17px;"><a href="contact.php" title="contact">contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Just copy the whole page and then run it while online as I have made the urls absolute so that you can see it is indeed working. Once you are happy with it then convert the urls back to relative and update your site with the code.
I can’t remember all the typos but there was a missing semi-colan two opening body tags and I amalgamated and re-organised the body rules which I didn’t show last time.
Any problems let me know but its working locally for me:)
thank you for your response!
unfortunately it killed my main image and still didnt work… the site has been updated with your added code…