Pager (thumbnails) position to the right

I would also like to know the answer to this question. I put this shortcode on my page:

[portfolio_slideshow pagerstyle=thumbs pagerpos=top fluid=true class=pager-right]

And this into the main theme stylesheet (I’m using the Expositio theme, if that makes a difference):

.pager-right .portfolio-slideshow {
clear: none !important;
float: left;
margin:0 !important;
width: 660px !important;
}

.pager-right .psthumbs {float: right;
width: 67px !important;
margin:0 0 8px 0 !important;
}

But the only difference is that it moves the thumbnails above the image instead of below it.

Here is the page I am working on:

https://www.mirandameeks.com/illustration/

Any help would be so awesome!

Hi,

Also having the same question. Was wondering if there is a solution to place the thumbnails on the right instead of on the bottom or top.

Hi Miranda,

I visited your website and looks like you found a solution. Did the shortcode listed work for you?

Thanks so much!

Kelvin

Hi Kelvin,

I tried multiple shortcodes that I found in the forums, but nothing seemed to work. In the end, I switched to a different gallery plugin called Photospace Gallery that worked for me.

Thanks,

Miranda

This was the closest I’ve found

.pscarousel {
    float: right;
    width: 35%;
    margin-top: -50%;
    z-index: 999;
}

.slideshow-wrapper .pager img {
    width: 30%;
    float: left;
}

#portfolio-slideshow0.portfolio-slideshow [stlye]{
  float: left;
  width: 48% !important;
  height: auto;
}

.portfolio-slideshow {
    width: 50% !important;
}

It worked, but the pager div jumps around as you click on different images. If I could solve that it would be perfect.

thank you.
My design it to put the thumbnail to the left of the main image.
I guess that we need to change css as well as this file:

\wp-content\plugins\portfolio-slideshow\inc\shortcode.php

All <div> classes are defined in there.

this can be tricky depending on your wrapper width, you may have to adjust some of the paramaters in the shortcode and or css. The main thing is for the thumbs to float left.

this is what I use:

[portfolio_slideshow class="pager-left" fluid=true width=450 pagerwidth=300]

CSS:

/*thumbnails*/
.pager-left .psthumbs
width:300px;
{
border:none;
float:left;
display: inline; 

}
/*main image*/
.pager-left .portfolio-slideshow  {
width:450px;
clear: none;
display: inline-block !important;
}
/*navigation*/
 .pager-left .slideshow-nav {
    margin-left: auto;
    margin-right: auto;
    text-align: left !important;
    width: 100%;
}