Hi,
Gallery is a great module and works well with square thumbs. I am trying to use the Lightbox template to display nonsquare thumbs and vertically centre the thumbs, but I have had little success with the supplied CSS. Has anyone had any luck on how to do this. many thanks
[SOLVED]Lightbox in Gallery thumbnails
[SOLVED]Lightbox in Gallery thumbnails
Last edited by vicpug on Sun Aug 29, 2010 1:50 am, edited 1 time in total.
Re: Lightbox in Gallery thumbnails
If you Google on vertical align with css you will find it is very hard... I myself don't know a way to accomplish this
Re: Lightbox in Gallery thumbnails
A link to the site would help...
Re: Lightbox in Gallery thumbnails
My apologies, link is http://www.photoessence.com.au/cmsms/index.php?page=see-my-works
thanks indeed.
thanks indeed.
Re: Lightbox in Gallery thumbnails
you could use backgroundimages with background-position:center center; instead of using tags.
Re: Lightbox in Gallery thumbnails
Here's the very simple CSS needed to do this.
.gallery {
text-align:center;
}
.gallery .img {
display:inline-block;
margin:10px auto;
max-height:240px;
vertical-align:middle;
}
.gallery .img a {
border:2px solid #DDDDDD;
display:block;
margin:0 10px;
padding:1px;
}
.gallery img {
border:medium none;
}
Note:
for IE6 you will need the following CSS ruleset in a conditional comment:
.gallery .img {display:inline;zoom:1}/* this will force IE6 to respect display:inline-block and show the correct vertical alignment */
Note:
You have two declarations on that page. Actually it is an entire extra html document inside of the template. You will need to clear up those errors.
.gallery {
text-align:center;
}
.gallery .img {
display:inline-block;
margin:10px auto;
max-height:240px;
vertical-align:middle;
}
.gallery .img a {
border:2px solid #DDDDDD;
display:block;
margin:0 10px;
padding:1px;
}
.gallery img {
border:medium none;
}
Note:
for IE6 you will need the following CSS ruleset in a conditional comment:
.gallery .img {display:inline;zoom:1}/* this will force IE6 to respect display:inline-block and show the correct vertical alignment */
Note:
You have two declarations on that page. Actually it is an entire extra html document inside of the template. You will need to clear up those errors.
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
--
LinkedIn profile
--
I only speak/write in English so I may not translate well on International posts.
--
--
LinkedIn profile
--
I only speak/write in English so I may not translate well on International posts.
--