website design gold coast
website design gold coast

Photospace plugin examples

Here are some example of the different kinds of layouts you can achieve and the code to do it.

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