Использование Colorbox в качестве галереи

@andrett · Регистрация: 25.06.2014

Студворк — интернет-сервис помощи студентам

Добрый день!
как сделать, чтобы данная галерея открывалась в Colorbox при нажатии на кнопку?

HTML5
1
2
3
4
5
6
7
8
9
10
<img id="mainImage" style="border:3px solid #156db4" src="http://lorempixel.com/400/200/sports/1/" height="500" width="740" />
<br />
<div id="divId">
    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/1/" />
    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/2/" />
    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/3/" />
    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/4/" />
    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/5/" />
    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/6/" />
</div>

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function () {
    var mainImg = $('#mainImage'),
        iw = mainImg.width(),
        ih = mainImg.height(),
        it = mainImg.offset().top,
        il = mainImg.offset().left,
        moving = false;
    $('#divId img').on({
        click: function () {
            if(moving) return false;
            moving = true;
            var $that = $(this),
                newPath = $that.attr('src');
            $that.clone().css({
                position: 'absolute',
                left: $that.offset().left,
                top: $that.offset().top,
            }).insertAfter(this).animate({
                top: it,
                left: il,
                width: iw,
                height: ih
            }, function(){
                mainImg.attr('src', newPath);
                $(this).remove();
                moving = false
            });
        }
    });
});

CSS
1
2
3
4
5
6
7
8
9
#divId img {
    width: 100px;
    height: 100px;
    border: 3px solid #156db4;
}
#divId img:hover {
    cursor: pointer;
    border-color: #35886E;
}

@BANO · 06.06.2016, 11:19

andrett, посмотрите примеры
первый же показывает как это надо сделать
только там, как и везде, события наклдываются на ссылки (для поддержки мобильных устройств). просто оберните все ваши фотки в ссылки, потом навесте на них colorbox и всё

@andrett · 06.06.2016, 13:53 **[ТС]**

BANO,

HTML5
1
<a href="#" onclick="$.colorbox({href:'/wp-content/gallery/pvx/',width: ($(window).width()*0.8)});return false;">Посмотреть все</a>

Добавлено через 1 час 43 минуты
BANO, Все получилось реализовать через inline

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p><a class='inline' href="#inline_contentt">Inline HTML</a></p>
        <div style='display:none'>
    <div id='inline_contentt' style='padding:10px; background:#fff;'>
            
            <img id="mainImage" style="border:3px solid #156db4" src="http://lorempixel.com/400/200/sports/1/" height="500" width="740" />
                <br />
            <div id="divId">
                    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/1/" />
                    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/2/" />
                    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/3/" />
                    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/4/" />
                    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/5/" />
                    <img class="imgStyle" src="http://lorempixel.com/400/200/sports/6/" />
            </div>
            
    </div>

смысл в том, что с начала я скрываю блок , а потом вывожу его в colorbox)// только как мне подписывать изображения не пойму?!

Добавлено через 15 минут
BANO, Подскажите а почему не получается вставить галерею в Colorbox через шорткод вот так

HTML5
1
2
3
4
5
6
7
<p style="text-align: left; margin: 10px;"><a class='inline' href="#inline_contentt">Посмотреть все</a></p>
        <div style='display:none'>
    <div id='inline_contentt' style='padding:10px; background:#fff;'>
            
            <?php echo do_shortcode("[nggallery id="2"]"); ?>
            
    </div>

@BANO · 06.06.2016, 14:51

andrett, я не php'шник

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.06.2016, 11:19
	andrett, посмотрите примеры первый же показывает как это надо сделать только там, как и везде, события наклдываются на ссылки (для поддержки мобильных устройств). просто оберните все ваши фотки в ссылки, потом навесте на них colorbox и всё 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.06.2016, 14:51
	andrett, я не php'шник 0