WordPress.org

Ready to get started?Download WordPress

Forums

Portfolio Slideshow
Pager (thumbnails) position to the right (7 posts)

  1. ultraloveninja
    Member
    Posted 1 year ago #

    Hello!

    I was wondering if it's possible to positon the thumbnails to the right (or left) instead of at the top or bottom without having to hack through the CSS?

    Let me know when you get a moment. Thanks!

    http://wordpress.org/extend/plugins/portfolio-slideshow/

  2. mirandameeks
    Member
    Posted 1 year ago #

    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:

    http://www.mirandameeks.com/illustration/

    Any help would be so awesome!

  3. kelvinycheng
    Member
    Posted 1 year ago #

    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

  4. mirandameeks
    Member
    Posted 1 year ago #

    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

  5. chiseledimages
    Member
    Posted 1 year ago #

    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.

  6. dodotoron@gmail.com
    Member
    Posted 1 year ago #

    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.

  7. deepbevel
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.