https://www.dreamer-van.co.uk/js/miniatures-carousel.js

1// Limite l'affichage a 3 miniatures visibles dans #cycleNav des pages modele.
2// Au-dela : carousel vertical avec fleches, auto-scroll quand la grande image change.
3(function ($) {
4    var VISIBLE = 3;
5
6    function computeItemH($items) {
7        // Mesure = espacement effectif entre debut item 1 et debut item 2
8        // (inclut border + padding + margin reels, quel que soit le CSS)
9        if ($items.length < 2) return $items.first().outerHeight(true) || 148;
10        var t0 = $items.eq(0).offset().top;
11        var t1 = $items.eq(1).offset().top;
12        var h = t1 - t0;
13        return (h && h >= 20) ? h : ($items.first().outerHeight(true) || 148);
14    }
15
16    function build($nav) {
17        if ($nav.parent().hasClass('cycleNav-viewport')) return;
18
19        var $items = $nav.find('.element');
20
21        $nav.wrap('<div class="cycleNav-viewport"></div>');
22        var $viewport = $nav.parent();
23        var $up = $('<button type="button" class="cycleNav-arrow cycleNav-up" aria-label="Precedent">&#9650;</button>');
24        var $down = $('<button type="button" class="cycleNav-arrow cycleNav-down" aria-label="Suivant">&#9660;</button>');
25        $viewport.before($up).after($down);
26
27        $viewport.css({ overflow: 'hidden', position: 'relative' });
28        $nav.css({ transition: 'transform 0.3s ease' });
29
30        var state = { offset: 0, itemH: 148, maxOffset: 0 };
31
32        function setDims() {
33            state.itemH = computeItemH($items);
34            state.maxOffset = -(state.itemH * ($items.length - VISIBLE));
35            $viewport.css({ height: state.itemH * VISIBLE });
36            apply();
37        }
38
39        function apply() {
40            state.offset = Math.max(state.maxOffset, Math.min(0, state.offset));
41            $nav.css({ transform: 'translateY(' + state.offset + 'px)' });
42            $up.prop('disabled', state.offset >= 0);
43            $down.prop('disabled', state.offset <= state.maxOffset);
44        }
45
46        setDims();
47
48        // Re-mesure au chargement de chaque image (au cas ou la 1ere mesure etait pre-load)
49        $items.find('img').each(function () {
50            if (this.complete && this.naturalHeight) return;
51            $(this).on('load', setDims);
52        });
53        setTimeout(setDims, 1500); // filet de securite
54        $(window).on('resize', setDims);
55
56        $up.on('click', function () { state.offset += state.itemH; apply(); });
57        $down.on('click', function () { state.offset -= state.itemH; apply(); });
58
59        var $slideshow = $viewport.closest('#diapo').next('.cycle-slideshow');
60        if (!$slideshow.length) $slideshow = $viewport.closest('#plusModele').find('.cycle-slideshow');
61        if ($slideshow.length) {
62            $slideshow.on('cycle-after', function (e, opts) {
63                var idx = opts.currSlide;
64                var vpH = state.itemH * VISIBLE;
65                var itemTop = idx * state.itemH;
66                var itemBottom = itemTop + state.itemH;
67                var visibleTop = -state.offset;
68                var visibleBottom = visibleTop + vpH;
69                if (itemTop < visibleTop) {
70                    state.offset = -itemTop;
71                    apply();
72                } else if (itemBottom > visibleBottom) {
73                    state.offset = -(itemBottom - vpH);
74                    apply();
75                }
76            });
77        }
78    }
79
80    $(function () {
81        $('#plusModele #cycleNav').each(function () {
82            var $nav = $(this);
83            if ($nav.find('.element').length > VISIBLE) build($nav);
84        });
85    });
86})(jQuery);