Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.12.2024, 18:34
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 60

вопрос по вертикальной карусели
Доброго дня.
Есть галерея как на ВБ.
Слева карусель с миниатюрами, справа большое фото (Скриншот 1)

При перелистывании стрелками вертикальной карусели миниатюры уходят за границы блока, и можно пролистать, чтобы они вообще ушли вниз или вверх.
Пытаюсь на jquery ограничить это движение.

Суть в том, что margin-top не должно уходить в минус, чтобы миниатюры не уезжали вниз (Скриншот 2).
И так же при пролистывании до самого низу миниатюры не должны уходить вверх (Скриншот 3)

кода много, поэтому закинул в фидл: https://jsfiddle.net/tps20/41bgyLh9/6/

Пробовал таким образом, но не помогает:
по моей логике: если margin-top уходит в минус, то прекратить выполнять функцию.

if($('#images-additional_wrapper').css("margin-top")<'0px') {
       return false;
    }
Изображения:
Тип файла: jpg 11.jpg (154.1 Кб, 1 просмотров)
Тип файла: jpg 22.jpg (157.5 Кб, 1 просмотров)
Тип файла: jpg 33.jpg (152.3 Кб, 0 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 21.12.2024, 20:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,133

tp-20,
...вариант
function down(id, h) {
        let margin_top = parseFloat($('#images-additional_wrapper').css('margin-top'));
        let max =
            parseFloat($('.images-additional').css('height')) -
            parseFloat($('#images-additional_wrapper').css('height'));
        if (margin_top - h < max) h = margin_top - max;
        $('#images-additional_wrapper').animate({
            'margin-top': '-=' + h + 'px',
        });
    }

    function up(id, h) {
        let margin_top = parseFloat($('#images-additional_wrapper').css('margin-top'));

        if (margin_top + h > 0) h = -margin_top;

        $('#images-additional_wrapper').animate({
            'margin-top': '+=' + h + 'px',
        });
    }
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2024, 20:37
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 60

рони, огромное спасибо, идеальное решение! в вашей помощи не сомневался!
Ответить с цитированием
  #4 (permalink)  
Старый 29.01.2025, 16:09
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 60

рони, добрый день.
добавил прокрутку мышкой в вертикальную галерею, но перестали работать кнопки вверх/вниз.
в стили для класса images-additional_wrapper добавил свойство height: 100%; overflow-y: scroll;
Если высоту height: 100% убрать, то кнопки работают, но скроллинг не работает.
Возможно ли как-то совместить, чтобы и кнопки и скролл работали?

фидл тот же самый:
https://jsfiddle.net/tps20/41bgyLh9/6/
заранее спасибо
Ответить с цитированием
  #5 (permalink)  
Старый 29.01.2025, 17:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,133

tp-20,
решение наверняка есть, но нет возможности помочь.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отображение скрытого блока из карусели Kasper28 Элементы интерфейса 6 11.02.2014 16:40
jcarousel - Мгновенная остановка карусели. radogost jQuery 0 31.10.2012 18:08
Вопрос по each() и перебору строк таблицы battrack jQuery 1 09.02.2012 14:30
вопрос про возможности JS для рисования и анимации macdack Библиотеки/Тулкиты/Фреймворки 3 15.07.2011 00:13
Я как ответить на вопрос - есть ли жизнь на других планетах? TicTac Оффтопик 5 28.04.2011 04:29