search

payalord / xZoom

jQuery Zoom Gallery plugin
https://payalord.github.io/xZoom/
Apache License 2.0
165 stars 65 forks source link

Thumbs carousel #53

Closed ermushko closed 3 years ago

ermushko commented 6 years ago

Is there a simple way to align thumbs in one line with navigation arrows to look like a carousel? If there is a lot of thumbnails under main photo, they wrap into two or even three lines what's not cool looking. I could code it with some bootstrap carousels, but... :)

This: 0001 to that: 0002

payalord commented 6 years ago

You are free to apply any styles to thumbs and it's wrapper element i think. But xZoom doesnt' have out of the box carousel's feature. Anyway this is good idea, maybe i should add an example to sandbox with carousel.

Agaemini commented 6 years ago

Hi,

this can easily done by adding a slick slider to your gallery div.

But maybe someone has an idea to get this a little bit more mobile friendly. I would like to have no gallery at a special width and the slider would then be on the main image.

Example for a slider:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xZoom</title>
<link type="text/css" rel="stylesheet" media="all" href="https://unpkg.com/xzoom/dist/xzoom.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/xzoom/dist/xzoom.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
(function ($) {
    $(document).ready(function() {

        //We can use ID instead of class name for main source image
        $("#main_image, .xzoom-gallery").xzoom();

        $('#gallerySlider').slick(
        {
           slidesToShow: 3,slidesToScroll: 1, dots: true, infinite: true
        });
    });
})(jQuery);
</script>
</head>
<body style="background: #000;">
    <div style="text-align:center;">
        <div style="border:1px solid #ccc; display:inline-block; line-height:0;">
            <!-- Using ID instead of class name -->
            <img id="main_image" src="gallery/preview/01_b_car.jpg" xoriginal="gallery/original/01_b_car.jpg" />
        </div>

        <div id="gallerySlider" style="margin-top:10px;margin: 0 auto;max-width: 400px;">
            <a href="gallery/original/01_b_car.jpg" style="display: inline-block;">
                <img class="xzoom-gallery" width="68" src="gallery/thumbs/01_b_car.jpg" xpreview="gallery/preview/01_b_car.jpg" />
            </a>

            <a href="gallery/original/02_o_car.jpg" style="display: inline-block;">
                <img class="xzoom-gallery" width="68" src="gallery/thumbs/02_o_car.jpg" xpreview="gallery/preview/02_o_car.jpg" />
            </a>

            <a href="gallery/original/03_r_car.jpg" style="display: inline-block;">
                <img class="xzoom-gallery" width="68" src="gallery/preview/03_r_car.jpg" />
            </a>

            <a href="gallery/original/04_g_car.jpg" style="display: inline-block;">
                <img class="xzoom-gallery" width="68" src="gallery/preview/04_g_car.jpg" />
            </a>
        </div>
    </div>
</body>
</html>
payalord commented 6 years ago

@Agaemini maybe only if you will hide thumbs by css, but thumb links with imge tags still exists on the page as elements and xZoom will be able to initialize them. Then need to add 2 switch buttons like - left, right. And do something like here: https://github.com/payalord/xZoom/issues/28, but instead of keyboard navigation trigger it when clicked those left right buttons.