Here are some example of the different kinds of layouts you can achieve and the code to do it.
Use these settings [photospace horizontal_thumb=true sync_transitions=0]
Add this to style.css in your theme folder. You may need to adjust to suit the size of your gallery (see comments).
.photospace {
position:relative;
margin-bottom: 20px !important;
min-height: 200px; /* space for loader */
}
.photospace,
.photospace .thumnail_col,
.photospace .gal_content,
.photospace .slideshow-container,
.photospace .slideshow span,
.photospace .slideshow a.advance-link,
.photospace .slideshow img{
width: 100% !important;
height: auto !important;
}
.photospace .slideshow span{
display: block !important;
}
.photospace .gal_content{
float: none !important;
}
.photospace .slideshow span{
position: relative !important; /* Keep the gallery height - Doesn't work with synced transistions */
}
.photospace .loader{
width: 100px !important;
height: 100px !important;
top: 50% !important;
left: 50% !important;
margin-left: -50px;
}
.photospace .thumbs_wrap2{
min-height:45px; /* space for thumbnails */
overflow: hidden;
}
.photospace .thumbs{
min-height:40px;
}
.photospace .thumbs_wrap{
float: left;
left: 50%;
position: relative;
}
.photospace .pageLink.next{
margin-right:0;
}
.photospace .thumnail_col {
float: left;
left: -50%;
width:auto !important;
position: relative;
}
.photospace ul.thumbs {
float:left;
}
.photospace span.image-caption{
position: inherit !important;
}
[photospace id=543 use_paging=1]
Use these settings
[photospace horizontal_thumb=true num_thumb=4]
Add this to style.css in your theme folder. You may need to adjust to suit the size of your gallery (see comments).
.photospace{
position:relative;
margin-bottom: 80px !important; /* space for row of thumbs */
}
.photospace .slideshow img {
vertical-align:bottom !important;
}
.photospace .slideshow span.image-wrapper {
bottom:0;
}
.photospace ,
.photospace .thumnail_col,
.photospace .gal_content,
.photospace .loader,
.photospace .slideshow a.advance-link{
width:420px; /* width of main image */
}
.photospace .thumbs_wrap2{
height:60px; /* height of thumbnails */
width:100%;
position:absolute;
bottom:-70px;
left:0;
overflow: hidden;
}
.photospace .thumbs_wrap{
float: left;
left: 50%;
position: relative;
}
.photospace .pageLink.next{
margin-right:0;
}
.photospace .thumnail_col {
float: left;
left: -50%;
width:auto !important;
position: relative;
}
.photospace ul.thumbs {
float:left;
}
.photospace a.advance-link {
line-height: 370px; /* height of main image */
}
Use these settings
Add this to style.css in your theme folder. You may need to adjust to suit the size of your gallery (see comments).
.photospace {
position:relative;
margin-bottom: 20px !important;
}
.photospace .slideshow span.image-wrapper {
bottom:0;
}
.photospace ,
.photospace .thumnail_col,
.photospace .gal_content,
.photospace .loader,
.photospace .slideshow a.advance-link{
width:420px; /* width of main image */
}
.photospace .thumbs_wrap2{
height:60px;
overflow: hidden;
}
.photospace .thumbs_wrap{
float: left;
left: 50%;
position: relative;
}
.photospace .pageLink.next{
margin-right:0;
}
.photospace .thumnail_col {
float: left;
left: -50%;
width:auto !important;
position: relative;
}
.photospace ul.thumbs {
float:left;
}
[photospace id=543]
Add this to style.css in your theme folder. You may need to adjust to suit the size of your gallery.
.photospace .thumnail_col {
float:right !important;
}
.photospace .gal_content {
float:left !important;
}
.photospace ul.thumbs li {
margin-left:10px;
margin-right:0 !important;
}
.photospace .thumnail_col a.pageLink {
margin-left:10px;
margin-right:0;
}