Как изменить colorbox и мозаику в галерее

[Mary_RND]

Доброго времени суток!)

У меня два вопросика по галереи colorbox и плагину для формирования фото в мозаику

Первое по галерее:

Мне надо чтобы, оно выглядело вот так http://prntscr.com/d9zqg4

А у меня получилось сделать только так Т_Т http://prntscr.com/d9zqw3

Кто-то нибудь сталкивался с этой галерей? Как добавить еще одно поле для текста и увеличить отступы?

Второе по мозаике:

Я для той же галереи использовала вот этот плагин http://tympanus.net/codrops/2011/08/30/automatic-image-montage/ , но в начале не требовалось каких-либо условий...

А теперь надо, чтобы первая картинка была всегда 380x380, а остальная мозаика считаться от нее... и сверху нее должна быть лупа и надпись (это я  думаю смогу сделать), а вот изменить отсчет...

Кто может сказать, что надо изменить в коде? Т_Т

Спасибо.

Пробовала подключить fancybox, но он у меня не заработал почему-то...

Edited November 30, 2016 by Mary_RND
Поправила название темы

[radioactive]

без ссылки на код говорить не о чем

p.s плагины поставили а как отступы сделать, не знаете.. странно

[Mary_RND]

https://jsfiddle.net/m24nt57z/2/

Я много раз тут пыталась вставить js, но почему-то получается с переменным успехом, как сейчас ><

Вставила верстку, стили и тот js, что стоит. А вот коды самой мозаики и галереи прицепляю отдельно, почему поставить не смогла...

Кстати, я там не нашла моей библиотеки jQuery v1.10.1 O_o

jquery.montage.min.js

jquery.colorbox.js

[Q4Dizzy]

По второму вопросу:

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

 

	    $(function () {



	        var $container = $('#am-container'),
	            $imgs = $container.find('img').hide(),
	            $counter = $imgs.length,
                $firstElement = $container.children().first(), //Получаем первый потомок контейнера
                $feW = $firstElement.children('img').width(), //Записываем ширину картинки первого потомка
                $feH = $firstElement.children('img').height(), //Записываем высоту картинки первого потомка
	            $det = $firstElement.detach(); //Извлекаем первого потомка из контейнера, чтобы плагин не обработал его.

	        function imageLoaded() {
	            $counter--;
	            if ($counter === 0) {
	                $imgs.show();
	                $container.montage({
	                    fillLastRow: true,
	                    alternateHeight: true,
	                    alternateHeightRange: {
	                        min: 90, //сюда подставляем мин значения высоты картинки, которые нужны (Например: $feH / 3)
	                        max: 380  //сюда подставляем макс значения высоты картинки
	                    }
	                });

                    $container.prepend($det); //Возвращаем ранее извлечённый элемент в начало контейнера после отработки плагина.
	            }
	        }
			//Изменил проверку на более нормальную, чем та, которая на сайте разработчика..... </img> >_<
	        $imgs.each(function (index) {
	            if (this.complete) {
	                imageLoaded.call(this);
	            } else {
	                $(this).one('load', imageLoaded);
	            }
	        });

	    });

Ну и добавляем нужные опции в плане ширины для картинки + возможно ещё дополнительные из документации..

Вот нашёл на русском.

Ширину и высоту первой картинки по 380 можно и стилями задать. Да и про отступ первого элемента не стоит забывать, т.к. плагин не обработал его, добавить надо вручную в css )

[Q4Dizzy]

А насчёт 1 вопроса

 

<a rel="gal" class="group1" href="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg" title="Это описание" data-caption="Труляля">
      <img src="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg">
    </a>

$(".group1").colorbox({
  rel: 'gal',
  onComplete: function() {
    var caption = $(this).data('caption');
    $('#cboxContent').prepend('<div class="cboxTopTitle">' + caption + '</div>')
  },
  onClosed: function(){
  $('#cboxContent .cboxTopTitle').remove();
  }
});

Что-то наподобии такого.. Только с стилями ещё подправки нужно делать.

Edited December 2, 2016 by Q4Dizzy

[Mary_RND]

Ооо... Сейчас опробую это

только сайт перенесу @_@

[Mary_RND]

On 02.12.2016 at 04:10, Q4Dizzy said:

А насчёт 1 вопроса

 

<a rel="gal" class="group1" href="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg" title="Это описание" data-caption="Труляля">
      <img src="http://i.sunhome.ru/foto/149/etot-prekrasnii-mir.xxl.jpg">
    </a>

$(".group1").colorbox({
  rel: 'gal',
  onComplete: function() {
    var caption = $(this).data('caption');
    $('#cboxContent').prepend('<div class="cboxTopTitle">' + caption + '</div>')
  },
  onClosed: function(){
  $('#cboxContent .cboxTopTitle').remove();
  }
});

Что-то наподобии такого.. Только с стилями ещё подправки нужно делать.

Доброго времени суток.

Я наконец взялась за продолжение сайта, добила нужные изменения.

Но вот проблема возникла, я добавила data-caption выводится, но выводятся все data-caption у каждого фото ><

[Q4Dizzy]

http://jsfiddle.net/moujdxbj/3/

Edited March 6, 2017 by Q4Dizzy

[Mary_RND]

9 hours ago, Q4Dizzy said:

http://jsfiddle.net/moujdxbj/3/

ааа.... надо было делать через onOpen >_<

Спасибо ^^

[Q4Dizzy]

Не совсем. Там сделано через onComplete. onOpen там лишний, забыл стереть его