Jump to content
  • 0

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


Mary_RND
 Share

Question

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

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

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

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

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

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

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

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

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

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

Спасибо.

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

Edited by Mary_RND
Поправила название темы
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

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

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

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

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

jquery.montage.min.js

jquery.colorbox.js

Link to comment
Share on other sites

  • 0

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

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

 

	    $(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 )

Link to comment
Share on other sites

  • 0

А насчёт 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 by Q4Dizzy
Link to comment
Share on other sites

  • 0
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 у каждого фото ><

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy