[Resolved] Woo Single Product Thumbnail Gallery with carousel

Home Forums Support Woo Single Product Thumbnail Gallery with carousel

This topic contains 5 replies, has 2 voices, and was last updated by  David 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #599302

    Rafik

    Hi David, as suggested here’s a new ticket following our conversation (June 12, 2018 at 2:22 pm #598575 from the old thread started on April 14, 2017 at 3:54 am #305812).

    Firstly, just a big thank you for the prompt response, followed by my request:

    Having the ability to change the thumbnail gallery on Single Product Page Layout via CSS, I wonder if the thumbnails can be wrapped in a carousel with set % of width or height with respect to the Main Product Image, while the carousel is placed to the left (vertical) or bottom (horizontal).

    Currently, the code available on the old support thread is making the thumbnail images overlap on the subsequent section, as it has no limit on the number of images displayed, i.e. a carousel will do the job.

    Note: if any extra coding (i.e. PHP, etc) is needed, please address and I’ll implement it.

    Many thanks in advance for your support.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #599314

    David Customer Support

    Hi Rafik,

    you can try this more up to version of the code, it falls to default version on Mobile:

    /* VERSION 1 - Vertical Scrolling Thumbnails */
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        padding: 5px 5px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    @media (min-width: 420px) {
        .woocommerce-page div.product div.images {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-item-align: center;
            align-self: center;
        }
        .woocommerce div.product div.images .flex-control-thumbs {
            -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
            order: -1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-flex: 1;
            -ms-flex: 1 0 80px;
            flex: 1 0 80px;
            /* Adjust PX to suit width of thumbnails */
            max-height: 425px;
            /* Adjust Height to Image height on desktop */
            overflow: auto;
        }
        .woocommerce div.product div.images .flex-control-thumbs li {
            width: 100%;
            padding: 0 10px 10px 0;
        }
    }
    
    /* VERSION 2 - Horizontal Scrolling Thumbnails */
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        padding: 5px 5px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 25%;
        flex: 1 0 25%;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: auto;
    }

    Getting the height of the Thumbnail column to match the gallery image is tricky, yet to find a CSS way to do it, would probably need JS. Hence the comments above to set the max height of them to suit.

    EDIT: Added 2 versions – vertical and horizontal thumbnails.

    #599612

    Rafik

    Wow! David, we’re getting there! Works well, just a bit of fine-tuning might do the trick…

    Two things:
    1.- I tried “inline-block” to make it horizontal + “row”, but the scroll bar doesn’t show when horizontal, is like a box that contains the thumbnails and shrinks as I add more images. May you issue a code for horizontal under the main image, please?
    2.- Would you help me styling the scroll bar, for instance just leave the arrows while the scroll bar goes transparent/translucent or something nicer.

    You’ve done a great job with the piece of CSS. May I kindly ask you for a reference site(s) where all the properties related to “flex-control” / “flex-viewport” are explained?

    #599792

    David Customer Support

    Hi, i have edited the code above to include both a vertical and horizontal version. I have also added prefixes for cross browser support.

    The scrollbar styles default to the browser stying. This article and related codepen are good sources for styling them. Note this isnt supported by all browsers so tread carefully:

    https://scotch.io/tutorials/customize-the-browsers-scrollbar-with-css

    Flex-control / Flex-viewport are just the CSS Selector names that were applied to those elements by the developer. The CSS for this example is flexbox which here is one of many good resources:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    #599902

    Rafik

    Awesome David, works like charm and is now a matter of learning and tweaking with the links you provided.

    Really appreciated your support, have a good one!

    #599910

    David Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.