Форум программистов, компьютерный форум, киберфорум
jQuery
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript > jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
 Аватар для kOROED
0 / 0 / 0
Регистрация: 13.10.2011
Сообщений: 146

Как сделать на colorbox два независимых слайдера на одной странице?

06.03.2014, 23:00. Показов 2031. Ответов 4
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
На странице есть слайдер, работающий на плагине сolorbox и 2 набора фоток: в <div class="photo"> и в <div class="photo2">.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12

<div class="photo">
    <a href="i/etc/photo01.jpg" class="show_popup-photo"><img src="i/etc/photo01.jpg" alt=""></a>
    <a href="i/etc/photo02.jpg" class="show_popup-photo"><img src="i/etc/photo02.jpg" alt=""></a>
    <a href="i/etc/photo03.jpg" class="show_popup-photo"><img src="i/etc/photo03.jpg" alt=""></a>
    <a href="i/etc/photo04.jpg" class="show_popup-photo"><img src="i/etc/photo04.jpg" alt=""></a>
</div>
<div class="photo2">
    <a href="i/etc/photo-t3-02.jpg" class="show_popup-photo"><img src="i/etc/photo-t2-01.jpg" alt=""></a>
    <a href="i/etc/photo-t3-02.jpg" class="show_popup-photo"><img src="i/etc/photo-t3-02.jpg" alt=""></a>
    <a href="i/etc/photo-t3-03.jpg" class="show_popup-photo"><img src="i/etc/photo-t3-03.jpg" alt=""></a>
    <a href="i/etc/photo-t1-01.jpg" class="show_popup-photo"><img src="i/etc/photo-t1-01.jpg" alt=""></a>
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    $(".show_popup-photo").colorbox({
        scrolling:false,
        width:927,
        rel:true,
        current: "<b>{current}</b> из <b>{total}</b>",
        opacity: 0.5,
        onLoad:  function(){
                $("#cboxClose").attr("title", "закрыть");
                $("#cboxPrevious").attr("title", "назад");
                $("#cboxNext").attr("title", "вперед");
                $("#colorbox").addClass("popup-media");
            },
        onComplete: function() {
            var photo_h=$(this).parents(".photo").find(".photo_box_in_txt").find("h2").html();
            photo_h = photo_h.replace(/<+br+>/g,''); /*del <br>*/
            var photo_d=$(this).parents(".photo").find(".photo_box_in_txt").find("time").html();
            $("#cboxLoadedContent").append("<div class='photo_pop_h'><time>"+photo_d+"</time><h2>"+photo_h+"</h2></div>");
            }
    });
Как сделать отдельный слайдер для каждого набора фото, а то сейчас какую бы фото не кликнул, в слайдере выводятся фотки из обоих групп.
0
Лучшие ответы (1)
Сообщение: #5869585
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 06.03.2014, 23:00
Ответы с готовыми решениями:

Два CSS слайдера на одной странице
Всем привет! Я новичок, учу html и css самостоятельно. Такая ситуация: есть два CSS слайдера на одной странице, которые работают....

Два слайдера на странице
Добрый день, есть готовый шаблон, купленный на сайте. Прикручен модуль Bang2Joom Alfheim Gallery Pro. Когда на странице один модуль со...

2 слайдера на одной странице Bitrix
Здравствуйте, уважаемые читатели форума. Облазил все форумы, много нашел контента и ответов на вопросы, но со своей проблемой справиться...

4
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
06.03.2014, 23:28
Для группировки используйте атрибут rel в тегах <a>. rel="group1", rel="group2"
1
 Аватар для kOROED
0 / 0 / 0
Регистрация: 13.10.2011
Сообщений: 146
07.03.2014, 09:11  [ТС]
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Для группировки используйте атрибут rel в тегах <a>. rel="group1", rel="group2"
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="photo">
    <a href="i/etc/photo01.jpg" rel="group1" class="show_popup-photo"><img src="i/etc/photo01.jpg" alt=""></a>
    <a href="i/etc/photo02.jpg" rel="group1" class="show_popup-photo"><img src="i/etc/photo02.jpg" alt=""></a>
    <a href="i/etc/photo03.jpg" rel="group1" class="show_popup-photo"><img src="i/etc/photo03.jpg" alt=""></a>
    <a href="i/etc/photo04.jpg" rel="group1" class="show_popup-photo"><img src="i/etc/photo04.jpg" alt=""></a>
</div>
<div class="photo2">
    <a href="i/etc/photo-t3-02.jpg" rel="group2" class="show_popup-photo"><img src="i/etc/photo-t2-01.jpg" alt=""></a>
    <a href="i/etc/photo-t3-02.jpg" rel="group2" class="show_popup-photo"><img src="i/etc/photo-t3-02.jpg" alt=""></a>
    <a href="i/etc/photo-t3-03.jpg" rel="group2" class="show_popup-photo"><img src="i/etc/photo-t3-03.jpg" alt=""></a>
    <a href="i/etc/photo-t1-01.jpg" rel="group2" class="show_popup-photo"><img src="i/etc/photo-t1-01.jpg" alt=""></a>
 
</div>
Так по-прежнему все картинки в одном слайдере
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
07.03.2014, 11:39
Лучший ответ Сообщение было отмечено kOROED как решение

Решение

Цитата Сообщение от kOROED Посмотреть сообщение
Так по-прежнему все картинки в одном слайдере
Уберите параметр rel: true.
1
 Аватар для kOROED
0 / 0 / 0
Регистрация: 13.10.2011
Сообщений: 146
07.03.2014, 11:49  [ТС]
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Уберите параметр rel: true.
Да, теперь всё как надо
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 07.03.2014, 11:49
Помогаю со студенческими работами здесь

Не работают 2 слайдера Jquery на одной странице
Всем привет! Кто нибудь может помочь с решение проблемы? Нашёл для себя 2 отдельных слайдера, переделал их полностью под себя каждый в...

Как подружить два одинаковых js скрипта на одной странице?
Суть проблемы: нужно создать на JS систему оповещений о личных сообщениях. Нашёл в Интернете соотв. JS код вывода сообщений, скопипастил,...

Как вставить два одинаковых скрипта на одной странице
Как вставить два одинаковых скрипта на одной странице, чтобы они оба работали: Пример скриптов: 1) &lt;a href=&quot;АДРЕС ...

Как сделать ТОРГ-12 на одной странице?
Подскажите, каким образом можно задать для ТОРГ-12 способ печати только на одном листе. Т.е. чтобы, если не помещается на одном, уменьшался...

Как сделать все на одной странице?
Добрый день всем. У меня есть сайт на нем около 100 страниц, я хочу на сайт добавить объявление, мне нужно в каждой из страниц...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru