Bootstrap - Создание галереи изображений

Bootstrap - Создание галереи изображений
Содержание:
  1. Галерея изображений на базе сетки Bootstrap
  2. Создание галереи изображений подобной Pinterest
  3. Комментарии

В этой статье рассмотрим примеры создания различных галерей изображений. В первом - разработаем галерею изображений на основе сетки Bootstrap, а во втором – на базе плагина Gridify (Mosaic Flow).

Галерея изображений на базе сетки Bootstrap

Основные этапы по созданию адаптивной галереи изображений на базе сетки Bootstrap:

1. Разработка сетки, которая будет содержать на одной линии в зависимости от размера экрана определённое количество миниатюр изображений.

На Bootstrap 4 это будет выглядеть следующим образом:

HTML
<div class="row">
    <div class="col-lg-3 col-md-4 col-6">
        ...
    </div>
    <div class="col-lg-3 col-md-4 col-6">
        ...
    </div>
    <div class="col-lg-3 col-md-4 col-6">
        ...
    </div>
    ...
</div>

На Bootstrap 3 эту же сетку можно представить так:

HTML
<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
        ...
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        ...
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        ...
    </div>
    ...
</div>

2. Помещение элементов img (изображений) в ячейки сетки:

HTML
<div class="row">
    <div class="col-lg-3 col-md-4 col-6">
        <img class="img-fluid" src="..." alt="...">
    </div>
    <div class="col-lg-3 col-md-4 col-6">
        <img class="img-fluid" src="..." alt="...">
    </div>
    ...

3. Подключение инструмента fancyBox3 к веб-странице:

HTML
<!-- fancyBox CSS -->
<link href="путь_до/jquery.fancybox.min.css" rel="stylesheet">

<!-- fancyBox JS -->
<script src="путь_до/jquery.fancybox.min.js"></script>

Для того чтобы изображения можно было просматривать с помощью fancyBox3 необходимо каждое из них обернуть с помощью элемента <a> и добавить к нему атрибуты:

  • data-fancybox="gallery" – селектор для инициализации изображений, которые можно будет просматривать в окне fancyBox с помощью стрелок назад и вперёд;
  • href="..." – ссылка, на оригинальный размер изображения.
HTML
<a data-fancybox="gallery" href="путь_к_исходному_изображению">
    <img class="img-fluid" src="путь_к_уменьшенному_экземпляру_изображения" alt="..."> 
</a>

4. Добавление к адаптивным блокам дополнительного класса thumb.

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

HTML
<div class="col-lg-3 col-md-4 col-6 thumb">
    <a data-fancybox="gallery" href="путь_к_исходному_изображению">
        <img class="img-fluid" src="путь_к_уменьшенному_экземпляру_изображения" alt="...">
    </a>
</div>
...

Итоговый код для создания галереи изображений на базе сетки Bootstrap 4:

HTML
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4 - Создание адаптивной галереи изображений с помощью сетки</title>
    <!-- Bootstrap CSS -->
    <link href="путь_до/bootstrap.min.css" rel="stylesheet">
    <!-- fancyBox3 CSS -->
    <link href="путь_до/jquery.fancybox.min.css" rel="stylesheet">
    <style>
        .thumb img {
            -webkit-filter: grayscale(0);
            filter: none;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 5px;
        }

        .thumb img:hover {
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
        }

        .thumb {
            padding: 5px;
        }
    </style>
</head>
<body>

<div class="container">
    <h1 class="h3 text-center my-4">Bootstrap 4 - Создание адаптивной галереи изображений с помощью сетки</h1>
    <div class="row">
        <div class="col-lg-3 col-md-4 col-6 thumb">
            <a data-fancybox="gallery" href="путь_к_исходному_изображению">
                <img class="img-fluid" src="путь_к_уменьшенному_экземпляру_изображения" alt="...">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6 thumb">
            <a data-fancybox="gallery" href="путь_к_исходному_изображению">
                <img class="img-fluid" src="путь_к_уменьшенному_экземпляру_изображения" alt="...">
            </a>
        </div>
        ...
    </div>
</div>

<!-- jQuery -->
<script src="путь_до/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="путь_до/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="путь_до/bootstrap.min.js"></script>
<!-- fancyBox -->
<script src="путь_до/jquery.fancybox.min.js"></script>
</body>
</html>
Галерея изображений на базе сетки Bootstrap 4 Просмотр изображения галереи с помощью инструмента fancyBox

Пример, этой же галереи, но выполненной на фреймворке Bootstrap 3:

Демо этой же галереи на Bootstrap 3

Создание галереи изображений подобной Pinterest

Второй вариант галереи изображений создадим на основе плагина Gridify. Данный плагин предназначен для создания сетки изображений как Pinterest.

Процесс создания этой галереи представим в виде следующих шагов:

1. Загрузка и подключение к странице плагина gridify.js.

Внимание: Существует несколько реализаций плагина gridify.js. В данном проекте выберем тот, который основывается на библиотеке jQuery.

HTML
<!-- Подключение и инициализация gridify.js -->
<script src="/examples/vendors/gridify/gridify.js"></script>
<script>
$(function () {
    var options =  {
        srcNode: 'img',             // grid items (class, node)
        margin: '15px',             // margin in pixel
        width: '240px',             // grid item width in pixel
        max_width: '',              // dynamic gird item width
        resizable: true,            // re-layout if window resize
        transition: 'all 0.5s ease' // support transition for CSS3
    };
    $('.grid').gridify(options);
});
</script>

2. Создание HTML кода галереи:

HTML
<!-- Контейнер галереи изображений -->
<div class="grid">
    <!-- Изображение -->
    <a data-fancybox="gallery" href="путь_к_исходному_изображению">
        <img class="img-fluid" src="путь_к_уменьшенной_копии_изображения" alt="">
    </a>
    <!-- Изображение -->
    <a data-fancybox="gallery" href="путь_к_исходному_изображению">
        <img class="img-fluid" src="путь_к_уменьшенной_копии_изображения" alt="">
    </a>
    ...
</div>

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

Итоговый код галереи изображений подобной Pinterest для Bootstrap 4:

HTML
<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Bootstrap 4 - Создание адаптивной галереи изображений с помощью gridify.js</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="путь_до/bootstrap.min.css" rel="stylesheet">
    <!-- fancyBox CSS -->
    <link href="путь_до/jquery.fancybox.min.css" rel="stylesheet">
    <style>
        img {
            padding: 4px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        img:hover {
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="grid">
        <a data-fancybox="gallery" href="путь_к_исходному_изображению">
            <img class="img-fluid" src="путь_к_уменьшенной_копии_изображения" alt="...">
        </a>
        <a data-fancybox="gallery" href="путь_к_исходному_изображению">
            <img class="img-fluid" src="путь_к_уменьшенной_копии_изображения" alt="">
        </a>
        ...
    </div>
</div>

<!-- jQuery -->
<script src="путь_до/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="путь_до/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="путь_до/bootstrap.min.js"></script>
<!-- fancyBox JS -->
<script src="путь_до/jquery.fancybox.min.js"></script>
<!-- Gridify JS -->
<script src="путь_до/gridify.js"></script>
<script>
$(function() {
    var options = {
        srcNode: 'img',             // grid items
        margin: '15px',             // margin in pixel
        width: '240px',             // grid item width in pixel
        max_width: '',              // dynamic gird item width
        resizable: true,            // re-layout if window resize
        transition: 'all 0.5s ease' // support transition for CSS3
    };
    $('.grid').gridify(options);
});
</script>
</body>
</html>
Галерея изображений как Pinterest Просмотр изображения галереи (как Pinterest) с помощью инструмента fancyBox

Пример этой же галереи на Bootstrap 3:

Демо галереи для Bootstrap 3

Пример галереи подобной Pinterest но на Mosiac Flow

Демо Mosaic Flow

Комментарии: 203

Valdiss
Valdiss
Александр, добрый день, подскажите, если сможете.
Прикрутил на сайт Gallery, вывожу ватермарку на картинках через pthumb, для увеличения изображения использую lightgallery.js. Но, естественно, lightgallery выводит уже без обработки и ватермарки нет.
Вопрос — как мне сделать водяной знак и на увеличенном изображении. Можно ли как-то вывод lightgallery пропустить через pthumb, а если нет, то как прикрутить стороннюю библиотеку, типа watermark.js и подружить с lightgallery. Потому как готовить картинки в фотошопе ваще не наш вариант. Вот такой непростой вопрос ))
Leysan
Leysan
Добрый день, Александр.
Спасибо Вам за статью.
Подскажите, можно ли добавить описание фото в галерее подобной Pinterest на gridify.js.?
Александр Мальцев
Александр Мальцев
Здравствуйте! Спасибо!
Данная библиотека не имеет такого функционала, здесь нужно что-то придумывать самостоятельно. Но лучше создать галерею подобную Pinterest без дополнительный плагинов, просто используя CSS-свойство column-count. Пример такой галереи можно посмотреть в этом примере.
Дмитрий
Дмитрий
Здравствуйте, Александр Мальцев!
Подскажите пожалуйста, возможно ли решить проблему?

Поле нажатия, исходное изображение открывается позади окна work-popup-content. Возможно ли отправить исходное изображение поверх?

Александр Мальцев
Александр Мальцев
Здравствуйте! Для этого изображению или элементу в котором оно расположено необходимо установить с помощью CSS значение z-index больше чем оно установлено для окна work-popup-content.
Дмитрий
Дмитрий
Благодарю вас! Всё отлично работает.
Ахмет Шабакаев
Ахмет Шабакаев
Александр, доброго времени суток.
Использую пример галереи на Bootstrap3, что бы красиво смотрелось переделал картинки под один размер, позже возникла необходимость добавить надписи на картинки и вот тут начались приколы.
Так выглядит блок с картинкой и надписью (убрал закрывающие\открывающие скобочки, иначе не код добавить в коммент):
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
  <a data-fancybox="gallery" href="images/for-image-gallery/chair/chair_1.png">
    <img alt="" class="img-responsive" src="images/for-image-gallery/chair/mini/chair_1_m.png">
  </a>
  <div class="carousel-caption"><span>???</span></div>
</div>
Основная картинка уменьшена (я думаю так быстрее будет вся страница грузиться, в галерее много картинок), при клике выводится картинка в разрешении родном. Как добавить надпись, взял из примера с каруселью и к тексту применяется стили:
span {
  color: #555;
  font-weight: bold;
  text-transform: uppercase;
}
К обертке текста:
.carousel-caption {
  right: 35%;
  left: 20%;
  top: 20px;
  bottom: 320px;
  padding: 1px;
}
(съезжает по горизонтали при изменении разрешения, пробовал подгонять, получается так себе).
Возник прикол, грешу на расширения браузера. т.к. в основном окне почему-то надпись падает вниз, а если заходишь в окно инкогнито, все отображается наверху. Не пойму в чем же дело.
Александр Мальцев
Александр Мальцев
Здравствуйте!
Тут всё просто. К родительскому классу добавьте «position: relative», а «.carousel-caption» — «position: absolute». После этого задайте положение для «.carousel-caption» относительно родителя.
Например:
.thumb {
  position: relative;
}
.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
Некоторые расширения (например, AdBlock и др.) могут изменять страницу. Например, если установить изображению имя «banner.jpg», то оно скорее всего его заблокирует, что приведёт к изменению страницы. Они также могут вообще блокировать нормальную работу сайта. Если вы используете такие или другие подобные расширения, то знайте, что такое может быть.
Ахмет Шабакаев
Ахмет Шабакаев
Спасибо огромное.
Ахмет Шабакаев
Ахмет Шабакаев
<img
src=«https://itchief.ru/assets/uploadify/8/a/f/8afadab2ccd0a6929b31785f96bb132as.jpg» class=«fancybox thumbnail center»>


Можно еще вопрос? Как избежать подобных казусов, когда footer не доходит до края экрана? footer стоит отдельно, т.е. не входит в container, у него родитель body.

footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
position: absolute; у футера, относительно класса родителя position: relative?
Александр Мальцев
Александр Мальцев
Чтобы прижать футер к низу лучше использовать CSS Flexbox.
Для этого в body необходимо создать следующую структуру:
<div class="wrapper">
  <div class="content">
    <div class="container-fluid">
      <!-- Здесь распологаем всё кроме футера -->
    </div>
  </div>
  <div class="footer">
    <div class="container-fluid">
      <!-- Здесь распологаем футер -->
    </div>
  </div>
</div>
После этого в CSS добавить следующие стили:
html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.wrapper > .content {
  flex: 1 0 auto;
}
.wrapper > .footer {
  flex: 0 0 auto;
}
Живой пример можно посмотреть здесь.
Sergey
Sergey
Александр, решил я некоторые проблемы. Возможно, кому-то будет интересно.
Проблема корректности отображения класса well в IE была связана с бегграундколором. Он был указан #8e6c6285 (полупрозрачный). IE не понимает таких цветов. Чтобы задать прозрачный цвет используют запись типа: rgba(0, 120, 201, 0.7); (где — «rgb» — цвет, а «а» — степень прозрачности от 0 до 1). В моем случае, на замену #8e6c6285 был подобран rgba(142, 108, 98, 0.5);

И форма корректно вывелась на мониторе в IE и других, более адекватных, браузерах.

Относительно ошибки, которую нашел шторм — незакрытый div формы сплывающего окна (сейчас страница без ошибок)!

Александр, опять пропала лупа в галереи, но я заметил такую вот ошибку в инструментах разработчика:
Uncaught TypeError: $(...).zoom is not a function
at HTMLDocument.(index.html:371)
at c (jquery.min.js:4)
at Object.fireWith [as resolveWith] (jquery.min.js:4)
at Function.ready (jquery.min.js:4)
at HTMLDocument.q (jquery.min.js:4)

Это проблема записи скрипта или самой библиотеки jquery.min.js?

Я взял за основу шаблон, потому что-то не знал и не понимал, как построить некоторые вещи. Сейчас, в принципе, отображается мой контент и мои CSS. Сам же шаблон содержит уйму лишнего и ненужного.

Возможно, что-то нужно удалить или по-другому подключить:
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
	<script src="assets/js/headroom.min.js"></script>
	<script src="assets/js/jQuery.headroom.min.js"></script>
	<script src="assets/js/template.js"></script>
	<script src="assets/js/jquery.fancybox.min.js"></script>
	<!-- <script src="fancybox/sourse/jquery.fancybox.js"></script> -->

  <script>
        $(document).ready(function(){
            $('.fancybox-image').zoom();
        });
    </script>

СПАСИБО!

Александр Мальцев
Александр Мальцев
Ошибка связана с тем, что объект, метод zoom которого вы вызываете, не содержит в себе этой функции.

Со скриптами тоже нужно разобраться, так например, fancybox вы подключаете 2 раза. Также обратите внимание на версию Bootstrap, действительно ли вам нужна именно 3.0.0? Из третьей ветке последняя 3.4.1, а из четвертой — 4.4.1?
Sergey
Sergey
Спасибо, Александр. На данном этапе, мне нужен бутсрап 3 версии. Попробую создать галерею в чистом проекте на базе бутстрапа 3.4.1 (ведь алгоритм и задача — простые!) — возможно, что-то прояснится!
Хорошего дня!
Sergey
Sergey
Здравствуйте, Александр.
Создал галерею в новом проекте бустрап 3.4.1. Зум на фото поработал минуты две в хроме и исчез. Открываю проект в шторме — одна ошибка — незакрытый div. Устраняю ошибку, открываю в хроме — пока работает, минут 10 уже. Далее интереснее.
Открываю в опере и IE, зум не работает. Переходу в панель разработчика посмотреть баги, их нет (опера и IE ошибок на странице не нашли). Самое интересное, что инструмент лупа работает в режиме просмотра страницы с панели разработчика! Далее…
Открываю ваш пример (https://itchief.ru/examples/lab.php?topic=bootstrap&file=b3-image-gallery) в опере и IE — аналогичная ситуация. Лупа не работает, но с панели разработчика картинка отзывается.
Вопрос сейчас в том, это ли специфика работы моего компьютера или же общая закономерность для всех! Ситуация интересная, сейчас еще погуглю и отпишусь, если что найду по существу.
Интересно услышать и ваш комментарий по этому поводу.
СПАСИБО.
Sergey
Sergey
исчезла лупа и с хрома! Читаю документацию fancybox (их ресурс тяжело, но все же грузиться на опере и IE, «криво» страница отображается, но лупа все же работает!!!).
Возможно, я не замечаю то, что у меня пере глазами. Вот этот код (лишь галерея).
<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	    <title>Gallery</title>

	    <!-- Bootstrap -->

	    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

	    <!-- MY STYLE SCC-->
	      <link href="assets/css/style.css" rel="stylesheet">

	    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	    <!--[if lt IE 9]>
	      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	    <![endif]-->
</head>
<body>
	<div class="container">
    <h1 class="h2 text-center">Bootstrap 3 - Создание адаптивной галереи изображений с помощью сетки</h1>
     <div class="row">
				<div class="col-lg-3 col-md-4 col-6 thumb">
					<a data-fancybox="gallery" href="assets/images/anteroom-large.jpg"><img class="img-fluid" src="assets/images/anteroom-small.jpg" alt="anteroom"></a>
				</div>

				<div class="col-lg-3 col-md-4 col-6 thumb">
					<a data-fancybox="gallery" href="assets/images/boss-room-large.jpg"><img class="img-fluid" src="assets/images/boss-room-small.jpg" alt="boss-room"></a>
				</div>



			</div> <!-- /row  -->
	</div>


	<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
		    <!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

</body>
</html>
СПАСИБО!
Sergey
Sergey
Александр, замучил я вас.

В документации взял их код и перенес себе в проект, задал свои ссылки! Работает все и во всех браузерах! Завтра уже буду разбираться, в чем разница. Но факт остается фактом!
<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	    <title>Gallery</title>

	    <!-- Bootstrap -->

	    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

       <link rel="stylesheet" type="text/css" href="assets/css/jquery.fancybox.min.css">

	    <!-- MY STYLE SCC-->
	      <link href="assets/css/style.css" rel="stylesheet">

	    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	    <!--[if lt IE 9]>
	      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	    <![endif]-->
</head>
<body>
	<div class="container">
 <h2>Our works</h2>


<hr class="my-5" />

<div class="container">
    <h1 class="h2 text-center">OUR WORKS</h1>
    <div class="row">
    	<div class="col-md-3 col-sm-4 col-xs-6 thumb">
	    		<a href="assets/images/bad-room-large.jpg" data-fancybox="gallery" data-caption="bad-room">
		           <img img class="img-responsive" src="assets/images/bad-room-small.jpg" alt="" />
	            </a>
</div>

    	<div class="col-md-3 col-sm-4 col-xs-6 thumb">
	    		<a href="assets/images/anteroom-large.jpg" data-fancybox="gallery" data-caption="anteroom">
		           <img img class="img-responsive" src="assets/images/anteroom-small.jpg" alt="" />
	            </a>
</div>

    	<div class="col-md-3 col-sm-4 col-xs-6 thumb">
	    		<a href="assets/images/bar-large.jpg" data-fancybox="gallery" data-caption="bar">
		           <img img class="img-responsive" src="assets/images/bar-small.jpg" alt="" />
	            </a>
</div>

    	<div class="col-md-3 col-sm-4 col-xs-6 thumb">
	    		<a href="assets/images/boss-room-large.jpg" data-fancybox="gallery" data-caption="boss-room">
		           <img img class="img-responsive" src="assets/images/boss-room-small.jpg" alt="" />
	            </a>
</div>

</div>
</div>

	</div>



	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		    <!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/jquery.fancybox.min.js"></script>

</body>
</html>
Александр Мальцев
Александр Мальцев
Скорее всего у вас какая-то проблема с подключением файлов через cdn. Попробуйте отключить все расширения, какие у вас установлены в браузере.
Sergey
Sergey
Спасибо, Александр!
Буду пробовать.
Sergey
Sergey
Здравствуйте, Александр. В вашем примере (песочница) ссылки на файлы jquery.fancybox.min.css и query.fancybox.min.js созданы на локальное хранилище?!
Зашел я по ссылке, скачал архив fancybox-2.1.7. В архиве нашел только jquery.fancybox.css и query.fancybox.js. Сразу сбросил два эти файла в assets и прописал путь к ним. Галерея не заработала. Потом бросил всю папку в корень проекта fancybox-2.1.7 и так само прописал ссылки на jquery.fancybox.css и query.fancybox.js. — не работает. Взял прописал ссылки на внешний ресурс:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
Галерея заработала. При открытие большой картинки у меня увеличения уже никакого не происходит, как в вашем примере?!

Мне кажется, лучше и надежнее css и js размещать у себя в проекте?!
Для этого мне нужно забросить в assets или корень проекта? jquery.fancybox.min.css и query.fancybox.min.js? Нужно весь архив сбрасывать (там много лишнего)?

Есть ли в этом плагине дополнительные возможности для реализации поведения картинки при наведении курсора, на замену простому «обесцвечиванию»?

Спасибо
Sergey
Sergey
разобрался.
скачал на этом ресурсе github.com/fancyapps/fancybox архив fancybox-master. Забросил два файла jquery.fancybox.min.css и query.fancybox.min.js в assets/… ВСЕ РАБОТАЕТ!

по ссылке, что в п.3 данного поста у меня ничего не получилось.
Sergey
Sergey
сразу было еще небольшое увеличение изображения после открытия — сейчас исчезло!
вот на этом этапе

Александр, в чем может быть причина?

Спасибо!

Sergey
Sergey
лупа не появляется!
Sergey
Sergey
зашел обратно на сайт fancyapps.com/fancybox/3/ (п.3 данного поста), сегодня уже загрузился архив с jquery.fancybox.min.css и query.fancybox.min.js
внес изменения в содержание корневого файла! Все равно лупа не работает и сама иконка не активна!

как решить проблему?

спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте! А где вы взяли ссылку fancybox-2.1.7? В статье приведена ссылка на Fancybox 3.

Если CDN надёжный, то его можно использовать. Т.к. если много сайтов будут ссылаться на один и тот же файл, то он будет просто браться из кэша браузера пользователя и его не потребуется загружать.

Для подключения Fancybox 3 через свой сайт, нужно скачать архив данной библиотеки и загрузить из него 2 файла «jquery.fancybox.min.css» и «jquery.fancybox.min.js», расположенные в папке dist в любую папку своего проекта. После этого их нужно просто подключить. При этом «jquery.fancybox.min.js» следует подключить после подключения библиотеки jquery, т.к. он от неё зависит.
Александр Мальцев
Александр Мальцев
Попробуй из режима инкогнито или перезагрузить страницу через Ctrl + F5 (может браузер старые стили берёт из кэша).
Sergey
Sergey
наверное ошибочно с другого открытого окна скачал версию 2… Это я тоже, со временем, рассмотрел.

СПАСИБО за помощь! не знаю точно почему, но проделал одно и то же раза три — все заработало.

Попробовал в IE11, как же ужасно это выглядит сейчас: не работает автоматически закрывающаяся панель при прокрутке, инструмент well — белое пятно (вместо прозрачности 50%), карусель — не прокручивает слайды, галерея — открывает окно прижатого фото без навигации управления, поповер — не работает… При том, что IE11 должен все это корректно отображать!
В базовом шаблоне, панель нормально скрывается, а остальные дополнения — уже сам добавлял.
Почитал на форумах — даже неправильно закрытый комментарий (не в том месте -->) может такой результат спровоцировать! Но в основном это CSS! Сейчас буду заново заливать весь контент в чистый шаблон и инспектировать отображение в IE11. Наверное, Билл истинный ценитель семантики и его продукты не терпят малограмотности!
Какие существуют эффективные способы устранения неполадок совместимости в IE?
Возможно, будут какие рекомендации по этому поводу!

СПАСИБО, Александр.

Александр Мальцев
Александр Мальцев
IE11 должен поддерживаться. Используй редактор кода, который подсвечивает все ошибки. Например, PhpStorm или др.
Sergey
Sergey
спасибо, попробую новую редакцию набранного кода поэтапно перенести в шторм и найти баги!
Sergey
Sergey
Александр, установил я phpstorm (JetBrains PhpStorm 2019.1 x64)! В html — ошибок нет (возле закрывающего тега боди чего-то подсвечено красным и написано element div is not closed!!! странно, тег то боди — с этим завтра разберусь).

В CSS один */ был не удален и в стилях неоконченное свойство было text…
Почему-то, шторм не хочет открывать проект в IE. ошибка

В поисковике ничего не нахожу по этому поводу!
Как быть в этой ситуации???

Но далее еще интереснее. Убрал ошибки в CSS и вручную мишкою открываю проект в IE… Все тоже самое, ничего не работает, с описанного выше… Вкладку оставляю, а сам начинаю в хроме искать информацию по штору… Минут через 10 разворачиваю IE — все «ожило», даже всплыло автоматическое сообщение о консультации со стороны специалистов ресурса! Единственное — так это фон wellа остался белым вместо полупрозрачного! Буду разбираться методом тыка с этим дивом.

Остается вопрос по шторму и IE!
Возможно имеются соображения по well?

Спасибо.
Sergey
Sergey
Чуть не забыл, еще в IE я подтвердил ellow blocked content! Какое неудобство для пользователей! Возможно ли обойти эту блокировку? чтобы посетитель сайта видел сразу весь контент!
Александр Мальцев
Александр Мальцев
Если вверху отображается восклицательный красный знак, то значит на странице имеются ошибки.
Sergey
Sergey
Спасибо, Александр — поищу проблему.
Владислав
Владислав
Добрый день Александр. Такая ситуация: галерея сверстана на bootstrap 4 одним блоком в котором картинки с максимально заданной шириной img{max-width:350px; width:100%}
У этого блока col-12. И все хорошо, но когда например используется планшетный диапазон, т.к некоторые картинки разной высоты, получаются расстояния между картинками по высоте, как сделать чтобы они смещались все к верху и прилеплялись друг к другу??? Как в вашем примере выше с Pinterest, только без подключения чего либо дополнительного, т.е средствами bootstrap или css.

Буду вам очень благодарен за возможное предложенное решение, если таковое имеется.

Александр Мальцев
Александр Мальцев
Привет! Если это можно было бы сделать с помощью CSS, то тогда не существовало бы плагинов Pinterest и др. Единственное что можно выполнить без JavaScript – это создать адаптивную колоночную сетку, и самостоятельно разложить картинки по этим колонкам.
Владислав
Владислав
Добрый день.Попробовал реализовать эту идею с помощью карточек бутстрапа 4, добавляя в карточку только фото, получилось, вдруг информация будет кому то полезна. Конечно наверное так не делают, но все же для меня это решение вопроса.
Спасибо Александр за ваш сайт, здесь много полезной информации, периодически обращаюсь к вашим статьям.
Александр Мальцев
Александр Мальцев
Привет! Совсем не подумал про CSS свойство column-count. С помощью него как раз и можно реализовать что-то наподобие Pinterest. Это CSS свойство используется для организации карточек в несколько колонок.
В этом случае способ с помощью CSS (без использования классов Bootstrap):
/* CSS */
@media (min-width: 576px) {
  .img-row {
    /* количество колонок */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    /* расстояние между колонками */
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
}
.img-row>img {
  /* необходимо установить, иначе column-count работать не будет */
  display: inline-block;
  width: 100%;
  height: auto;
  /* отступ под изображением */
  margin-bottom: 1rem;
}
HTML-разметка галереи:
<div class="img-row">
  <img src="01.jpg" alt="...">
  <img src="02.jpg" alt="...">
  <img src="03.jpg" alt="...">
  ...
При этом можно добавить разные медиа-запросы и организовать на разных разрешениях разное количество колонок.
Пример в песочнице.

Если привлечь класс Bootstrap карточки card-columns, то в этом случае код можно использовать следующий (при этом сами карточки создавать не нужно):
@media (min-width: 576px) {
  .img-row>img {
    display: inline-block;
    margin-bottom: 1rem;
  }
}
HTML-разметка галереи с использованием card:
<div class="card-columns img-row">
  <img class="img-fluid" src="01.jpg" alt="...">
  <img class="img-fluid" src="02.jpg" alt="...">
  <img class="img-fluid" src="03.jpg" alt="...">
  ...
</div>
Посмотреть эту галерею можно здесь.
Владислав
Владислав
Спасибо за информацию Александр, возьму себе в арсенал данный метод.
Роман
Роман
Доброго времени суток, Александр.
Спасибо за материал.
Возникла сложность с применением.
Есть страница на которой нужно разместить 3 различных галереи и переход между галереями не должен проходить через перезагрузку страницы.
Само переключение между блоками с галереями, сделано через скрипт скрывающий блок
<script type="text/javascript">
allDiv=3;
function showDv(n){
    for(i=1;allDiv+1>i;i++){
    document.getElementById('d'+i).style.display = 'none';
    }
    document.getElementById('d'+n).style.display = 'block';
}
</script>
Переключатели в коде:
  <div id="boot-kategorii"><a href="#" onclick="showDv('1')"><img src="img/boot-render.png"></a></div> 
    <div id="boot-kategorii"><a href="#" onclick="showDv('2')"><img src="img/boot-vr.png"></a></div>
<div id="boot-kategorii"><a href="#" onclick="showDv('3')"><img src="img/boot-chertej.png"></a></div>
сами блоки:
<div style="display:block;" id="d1">
<div style="background: red;display:none;" id="d2"></div>
<div style="background: red;display:none;" id="d3"></div>
В первом блоке (который виден при переходе на данную страницу) галерея работает прекрасно. А вот при скрытии этого блока и отображении второго, выдает в полный размер и одной колонкой.Вы тут в комментариях нечто похожее поясняли, пробовал этот скрипт применить, но знаний не хватает от слова — совсем. :(
Пробовал через gridify, но тогда во втором блоке картинки схлопываются в пачку(как в карточном пасьянсе, где чуть виден край лежащей снизу) и сваливаются куда-то в подвал страницы полностью выпадая из потока.
Александр Мальцев
Александр Мальцев
Привет!
Первый вариант — это организовать через AJAX. Это лучший вариант, т.к. на странице не будет лишнего контента. Здесь с помощью get-запроса получаете контент, вставляете его на страницу и инициализируете его с помощью какой-нибудь галереи.
Второй вариант — это инициализировать галерею только после того, как с неё будет убрано значение «display:none».
Описанная ситуация происходит из-за того что скрипт рассчитывает размеры, а значение «display:none» не позволяет выполнить скрипту это так как нужно.

Роман
Роман
Я в этом деле совсем чайник :) Собираю себе сайт как пазл из кусочков и по возможности разбираюсь как работает.
Если правильно понял, то нужно запустить скрипт мозаики по наступлению события. В данном случае по нажатию на ссылку, меняющую значение блока. Что-то такое находил уже и пытался переписать под свою ситуацию, но не получается почему-то :( Видимо слишком сложно для моего уровня ))
Если не затруднит, подскажите что и куда вписать :)
https://codepen.io/Agraell78/pen/MWgQYBwI
Александр Мальцев
Александр Мальцев
Ошибка 404 при открытии этой ссылки
Роман
Роман
https://codepen.io/Agraell78/pen/MWgQYBw
Лишний символ откуда-то появился
Александр Мальцев
Александр Мальцев
Создал пример, наверное, это лучше будет.
В этом примере галерея состоит из 3 секций. Инициализация секции происходит только после того, как пользователь нажимает на соответствующую ссылку.
Роман
Роман
спасибо огромное.
Роман
Роман
Александр, снова к Вам за помощью.
С тем, как работает скрипт разобрался. Вернее уже кое-как научился читать скрипты и понимать их логику )) Но вот самому не получается.
Что нужно добавить, чтобы секции галереи обернуть в дополнительные блоки к которым не будет применяться скрипт галереи, а только none и block по тому же событию?
Над самой галереей нужно еще ее название вставлять в виде картинки и в таком варианте ее включает в галерею как картинку этой галереи
Или может можно как-то изолировать отдельный блок внутри секции и принудительно отключить применение галереи по id этого блока?
Пробовал сам, но увы… Не мое это)))
Александр Мальцев
Александр Мальцев
Тогда создайте полноценный свой пример в какой-нибудь песочнице, тогда можно будет конкретно и предметно посоветовать, как это сделать.
Роман
Роман
https://codepen.io/Agraell78/pen/MWgQYBw
тут кусок страницы на котором я еще с Mosiac Flow пытался все собрать.
Три основные секции и в каждой секции вложен блок с галереей
Viktor
Viktor
Добрый день, Александр. Скажите можно сделать что бы по клику на изображение был переход на другой сайт? То есть, по клику на картинку он открывается в fancybox и уже потом по клику на него в fancybox идет переход на сайт.
Софья
Софья
Добрый день, у меня есть проблема, связанная с отображением галереи после заливки сайта на ftp.
Есть сайт, контент которого загружается по кнопкам меню в div без перезагрузки всей страницы (на ajax). Одна из станиц сайта — статическая галерея на mosaicflow, кусок для наглядности:
<html>
  <head>
  	<script src="js/jquery-3.3.1.min.js"></script>
  	<link rel="stylesheet" type="text/css" href="engine1/style.css" />
	<script src="engine1/jquery.js"></script>
	<script src="js/jquery.mosaicflow.min.js"></script>

  	<link href="adaptation.css" rel="stylesheet" type="text/css">
  	<link href="menu.css" rel="stylesheet" type="text/css">

  	<link href="contact.css" rel="stylesheet" type="text/css">
  
<script>
$(document).ready(function () {
    $('#menu li a').click(function () {
          $('#menu li').removeClass('active');
        $(this).parent().addClass('active');
           return true;
    });
 });
</script>

     <style>
        .mosaicflow__item {
            padding: 5px;
        }

        .mosaicflow__column {
            float: left;
        }

        .mosaicflow__item img {
            display: block;
            width: 100%;
            height: auto;
            padding: 4px;
            background-color: #fff;
            border-radius: 4px;
        }

        .mosaicflow__item img:hover {
            opacity: 0.7;
            filter: alpha(opacity=60);
        }
    </style>
 </head>
<body class="home">
<div id="pagewrap">

<div id="content">
    <img src="img/photo_page1.png"/>
  		
      	<h2 class="head" style="color:#264a8e; font-size:150%">Projets récents</h2>
    		<div class="txt">
      			
 		</div>
	<div class="clearfix mosaicflow">

        <div class="mosaicflow__item">
                <img  class="img-responsive" src="prj-gallery/w1.jpg" alt="">
        </div>
        <div class="mosaicflow__item">
                <img class="img-responsive" src="prj-gallery/g1.jpg"" alt="">
        </div>
        <div class="mosaicflow__item">
                <img class="img-responsive" src="prj-gallery/cff4.jpg" alt="">
        </div>
...
При просмотре в браузерах этой страницы с локальной машины отображение отличное. Как только заливаю на сервер — страница забывает про mosaicflow и выдает изображения в столбик в реальном размере.
Не понимаю, почему так, неужели ajax кривит? Может сталкивались с таким, как преодолеть?
Александр Мальцев
Александр Мальцев
Добрый! Вам необходимо после загрузки контента галереи с помощью AJAX ещё выполнить функцию mosaicflow(). При этом плагин jquery.misaicflow.js и необходимый css код уже должны быть подключены к странице.
...
$('#gallery').append(data);
$('#gallery').mosaicflow({
  itemSelector: '.mosaicflow__item',
  minItemWidth: 300
});
...
Софья
Софья
Попробовала сделать, добавив вызов функции после div с контентом галереи:
  </div> <!--div mygallery--> 
   	
   </div>	     
</div> <!--div pagewrap-->   
	
	<script src="js/jquery.mosaicflow.min.js"></script>

 	<script>
		$(document).ready(function(){
			$('#mygallery').append(data);
			$('#mygallery').mosaicflow({
  			itemSelector: '.mosaicflow__item',
  			minItemWidth: 300
    		});
		 });
 
</script>
Но результата нет.
Также пробовала добавить этот же кусок+ css и jquery.mosaicflow.min.js на «родительскую» index.html — но тоже безуспешно.
Александр Мальцев
Александр Мальцев
А где AJAX? Данные инструкции, конечно же, нужно поместить в функцию, которая будет выполнена после прихода AJAX ответа с сервера. Так конечно они не будут работать.
Если вы используете jQuery функцию load, то так:
$(function(){
$('#mygallery').load('path_to/page_with_gallery.html', function() {
  $('#mygallery').mosaicflow({
    itemSelector: '.mosaicflow__item',
    minItemWidth: 300
});
Элемент с id, равным mygallery — это элемент в который будет загружено содержимое файла page_with_gallery.html. Данный файл, должен содержать HTML код галереи.
Alexey
Alexey
Здравсвуйте! Хотел узнать на счет gridify. Все работает отлично! Но появилась задача, сделать кнопку сортировки по id. Подскажите, если это возможно)) Кнопка есть и изображения сортируются без gridify, но когда его вкл. то ни чего не меняется… Буду очень благодарен!
Александр Мальцев
Александр Мальцев
Здравствуйте! У gridify метода для сортировки нет. Но, это задачу можно очень просто решить с помощью AJAX. Т.е. например, создать необходимое количество кнопок с атрибутом data-action, при нажатии на которые выполнять AJAX запрос, получать данные (изображения) и выводит их как нужно в контейнер с классом grid. После этого вызывать метод gridify.
Alexey
Alexey
Вот есть сортировка. Как вызвать метод? Просто $('.grid').gridify(options);? или как-то по другому?)
$('.sort').click(function () {
        $('.sort_img a').sortElements(function (a, b) {
            return parseInt($(a).attr("id")) > parseInt($(b).attr("id")) ? 1 : -1;
        });
    });
Александр Мальцев
Александр Мальцев
Предпочтительнее это конечно выполнить по AJAX, но можно и по-простому. Пример с сортировкой можно посмотреть здесь.
Т.е. нужно сначала сохранить исходный код разметки (до вызова gridify), а потом его использовать для восстановления исходного содержимого элемента с классом grid перед вызовом gridify(options).
Код JavaScript:
$(function () {
  var gridHTML = $('.grid').html();
  var options = {
    srcNode: 'img',
    margin: '15px',
    width: '240px',
    max_width: '',
    resizable: true,
    transition: 'all 0.5s ease'
  };        
  $('#default').click(function(){
    $('.grid').html(gridHTML);
    $('.grid').gridify(options);
  });
  $('#byid').click(function(){
    $('.grid').html(gridHTML);    
    $('.grid-item').sortElements(function (a, b) {
      return parseInt($(a).attr("id")) > parseInt($(b).attr("id")) ? 1 : -1;
    });
    $('.grid').gridify(options);
  });              
});
Alexey
Alexey
Спасибо, огромное! Все работает!)
Аноним
Аноним
Подскажите, а как добавить текст на всплывающее изображение?
Александр Мальцев
Александр Мальцев
Всплывающее сообщение fancybox 3 задаётся с помощью атрибута data-caption:
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_01.jpg" data-caption="Некоторый текст...">
  <img class="img-fluid" src="/examples/images/for-image-gallery/img_01.jpg" alt="">
</a>
Сергей
Сергей
Подскажите, как убрать синюю рамку после выхода с просмотра изображения facebox3. Рамка вокруг a и img.
itchief.ru/assets/uploadify/d/c/8/dc82148a76c8ce914dc1007f9ac9b12b.jpg
Сергей
Сергей
Вопрос снят. Отступ был от ссылки a
Yaroslav Predtechenskiy
Yaroslav Predtechenskiy
Благодарю за столь интересный и отлично изложенный материал. Но у меня возник вопрос. Галерея не растягивается по высоте. Есть ли способ побороть это?
itchief.ru/assets/uploadify/e/a/3/ea31b5b699a0a5ffb85eebf0da2d7463.png
itchief.ru/assets/uploadify/8/0/e/80ea5a3739dae72166d41c5c4d2f94e2.png
Yaroslav Predtechenskiy
Yaroslav Predtechenskiy
использовал MosaicFlow. Там нет такой проблемы. При использовании gridify, в данном случае вылетает из потока блок и начинаются проблемы с бэкграундом. Даже в вашем примере эта проблема присутствует. Может как-то это можно решить? Скрин прилагаю.
itchief.ru/assets/uploadify/9/1/0/91060512508741d1717f512c85c89e15.jpg
itchief.ru/assets/uploadify/9/d/d/9dd2d04c50c9ac4576c18f2e732174e7.jpg
Александр Мальцев
Александр Мальцев
Спасибо. Вы хотите, чтобы картинки были все одинаковые по высоте?
Александр Мальцев
Александр Мальцев
Да, в gridify есть ошибка, она не вычисляет высоту контейнера. Исправленную версию gridify можете загрузить отсюда.
Cyberjo
Cyberjo
Александр, нашел у вас разбор интересного варианта галереи, подскажите пожалуйста, может быть вы встречали галерею наподобие этой. Суть задачи сделать предпросмотровые окна с текстом, что бы по клику на них они открывали не только изображение, а полностью изображение + текст, наподобие первого варианта… галереи гугла.
Александр Мальцев
Александр Мальцев
Нет, не встречал. Но можете её можно попробовать реализовать что-то подобное на базе модального окна Bootstrap.
Юрий
Юрий
вот пример == wnik-ru.1gb.ru/news/ оцените и хотелось бы услышать замечания и полезные советы
hood
hood
Доброго времени суток.
Обращаюсь к вам за помощью с bootstrap.
Пожалуйста помогите разобраться с колонками, не могу сделать как на рисунке, битый час пробую, всё время средняя колонка, то больше то меньше остальных. Как сделать так, чтобы колонки с изображениями внутри располагались именно такой плиткой?
itchief.ru/assets/uploadify/6/b/3/6b363d481951a4ff6d0fecce02025bb1.jpg
Александр Мальцев
Александр Мальцев
Тут обычная разметка. Можно сделать следующим образом:
Код HTML:
<div id="container" class="container-fluid">
  <div class="row">
    <!-- Первый столбец -->
    <div id="left" class="col-xs-4">
	  <div style="height: 410px; background-color: orange"></div>
	  <div style="height: 200px; background-color: orange"></div>
	</div>
    <!-- Второй столбец -->
    <div id="middle" class="col-xs-4">
	  <div style="height: 200px; background-color: orange"></div>
	  <div style="height: 200px; background-color: orange"></div>
	  <div style="height: 200px; background-color: orange"></div>
	</div>
    <!-- Третий столбец -->
    <div id="right" class="col-xs-4">
	  <div style="height: 200px; background-color: orange"></div>
	  <div style="height: 410px; background-color: orange"></div>
	</div>
  </div>
</div>
Код CSS:
#container {
  margin: 0 auto;
  width: 1160px;
  padding-left: 10px;
  padding-right: 10px;	  
}
#container .row {
  margin-left: -10px;
  margin-right: -10px;	  
}
#container .col-xs-4 {
  padding-left: 0px;
  padding-right: 0px;	  
}
#left {
  width: 375px;
  margin-left: 10px;
}
#right {
  width: 375px;
  margin-right: 10px;
}
#middle {
  width: 370px;
  margin-left: 10px;
  margin-right: 10px;
}
#container div.col-xs-4>div:not(:first-child) {
  margin-top: 10px;
}
hood
hood
Александр, благодарю за помощь, можно ли это сделать при помощи класса thumbnail?
И что делать с адаптивностью? Нужно что бы блоки отображались как на картинке до размера xs.
Rjvfy
Rjvfy
Большое спасибо за ответ!
Еще 2-а вопроса.
1. Существует ли какой то плагин, который делал бы нужные обработки перед закачкой(не только разворот, но и сжатие до определенных размеров)?
2. Существует ли какой то онлайн сервис, через который можно б было транзитом проводить закачку фото с нужной обработкой?
Александр Мальцев
Александр Мальцев
1. В качестве плагина можно попробовать JavaScript-Load-Image. Кстати, на странице есть демо, так что можно посмотреть.
2. Не знаю, есть ли такие сервисы.
Rjvfy
Rjvfy
У меня вопрос по fancybox.
1. При загрузке фото в div слева направо все фото выводятся горизонтально. То есть фото, что сфотографированы вертикально, поворачиваются на 90 градусов. Нигде не могу найти параметр, который отвечает за поворот.
Александр Мальцев
Александр Мальцев
Это проблема не fancyBox. Большинство современных камер добавляют тег (флаг) JPEG EXIF Orientation к изображению. И чтобы браузер это изображения отобразил верно, он должен этот тег (флаг) прочитать и повернуть изображения в соответствии с ним. Т.е. независимо от фактического формата изображения (портрет/пейзаж). Но это могут делать не все браузеры… Единственное решение, это открыть изображения в каком-нибудь графическом редакторе, повернуть их и сохранить. Т.е. их придётся предварительно обрабатывать.
Александр
Александр
Александр, еще вопрос по Mosaic Flow и Fancybox, суть в следующем.
Есть joomla шаблон JA MONO.
Если зайти в меню и щелкнуть про projects а потом по любой статье — открывается статья.
Пытаюсь статью (статьи) поженить с Mosaic Flow и Fancybox, но вывод статей происходит с использованием аякса и в результате javascript, который должен строить Mosaic Flow — «простыню» из миниатюр и завязаный на document.ready — не отрабатывает. Срабатывает только после обновления страницы.

Вопрос к чему еще кроме document.ready можно привязать запуск скрипта, чтобы «простынка» с миниатюрами строилась?
Александр Мальцев
Александр Мальцев
Инициализацию Mosaic Flow можно выполнить и вручную при наступлении любого события.
Для этого у контейнера необходимо убрать класс mosaicflow и инициализировать его с помощью JavaScript:
// mosaicflow - id контейнер, содержимое которого необходимо инициализировать как Mosaic Flow
var mosaicContainer = $('#mosaicflow').mosaicflow();
Александр
Александр
Александр, а можно пример, как будет выглядеть инициализация?
Допустим на странице (в материале) есть div у которого в том числе есть класс article-image-full, как будет выглядеть привязка инициализации mosaicflow к отображению этого дива на экране?
Александр
Александр
Александр, вопрос снят.
Решение нашел.
Всеравно благодарю.
Александр
Александр
Александр, приветствую.
Появился такой вопрос по галерее с Mosaic Flow и Fancybox:
все нормально работает за небольшим исключением, когда открывается изображение в FancyBox страница сдвигается к началу и по закрытию FancyBox — так там и остается, как это можно поправить?
Александр Мальцев
Александр Мальцев
Здравствуйте, Александр. Проверил галерею Mosaic Flow, представленную на демонстрационной страницы, в различных браузерах. Такого не заметил. Может быть, какие-то ваши скрипты при этом срабатывают…
Проверьте галерею: itchief.ru/examples/lab.php?topic=bootstrap&file=b3-image-gallery-like-pinterest-on-mosaicflow
Если она также себя ведёт, то напишите, в каком браузере и ОС.
Александр
Александр
Благодарю.

Это происходило в google chrome.
перенес на другой сервер — перестало
Rjvfy
Rjvfy
Огромное человеческое СПАСИБО!!!
Добавил в мастер страницу в конец и пошло.
Наверное с другими плагинами чтото «плужил».
Rjvfy
Rjvfy
Здраствуйте Александр. Я Роман, ошибся при регистрации. Спасибо за статью. Очень полезная статья. Галерея на fancybox работает Отлично, но есть одно НО, которое я уже 2-а дня немогу побороть. Когда я подключаю мастер страницу, плагин перестает работать: работает просто ссилка (фото раскривается на все окно). Убираю мастер страницу
Layout = null; — все работает.
Пробовал еще 3-и плагина fancyzoom,lightbox2,prettyPhoto, но результат такой же.

Что может бить?
Александр Мальцев
Александр Мальцев
Здравствуйте, Роман. Насколько я понимаю, вы используете ASP.NET MVC. В этом случае вам необходимо подключать плагин fancybox и другие файлы проекта к мастеру страницы. А на странице, которая использует мастер страницу располагать только основной контент, т.е. контейнер с изображениями.
Rjvfy
Rjvfy
Здаствуйте. Вы ПРОРОК. ASP.NET MVC Core. Я вроди так пробовал с другими плагинами. Но еще раз попробую с fancybox.
Спасибо за быстрий ответ.
Аноним
Аноним
Здравствуйте.
Сделала все, как написано, но галерея не работает.
Сверху между head
<link href="fancybox/jquery.fancybox.css" rel="stylesheet">
Внизу:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery("a.fancyimage").fancybox();
});
</script>
</body>

Пробовала и так (не работает):
<code>
<script type="text/javascript"> 
$(document).ready(function() { 
  $("a.fancyimage").fancybox(); 
}); 
</script> 

Для отображения изображений:
<code>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3">
  <a class="fancyimage" data-fancybox-group="group" href="http://placehold.it/300x320.png">
    <img class="img-responsive" alt="" src="http://placehold.it/320x320">
  </a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3">
  <a rel="gallery" class="fancyimage" href="http://fancyapps.com/fancybox/demo/2_b.jpg">img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
</div>
Ни то, ни другое не работает.
Ошибки в консоле:
TypeError: jQuery(...).fancybox is not a function
index.html:123:5
<анонимная>
index.html:123
(здесь говорит, что ошибка jQuery(«a.fancyimage»).fancybox();, если прописываю иначе, то ошибка $(«a.fancyimage»).fancybox(); )
m.Callbacks/j()
jquery.min.js:2
m.Callbacks/k.fireWith()
jquery.min.js:2
.ready()
jquery.min.js:2
J()

Не понимаю в чем дело, до этого другую галерею ставила, всё работало, но нужна эта, так как более функциональная и никак не подключить.
помогите, пожалуйста
Александр Мальцев
Александр Мальцев
У Вас директория fancybox расположена в корне?
В одном случае Вы пишите так:
fancybox/jquery.fancybox.css
В другом месте так:
/fancybox/jquery.fancybox.pack.js
/fancybox/jquery.fancybox.js
Скорее всего необходимо убрать слэш перед fancybox.
Аноним
Аноним
Да, убрала с утра, дошло наконец-то. Вроде заработало, но картинки открываются как попало (одна выше открывается, другую щелкую, она уже ниже на экране), нет крестиков, чтобы закрыть, нет стрелочек. Подключила стили и скипты helpers, не помогло.
Аноним
Аноним
А как сделать так чтобы при добавлении разных картинок (по высоте и ширине), их превью отображались одинаково?
Пример картинки.
Александр Мальцев
Александр Мальцев
Используйте jquery плагин jQuery NailThumb.
Аноним
Аноним
А его как то можно к bootstrap прикрутить?
Александр Мальцев
Александр Мальцев
На этом сайте есть примеры (examples).
Например, необходимо обернуть каждую карнтинку в блок div с классом nailthumb-container и добавить к странице следующий скрипт.
<div class="nailthumb-container"><img src="image1.png"></div>
<div class="nailthumb-container"><img src="image2.png"></div>
<div class="nailthumb-container"><img src="image3.png"></div>
...
<script>
jQuery(document).ready(function() {
  jQuery('.nailthumb-container').nailthumb({width:100,height:100,fitDirection:'top left'});
});
</script>
Также необходимо после подключения библиотеки jquery подключить саму эту библиотеку:
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
Кроме этого примера примера, данная библиотека ещё содержит и другие.
Аноним
Аноним
Спасибо
Аноним
Аноним
А как сделать что-то похожее на это:
wp.unitegallery.net/tiles-justified/
чтобы ширина каждого рядка была одинаковой и внизу было ровно?
Заранее спасибо!
Александр Мальцев
Александр Мальцев
А зачем это делать, если его можно скачать, установить и настроить.
Аноним
Аноним
Спасибо большое. Все установил, все работает. А то думал, что покупать надо)
Аноним
Аноним
Ребята, кто подскажет как лайки каждой фотке сделать, ни в контакте привязать а на сайте типа плюс один или нравиться, что то в этом роде. Спасибо!
Елена
Елена
Спасибо! Всё работает!
Аноним
Аноним
Умоляю помогите!!! Проблема с галереей сайта.
Последние нижние 2 фото в галерее выбиваются (неровно относительно верхних находятся и относительно друг друга). Подскажите, как это исправить?
HTML-код:
  ...
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="js/jquery.colorbox.js"></script>
  <script>
    $(function() {
      $(".colorbox").colorbox({
        rel: 'colorbox',
        maxWidth: '500',
        maxHeight: '500'
      });
    })
  </script>
</head>
<body>
  ...
  <div class="content photos">
  <h1>Photos</h1>
  <div>
    <a class="with_bg colorbox" href="img/photos/full/1_2.jpg" style="background-image: url(img/photos/1_2_bg.jpg)">
      <img alt="" src="img/photos/1_2.jpg" />
    </a>
    <a class="with_bg colorbox" href="img/photos/full/1_4.jpg" style="background-image: url(img/photos/1_4_bg.jpg)">
      <img alt="" src="img/photos/1_4.jpg" />
    </a>
  ...
  </div>
  ...
Александр Мальцев
Александр Мальцев
Это определяют стили CSS которые Вы используете. Приводить HTML код нет смысла, т.к. нужны ещё стили. Если хотите чтобы Вам помогли разобраться сделайте страничку на jsfiddle.
Аноним
Аноним
У меня два таба на bootstrap

в первом табе галерея нормально работает — а при переключении на второй таб — вторая галерея во второй закладке не показывается
В чем дело? виноват переключатель табов или MosaicFlow?
Александр Мальцев
Александр Мальцев
Тут скорее дело с инициализацией MosaicFlow. Т.е. когда 2 таб не показывается производить инициализацию галереи в нём нельзя. Тут необходимо использовать событие shown.bs.tab и когда оно происходит проверять, если это 2 таб то выполнять инициализацию MosaicFlow, которая находится во второй вкладке.
Руслан
Руслан
Можете описать подробней?
Недавно начал изучать веб программирование и затрудняюсь сделать это сам
Александр Мальцев
Александр Мальцев
Для этого нужно создать, например, следующий скрипт:
$(function () {
  // массив для хранения id вкладок, которые уже инициализированы с помощью Mosaic Flow
  var idTabPanes = [];
  // функция для инициализации Mosaic Flow для вкладки
  function initMosaicFlow(idTabPane) {
    if (idTabPanes.indexOf(idTabPane) === -1) {
      idTabPanes.push(idTabPane);
      $(idTabPane + ' .tab-content').mosaicflow({
        itemSelector: '.mosaicflow__item',
        minItemWidth: 300
      });
      $(window).trigger('resize');
    }
  }
  // активирование Mosaic Flow после загрузки страницы, если есть активная вкладка
  if ($('.tab-pane.active').length) {
    initMosaicFlow('#' + $('.tab-pane.active').prop('id'));
  }
  // событие, происходящее при открытии вкладки
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    initMosaicFlow($(e.target).attr('href'));
  });
});
Пояснение в нём основных моментов осуществлено с помощью комментариев.
Ссылка на пример.
Аноним
Аноним
Здравствуйте! Может не в тот раздел пишу, но все же. Подскажите пожалуйста, есть скрипт js на появление и пропадание стрелок навигации вправо, влево при наведении курсора на owl carousel.
var
        child = $('.owl-nav');
    $ ('.owl-carousel').hover(function() {
        child.show();
    },
    function() {
        child.hide();
    });
Все вроде бы работает, но есть такая особенность, что при обновлении страницы, стрелки видны, независимо от того лежит курсор на карусели или же нет. Стоит перевести курсор на карусель и убрать с неё, как все работает как нужно.
Как убрать видимость стрелок навигации при обновлении страницы
Аноним
Аноним
Снимаю вопрос. Решил его вот таким скриптом, может кому пригодиться
 $(document).ready(function(){
        $('.owl-nav').hide(0);
        $('.owl-carousel').on('mouseenter', function(){
            $('.owl-nav').css({display: "block"});
        });
        $('.owl-carousel').on('mouseleave', function(){
            $('.owl-nav').css("display", "none");
        });
});
Андрей
Андрей
Хочу заменить модальное окно на окно inline плагина fancybox. Как правильнее привязать кнопку открытия fancybox inline — только через атрибут ссылки или есть какое-то другое решение?
Андрей
Андрей
Ну так это отключит плагин полностью, а хотелось-бы отключить только для отдельных выборочных функция, например фотографий, которые и так на весь мобильный экран уже растянуты. А например в других моментах fancybox всё равно используется.
Андрей
Андрей
Скачал fancybox 1.3.4., все прописал на своей разрабатываемой странице как в примере — не работает. Долго разбирался, пока не понял, что fancybox 1.3.4 использует jqueri 1.4, а bootstrap 3,3,6 использует версию 1.11.3. В результате или fancybox не работает или функции bootstrap. Что делать, как правильно все прописать, что-бы работало и то и другое ??
Александр Мальцев
Александр Мальцев
Здесь используется fancybox 2.1.5.
_http://fancyapps.com/fancybox/
Андрей
Андрей
А возможно-ли сделать, что-бы некоторые ссылки fansybox работали только на больших экранах, например что-бы на xs экранах смартфонов нажатие на фото не открывало-бы отдельное окно fansybox?
Александр Мальцев
Александр Мальцев
Можно, изменив скрипт инициализации плагина fancybox на следующий:
$(document).ready(function() { 
  if (window.innerWidth >=768) {
    $("a.fancyimage").fancybox(); 
  }
  else {
    $('a.fancyimage').each(function(){
      $(this).click(function(e){
        e.preventDefault();
      });
    });
  }
});
Дарья
Дарья
Здравствуйте! Очень понравились ваши уроки. При создании галереи возникла такая ситуация. Есть главная страница (index.html) на которой располагается меню и контент. Нужно, что при нажатии на пункт меню «Галерея» на эту страницу вместо контента отображалась галерея. Она отображается, но вместо сетки миниатюр изображений, они располагаются в реальном размере одно под одним. Как можно это исправить или в чем может быть проблема?
Галерея сейчас отображается так.
Заранее спасибо.
Александр Мальцев
Александр Мальцев
Самый простой вариант сделать так.
HTML-код:
<div id="news">
  Блок новостей...
</div>
<div id="gallery" class="hidden">
  Галерея (по умолчанию не отображается)...
</div>
JavaScript-код (вставить его после подключения библиотеки jQuery):
<script>
$(function(){
  // showNews - id ссылки Новости в меню
  $('#showNews').click(function(e) {
    e.preventDefault();
    if ($('#news').hasClass('hidden')) {
      $('#news').removeClass('hidden');
    }
    if (!$('#gallery').hasClass('hidden')) {
      $('#gallery').addClass('hidden');
    }
  });
  // showGallery - id ссылки Галерея в меню
  $('#showGallery').click(function(e) {
    e.preventDefault();
    if ($('#gallery').hasClass('hidden')) {
      $('#gallery').removeClass('hidden');
    }
    if (!$('#news').hasClass('hidden')) {
      $('#news').addClass('hidden');
    }
  });
});
</script>
Дарья
Дарья
спасибо) буду пробовать
Аноним
Аноним
Спасибо большое попробую
Аноним
Аноним
Здравствуйте! А вот такой вопрос. Есть страница портфолио, там несколько блоков. В каждом блоке идет заголовок, описание и картинка ( с этим все понятно), затем кнопка «смотреть далее» — вот здесь после нажатия этой кнопки должен открыться блок с прокруткой и содержанием набора фотографий относящихся к данному блоку.
Пока получилось сделать лишь с помощью кнопки переход на другой html в котором сделана галерея, но надо именно как написано выше.
Заранее спасибо.
Александр Мальцев
Александр Мальцев
Здравствуйте!
Вам необходимо написать некоторый скрипт, который будет это делать.
Можно например, начать так:
Код HTML+JS
<script>
// для формирование кода галереи будем использовать функцию
var imagePortfolio = function() {
  var htmlCode;
  for (var i=0; i<arguments.length; i++) {
    htmlCode += '<div class="col-md-3 col-sm-4 col-xs-6 thumb">'+ 
                '<a class="fancyimage" data-fancybox-group="group" href="/photo/'+arguments[i]'">'+ 
                '<img class="img-responsive" src="/photo/'+arguments[i]'"></a></div>';
  }
  // в качестве результата будем возвращать функцию, которая будет вставлять этот код в необходимый контейнер
  return function {
    $('imageContainer .row').html(htmlCode);
  }
}
//после загрузки страницы
$(function(){
  //для каждого портфолио укажем изображения
  var imageportfolio1 = imagePortfolio('photo1-1.jpg','photo1-2.jpg','photo1-3.jpg','photo1-4.jpg');
  var imageportfolio2 = imagePortfolio('photo2-1.jpg','photo2-2.jpg','photo2-3.jpg','photo2-4.jpg');
  var imageportfolio3 = imagePortfolio('photo3-1.jpg','photo3-2.jpg','photo3-3.jpg');
  //привяжем кнопки к вызову соответствующего портфолио (или как-то по другому)
  $('#button1').click(functon(){
    imageportfolio1();
  });
  $('#button2').click(functon(){
    imageportfolio1();
  });
  $('#button3').click(functon(){
    imageportfolio1();
  });
});
</script>
<!-- Контейнер, в который будет выводится галерея с вертикальной прокруткой -->
<div id="imageContainer" style="height: 700px; overflow-y: scroll;">
  <div class="container"> 
    <div class="row"> 
    </div> 
  </div>
</div>
Аноним
Аноним
Почему мозаик флов при загрузке страницы растягивает секцию с фотографиями на 8 тысяч пикселей, грузятся миниатюры фотографий которые отдельно были подготовленны
Мария
Мария
Спасибо.
Мария
Мария
В этом примере использованы Fancybox и MixitUp, а вот подружить их с Mosaic Flow у меня не получается пока. Код примера взят отсюда jsfiddle.net/donatasben/2VdKK/10/. При попытке просто скрывать (display:none) ненужные картинки по клику на кнопке меню, (без подключения mixitup), остаются пустые места.
Александр Мальцев
Александр Мальцев
Mosaic Flow не содержит методов, которые бы позволили перестроить (обновить) мозайку. В данном случае придётся подготавливать код для Mosaic Flow каждый раз или в качестве варианта может стоит посмотреть какой-нибудь другой плагин подобный Pinterest.
Мария
Мария
Как Вы справедливо заметили, дело, действительно, не в мозайке.
Мария
Мария
Аноним
Аноним
Я имела ввиду сортировку как в плагине mixitup.js.
Аноним
Аноним
Александр, огромное спасибо за статью. Если моя просьба не отнимет у Вас много времени, подскажите пожалуйста, в мозайке при событии (click, например), вызывающем скрытие/показ (display:none/display:block) нескольких элементов галереи, можно ли как-то пересортировать оставшиеся элементы, чтобы от скрытых элементов не оставалось пустого места в сетке?
Александр Мальцев
Александр Мальцев
Мария, не совсем понял Ваш вопрос. Он про Mosaic Flow? При нажатие на изображение, оно открывается в окне fancyBox, в котором Вы можете изображения перелистывать. Так в какой момент, Вы хотите удалить или скрыть изображение?
Аноним
Аноним
Александр, спасибо за пособие, Вы делаете хорошую и нужную работу!
Вывод tumb-ов на странице работает, но открываются изображения на новой странице, и отсутствуют стрелки навигации и кнопка «закрыть». Как быть в таком случае? Я не вижу, где это могло бы настраиваться.
Спасибо огромное!
Александр Мальцев
Александр Мальцев
Проверьте и исправьте ошибки, связанные с подключение библиотеки jQuery, fancyBox и др. Для этого можете открыть панель разработчика (F12) в браузере и перейти на вкладку консоль.
Аноним
Аноним
У меня выдает следующую информацию:

10-avtosalon-volkswagen:30 Uncaught TypeError: jQuery(...).tooltip is not a function
(anonymous function) @ 10-avtosalon-volkswagen:30
fire @ jquery-1.12.3.js:3232
self.fireWith @ jquery-1.12.3.js:3362
jQuery.extend.ready @ jquery-1.12.3.js:3582
completed @ jquery-1.12.3.js:3617

Я не могу понять в чем суть. Помогите пожалуйста.
Александр Мальцев
Александр Мальцев
Не подключен bootstrap.js
Аноним
Аноним
Как сделать на основе fancybox вывод галереи, когда жмешь на img1, а в галерее видишь и листаешь img2 и img3?
Александр Мальцев
Александр Мальцев
Она сейчас так и работает.
Аноним
Аноним
Добрый вечер. Возник вопрос. Когда открываешь галерею на смартфоне, то при нажатии на фото, оно открывается также как и на компьютере, т.е. не на весь экран. Как сделать чтобы при открытии на смартфоне фотка разворачивалась на весь экран?
Александр Мальцев
Александр Мальцев
Здравствуйте, Иван.
Замените fancybox на что-нибудь другое, которое позволяет это сделать.
Например, на photoswipe.com
Аноним
Аноним
Спасибо за статью, подскажите пожалуйста, у меня на мобильном телефоне все фотографии в одну колонку
как сделать так чтобы на телефоне была такая же мозайка в несколько колонок?
в мануале на гит хабе написанно что можно как то инициализировать через событие джаваскрипт: mosaicflow-layout
но я в джава не селен, не знаю как события писать.
Скриншот
Александр Мальцев
Александр Мальцев
Инициализировать MosaicFlow можно только один раз.
Т.е. Вы можете с помощью JavaScript определить ширину рабочей области окна браузера и задать ширину элементов.
Для этого:
1. Необходимо у контейнера удалить класс mosaicflow (чтобы он не инициализировлся на автомате) и добавить идентификатор myContainer:
  <div class="container"> 
    <div id="myContainer" class="clearfix">  
      <div class="mosaicflow__item">
        <-- ... -->
2. Добавить скрипт после подключения библиотеки jQuery:
<script>
jQuery(function($) {
  $(function() {
    if ($(window).width() < 768) {
      //инициализация mosaicflow с шириной элемента 100px (для экрана <768)
      $('#myContainer').mosaicflow({
        itemSelector: '.mosaicflow__item',
        minItemWidth: 100
      });
    }
    else  {
      //инициализация mosaicflow с шириной элемента 300px (для экрана >=768)
      $('#myContainer').mosaicflow({
        itemSelector: '.mosaicflow__item',
        minItemWidth: 300
      });
    }
  });
});
</script>
P.S. Для проверки в браузере необходимо сначала уменьшить размер окна, т.к. инициализация происходит всего один раз.
Аноним
Аноним
Спасибо большое за ответ! Все заработало! :)
Аноним
Аноним
Я заметил что если заходить по якорям через url например site.ru#rewiews, то те якоря которые находятся выше блока работ мозайки они нормально останавливаются, а те якоря которые находятся ниже блока работ с мозайкой, они на секунду останавливаются правильно, а потом резко в низ страницы скролят, может быть кто знает изза чего? и как это исправить
Ахмет Шабакаев
Ахмет Шабакаев
Александр, доброго времени суток.
А как в мозайке нормальное отображение сделать. что бы картинки полноценно отображались. и при этом не было пробела?

<img
src=«https://itchief.ru/assets/uploadify/2/f/6/2f69b3d68f5248eefaaeccbf5b649e4ds.jpg» class=«fancybox thumbnail center»>


<img
src=«https://itchief.ru/assets/uploadify/4/6/7/467dafda2989f5a54e50d4a8f3d8d656s.jpg» class=«fancybox thumbnail center»>
Александр Мальцев
Александр Мальцев
Здравствуйте! Пример желательно предоставить в какой-нибудь песочнице (jsbin.com, jsfiddle.net).
Ахмет Шабакаев
Ахмет Шабакаев
А если дам ссылку на сам сайт? mebel-pvs.ru
Александр Мальцев
Александр Мальцев
Не знаю откуда у вас такое пустое место. Попробовал в разных браузерах, нормально отображается. Там часть места используется для полосы прокрутки. Так-то пробелы есть, но они не настолько большие как у вас. Но это так работает библиотека fancybox, на их сайте они также выводятся.
Попробуйте отключить все расширения у браузера, так как есть такие, которые могут изменять страницу. После этого посмотрите, как ваша страница выглядит. Также попробуйте обновить страницу с помощью Ctrl+F5.
Ахмет Шабакаев
Ахмет Шабакаев
Да, я уже исключил расширения браузера — открываю в коне инкогнито. А отображение такое (в первом скрине) в мобильном варианте. Смысл был в чем — в мозайке отображается без проблем уменьшенные копии картинок, но они внутри помещаются не полностью в своих рамках, если редактировать CSS — .fancybox-thumbs__list a {max-width: calc(80% — 10px); (при 100% картинка в полную ширину, но содержание картинки тоже увеличивается выходя за рамки своего контейнера). Я попробовал заменить max-width, на min-width, все стало как надо.
Ахмет Шабакаев
Ахмет Шабакаев
Хотя нет, поспешил с выводами.
Александр Мальцев
Александр Мальцев
Зачем переопределяете классы fancybox? Если вы думаете, что есть какие-то ошибке в компоненте, то лучше напишите об этом в issues на github.
Попробуйте удалить из «style.css» это, а также другие похожие стили, с помощью которых вы переопределяете стили fancybox:
@media (max-width: 360px)
  .fancybox-thumbs__list a {
    max-width: calc(100% - 10px);
  }
}
Аноним
Аноним
… не, автор извини… косяк со смещенимем у меня кажись!
Аноним
Аноним
После включения галереи / первый пример / контейнер сползает вправо пикселей на 10 где то…
Когда выклюается галерея все наза возвращается. Ошибок конечно на страничке нет вообще.
— То есть, галерея внедряется в твиттер бутсрап собна и такое вот происходит. Лазить и искать неохота из за чего это происходит, может втор нает и сталкивался…

Кстати, у кого не работает галерея и одна и вторая, а именно просто совершается переход по ссылке на сам оригинал картинки. То тут происхдит следующее:

Тут тема о твиттер бустрап, и конечно у всех УЖЕ подключен аякс, если коротко — надо оего отключать именно для той страницы где находится галерея, видно скрипт свой аякс использует где то далее…

Или, надо ковырять саму галерею и искать где там внутри покдлючение и выключит подключения аякса!
Аноним
Аноним
Здравствуйте как сделать галерею изображени такого типа Test Folder 1 но чтобы маленькие картинки выводились в низу?
Аноним
Аноним
про меня забыли?
Александр Мальцев
Александр Мальцев
Да, действительно забыл.
Можно, например, начать делать так:
Пример галереи изображений на Bootstrap
<div class="container-fluid"> 
  <div class="row">
    <!-- Изображение -->
    <div class="col-xs-12" style="margin-bottom: 20px;">
      <img id="preview" class="img-responsive img-rounded center-block " src="img/image01.jpg">
    </div>
  </div>
  <div id="thumb" class="row"> 
    <!-- Миниатюры изображений -->
    <div class="col-md-2 col-sm-3 col-xs-4"> 
      <img class="img-responsive img-thumbnail" src="img/image01.jpg"> 
    </div> 
    <div class="col-md-2 col-sm-3 col-xs-4"> 
      <img class="img-responsive img-thumbnail" src="img/image02.jpg"> 
    </div> 
    <!--...-->
  </div> 
</div> 
CSS:
#thumb>div {
  padding-left: 3px;
  padding-right: 3px;
}
img:hover {
  cursor: pointer;
}
/* изменяем рамку активного изображения */
img.active {
  border: 1px solid #000;
}
JavaScript:
//при нажатии на миниатюру
$('#thumb img').click(function(){
  //удаляем класс active с другой миниатюры
  $('#thumb img').removeClass("active");
  //добавляем класс active к миниатюре на которую мы нажали
  $(this).addClass("active");
  //получаем у неё значение атрибута src и присваиваем его атрибуту src с id="preview"
  $("#preview").attr("src",$(this).attr("src"));
});
Аноним
Аноним
Спасибо!
Аноним
Аноним
подскажите пожалуйста, как мне добавить стрелочки перелистывания где распологаются маленькие картинки в галерее если кртинок много
Александр Мальцев
Александр Мальцев
Добавить кнопки:
<button id="left"><-</button>
<button id="right">-></button>
Добавить скрипт (например, с помощью скрытия и отображения элементов).
Код JavaScript:
$(function(){
function thumb() {
  $('#thumb img:first').addClass("active");
  var images = [];
  var countImages = $('#thumb img').length-1;
  var countShow = 3;
  var windowWidth = window.innerWidth;
  if (windowWidth>=768 && windowWidth<992) {
    countShow = 4;
  } else if (window.innerWidth >= 992 && windowWidth<1200) {
    countShow = 6;
  } else if (window.innerWidth >= 1200) {
    countShow = 6;
  }
  console.log(countImages);
  $("#thumb img").each(function( index ) {
    $(this).data('index',index);
    if ($(this).data('index') >= countShow) {
      $(this).hide();
    }
    images[index] = this;
  });
  $('#left,#right').click(function(event){
    event.stopPropagation();
    if ($(this).attr('id')=='left') {
      var currentIndex = $("#thumb img.active").data('index');
      if (currentIndex > 0) {
        $("#thumb img.active").removeClass('active');
        $(images[currentIndex-1]).addClass('active');    
        $("#preview").attr("src",$(images[currentIndex-1]).attr("src"));
        var firstVisible = $('#thumb img:visible').filter(':first').data('index');
        var currentVisible = $('#thumb img.active').data('index');
        if (firstVisible==currentVisible) {
          if (firstVisible<=0) {return;}
          $('#thumb img:visible').filter(':last').parent().hide();
          $(images[currentVisible-1]).parent().show();    
          $(images[currentVisible-1]).show();
        }    
      }
    }
    if ($(this).attr('id')=='right') {
      var currentIndex = $("#thumb img.active").data('index');
      if (currentIndex < countImages) {
        $("#thumb img.active").removeClass('active');
        $(images[currentIndex+1]).addClass('active');    
        $("#preview").attr("src",$(images[currentIndex+1]).attr("src"));
        var lastVisible = $('#thumb img:visible').filter(':last').data('index');
        var currentVisible = $('#thumb img.active').data('index');
        if (lastVisible==currentVisible) {
          if (lastVisible>=countImages) {return;}
          $('#thumb img:visible').filter(':first').parent().hide();
          $(images[currentVisible+1]).parent().show();    
          $(images[currentVisible+1]).show();
        }
      }
    }
  });

  //при нажатии на миниатюру
  $('#thumb img').click(function(){
    //удаляем класс active с другой миниатюры
    $('#thumb img').removeClass("active");
    //добавляем класс active к миниатюре на которую мы нажали
    $(this).addClass("active");
    var firstVisible = $('#thumb img:visible').filter(':first').data('index');
    var currentVisible = $('#thumb img.active').data('index');
    //получаем у неё значение атрибута src и присваиваем его атрибуту src с id="preview"
    $("#preview").attr("src",$(this).attr("src"));    
    if (firstVisible==currentVisible) {
      if (firstVisible<=0) {return;}
      $('#thumb img:visible').filter(':last').parent().hide();
      $(images[currentVisible-1]).parent().show();    
      $(images[currentVisible-1]).fadeIn('1000');
    }    
    var lastVisible = $('#thumb img:visible').filter(':last').data('index');
    var currentVisible = $('#thumb img.active').data('index');
    if (lastVisible==currentVisible) {
      if (lastVisible>=countImages) {return;}
      $('#thumb img:visible').filter(':first').parent().hide();
      $(images[currentVisible+1]).parent().show();    
      $(images[currentVisible+1]).fadeIn('1000');
    }
  });
};
thumb();
});

Конечно это начальный набросок :) При желании его можно структурировать с помощью функций.
Аноним
Аноним
Привет! А куда эти кнопки размещать что бы миниатюры прокручивались и можно ли сделать что бы на большой фотке тоже прокрутка была и как надписи добавить под фотами с описанием не большим? Спасибо за ответ!!!
Александр Мальцев
Александр Мальцев
Привет! С помощью CSS в любое необходимое место. Их (кнопки) можно сделать картинками или в формате шрифта, т.е. как угодно. Насчёт дальнейшего развития не знаю насколько это актуально и нужно ли вообще это делать, т.к. различных готовых галерей много и из них можно выбрать что-то по своему вкусу. Если необходимо именна эта галерея, то напиши добавлю.
Аноним
Аноним
Да, интересная галерея на сайт идеально встало, было бы круто если бы стрелки обтекали большое фото с лева и право и ими можно было было листать фотки. А ещё хотел спросить как лайки там привязать к каждому фото, может ссылка есть где уже обсуждали это. Но это второй вопрос)) СпасибО!!!
Аноним
Аноним
Галерея изображений на основе плагина Mosaic Flow

как сделать так чтобы галерея fancybox-a прокручивалась после этого горизонтально а не вертикально?
Александр Мальцев
Александр Мальцев
Использовать любой плагин карусели.
Например OWL Carousel.
Аноним
Аноним
Огромная благодарность! Великолепный сайт, есть все что нужно.
Аноним
Аноним
Спасибо большое Александр! Все подключил — то, что нужно)))
Аноним
Аноним
Добрый день!
подскажите, как сделать галерею такого типа?
pp.vk.me/c622230/v622230581/4dea5/1RG9-MHTzgQ.jpg
или может подскажете другой плагин?.. спасибо!
Александр Мальцев
Александр Мальцев
Добрый день, Юлия!
Если Вам нужна такая сетка, то её можно создать с помощью Twitter Bootstrap таким образом:
<div class="container-fluid">
  <div class="row"> 
    <div class="col-xs-3">
      <img src="" alt=""> 
    </div>
    <div class="col-xs-3">
      <img src="" alt=""> 
    </div>
    <div class="col-xs-3">
      <img src="" alt="">  
    </div>
    <div class="col-xs-3">
      <img src="" alt=""> 
    </div>
  </div>
  <div class="row"> 
    <div class="col-xs-6">
      <div class="row"> 
        <div class="col-xs-12">
          <img src="" alt=""> 
        </div>
        <div class="col-xs-6">
          <img src="" alt=""> 
        </div>
        <div class="col-xs-6">
          <img src="" alt=""> 
        </div>
      </div>  
    </div>
    <div class="col-xs-3">
      <img src="" alt=""> 
    </div>
    <div class="col-xs-3">
      <div class="row"> 
        <div class="col-xs-12">
          <img src="" alt=""> 
        </div>
        <div class="col-xs-12">
          <img src="" alt=""> 
        </div>
      </div> 
    </div>
  </div>
</div>
Далее Вам необходимо рассчитывать или подбирать изображения, чтобы она выглядела следующим образом.
Аноним
Аноним
добрый день, Александр! Спасибо за вариант решения. Через bootstrap пробовала с самого начала. Как результат — расползаются «плитки» после вертикальной картинки. В вашем варианте у меня почему-то тоже после вертикального блока остальные плитки также «живут своей жизнью»…
Пока ждала от вас решения или идеи — переделала Mosaic. Поставила все на свои места. Спасибо за замечательный урок! Для новичка он бесценен! :)
Аноним
Аноним
Еще интересует, как добавить нумерацию слайдов, но не вручную из title, а автоматически?
Александр Мальцев
Александр Мальцев
Можно сделать следующим образом:

<script> 
  $(document).ready(function() { 
    $("a.fancyimage").fancybox({
      prevEffect: 'none',
      nextEffect: 'none',
      title : {
        type : 'float' // 'float', 'inside', 'outside' or 'over'
      },
      beforeShow : function() {
        this.title = 'Изображение ' + (this.index + 1) + ' из ' + this.group.length;
      }
    }); 
  });
</script> 
Аноним
Аноним
Здравствуйте.
Подключил, все работает.
Но, вот такой вопрос, как сделать чтоб во время перелистывания, картинка оставалась на месте, а не дергалась в сторону, как здесь fancybox.net/ (третий пример)?
Спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте.
В этой статье используется fancyBox 2, а по приведённой в Вашем комментарии ссылке fancyBox1.

Чтобы это сделать в fancyBox 2 достаточно изменить скрипт, т.е. добавить параметры:
<script type="text/javascript"> 
  $(document).ready(function() { 
    $("a.fancyimage").fancybox({
      prevEffect: 'none',
      nextEffect: 'none'
    }); 
  }); 
</script> 
Аноним
Аноним
Все супер!
Но при нажатии на картинку — модальное окно подпрыгивает вверх.(((
Как исправить?
Александр Мальцев
Александр Мальцев
Проверить стили CSS.
Аноним
Аноним
Да, нет такой настройки в скрипте, в том то и дело. Я с первого раза и не понял, что галерея переключается с одной картинки на другую. Так-же и другие могут не понять.
Все сделал как у вас — работает. А так вроде норм. галерея.
Спасибо большое.
Аноним
Аноним
Здравствуйте. Нашел галерею, на мой взгляд лучше, чем fancybox, в настройках скрипта разобрался, но там скроллбар показывается только после клика на картинку, а желательно появление стрелок навигации сразу после открытия лайтбокса. Никак не могу сообразить.
Извините, не могли бы вы посмотреть? Для вас, уверен, это дело 5-ти минут.
Если что вот галерея: Lightbox image gallery — третяя сверху.

blueimp.github.io/Gallery/

Я ссылку без http:// поставил.
Александр Мальцев
Александр Мальцев
Привет, Егор!

Нужного параметра для управления видимостью кнопок управления галереи bluimp не нашёл.

Предлагаю такое решения

1. Добавить класс blueimp-gallery-controls, отвечающий за отображение кнопок управления
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
2. Ну и убрать его в параметрах (controlsClass: ''), чтобы он не переключался:
<script>
  document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event, controlsClass: ''},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
  };
</script>
Аноним
Аноним
Спасибо! Воспользовался галереей на основе сетки Twitter Bootstrap 3 — все работает.
Аноним
Аноним
Добрый день.
Пытаюсь сделать галерею на основе плагина Mosaic Flow.
Галерея работает. Фото размещаются автоматически (это очень удобно).
НО если необходимо изменить кол-во фото в строке — как это сделать?
((( у меня элементарно «разбежалась» шапка сайта (она сделана из двух частей. Статическая и динамическая) и есть сдвиг всего экрана (((
А галерея очень понравилась.

Аноним
Аноним
)))) пришлось отказаться от «меню» с левой стороны сайта.
Сделала верхнее (ниспадающее в отдельных частях).
Все работает ))))
Александр Мальцев
Александр Мальцев
Добрый день.
Настройка ширины осуществляется с помощью data-атрибута data-min-item-width. По умолчанию данный атрибут имеет значение 240. Если Вы хотите больше столбцов, то уменьшайте это значение. А если Вы хотите меньше столбцов, то увеличивайте данное значение.
<div class="clearfix mosaicflow" data-min-item-width="350"> 
<!--...-->
Аноним
Аноним
а что сделать, чтоб после плагина Mosaic Flow, слайды fancybox-а последовательно по горизонтали показывали.
целый день не смог разобраться.
Александр Мальцев
Александр Мальцев
Например, использовать карусель OWL Carousel.
Аноним
Аноним
это совсем не то решение.
надо чтоб fancybox показывал в таком порядке рисунки.
Скриншот
Александр Мальцев
Александр Мальцев
fancybox не будет показывать рисунки в таком порядке. Это происходит из-за того, что после применения плагина mosaiс flow изменяется разметка блока с изображениями, изображения выстраиваются (т.е. вкладываются) в вертикальные колонки (блоки).
Плагин fancybox в этом случае будет сначала проходит по картинкам внутри первого блока (т.е. 1->5->9), потом по картинкам находящимся внутри 2 блока (т.е. 2->6->10). Т.е. цепочка будет такая 1->5->9->2->6->10->3->7->11 и т.д.
Плагин fancybox не имеет встроенных средств, с помощью которых можно было организовать порядок так как Вы хотите… Он сменяет изображения в соответствии с тем как они расположены в коде. А в этом случае (ещё раз повторюсь) порядок следования элементов меняется после того, как мы применили плагин mosaic flow (изменяется разметка и появляются дополнительные блоки, которые группируют изображения по вертикали).

Выходом из этой ситуации может использование плагина, аналогичного fancybox, но имеющего встроенные средства для ручной сортировки.
Или, написание своего просмотрщика изображений с использованием модального окна Bootstrap.
Аноним
Аноним
Здравствуйте.
Поставил скрипт, но он, к сожалению, не работает. Браузер пишет мне следующее:
Uncaught TypeError: $(...).fancybox is not a function
Что с этим можно сделать, подскажите, пожалуйста?
Ничего не менял, пробовал всё так, как написано в первом примере: «Галерея изображений на основе сетки Twitter Bootstrap 3».
Александр Мальцев
Александр Мальцев
Здравствуйте, Андрей.
У Вас не подключена библиотека jQuery.
Её можно подключить с помощью CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Посмотреть какие у Вас библиотеки на странице не загружены можно в консоли браузера с помощью клавиши F12.
Аноним
Аноним
А где именно в шаблоне Joomla 3 это нужно прописать? Я так понимаю в index.php, но вот где именно?
Александр Мальцев
Александр Мальцев
В разделе head или лучше перед тем где используется другие библиотеки или скрипты, зависящие от него.
Аноним
Аноним
Просто — супер! Отличный сайт!
)
Было б не плохо, если разработчики модальный просмотр галерей вшили во фреймворк изначально. Чтоб не лепить сторонние решения…
Аноним
Аноним
Появляется ошибка Uncaught TypeError: undefined is not a function на инициализации
<script type="text/javascript"> 
  $(document).ready(function() { 
    $("a.fancyimage").fancybox(); 
  }); 
</script>
. Все подключил, проверил. В чем может быть причина? Использую шаблон T3 blank Bootsrap 3
Аноним
Аноним
Спасибо, методом тыка разобрался. Инициализацию функции в этом шаблоне на Joomla 3 необходимо производить с помощью кода
<script type="text/javascript"> 
jQuery(document).ready(function(){jQuery("a.fancyimage").fancybox();});
</script>
Аноним
Аноним
А у меня другая ошибка: jQuery(...).tooltip is not a function
Александр Мальцев
Александр Мальцев
Не подключен bootstrap.js.
Аноним
Аноним
А как добавить подпись к фотографии? Когда она в увеличенном виде?

Спасибо.
Александр Мальцев
Александр Мальцев
Добрый день!
1. Необходимо добавить к ссылкам атрибут title=«Подпись к фотографии»
<a class="fancyimage" rel="group" title="Подпись к фотографии" href="bootstrap3-image-gallery-600-400/001.jpg"> 
  <img class="img-responsive" src="bootstrap3-image-gallery-600-400/001.jpg" /> 
</a>
2. При необходимо настроить расположение надписи в javascript:
$(document).ready(function() { 
  $("a.fancyimage").fancybox({
    helpers:  {
      title : {
        type : 'over'  // 'float', 'inside', 'outside' or 'over'
      }
    }
  }); 
}); 
Аноним
Аноним
Спасибо!
Аноним
Аноним
Да, это не замечание, просто столкнулся с надобностью такой галереи. А по мне так Mosaic Flow больше нравится.
Аноним
Аноним
Здравствуйте, все хорошо, только вам надо исправить этот код. Код получается невалидным из-за
rel="group"
, такого атрибута нет у тега
<a>
. Вместо него поставьте
rel="next"
и все будет работать и валидатор будет доволен. В скриптах ничего править не надо. Все работает, проверял.
Александр Мальцев
Александр Мальцев
Спасибо за замечание, Егор.

Но тогда лучше атрибут rel вообще удалить и вместо него использовать атрибут data-*:
data-fancybox-group="group"
Аноним
Аноним
изображения открываются в новом окне… что делать?
Александр Мальцев
Александр Мальцев
Добрый день, Тимур!
Вам необходимо проверить все ли скрипты на странице загружены.
Самый простой способ это сделать — нажать в браузере клавишу F12 и посмотреть ошибки.
Аноним
Аноним
А как можно создать слайдер
Который на фото выводит точки и при клике на них раскрывается содержимое
joxi.ru/xAeGKGGCZQPgmy
Александр Мальцев
Александр Мальцев
Для решения этой задачи необходимо выполнить следующее:
Создать для необходимых картинок карту изображений, используя тег map. Внутри тега map создать активные области с помощью элемента area. Для тега area создать ссылки, при нажатии на которые пользователь будет переходить по определённому адресу или используйте JavaScript для выполнения каких-то других действий. Если необходимо подсвечивать области (плюсики) при наведении, то можно воспользоваться библиотекой от David Lynch, которую можно скачать по ссылке.
Если изображения должны быть адаптивными, то Вам необходимо создать адаптивную карту. Для этого необходимо будет воспользоваться каким-то плагином, который будет пересчитывать координаты area. Например, можно воспользоваться плагином «Responsive Image Maps jQuery Plugin», который можно скачать по этой ссылке.

Также в зависимости от поставленной задачи можно решить данную задачу и другими способами. Например, при помощи слоёв (изображение на одном слое, активные элементы на другом) или при помощи background и position (картинку на заднем фоне, а активные элементы на переднем фоне).
Аноним
Аноним
Cпасибо Вам большое!!!