Photospace plugin examples

Horizontal responsive layout

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;
}

With Paging enabled

[photospace id=543 use_paging=1]

Horizontal thumbnails bottom

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 */
}

Horizontal thumbnails top

[photospace id=543 horizontal_thumb=true num_thumb=4]

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;
}

Thumbnails on the right

[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;
}