Галерея с полным заполнением.

  • 15 Ответов
  • 322 Просмотров

ArhangelXD

  • Сообщений: 29
  • Отаку
    • Просмотр профиля
    • AnimeGIF.ru
Галерея с полным заполнением.
« : 18 Ноября 2018, 00:23:20 »
Всем привет.
Проблема следующая:
На нашем движке DANNEO галерея(стандартный мод photos) выглядит вот так
[/spoiler]


1.Изображения выводятся в таблицей и высота каждой строки равна высоте самого высокого изображения, а пустующее место забивается пустотой или рамкой.

Как  сделать чтобы выводилось не в таблицу а друг за другом а картинка следующей строки была под картинкой первой строки уже без промежутков.
(иначе говоря заданное количество столбцов и в столбцах картинки идут другзадругом)
Примеры:





Как так сделать нашел несколько кодов в интернете возможно смогу с их помощью сделать, но куда их пихнуть в коде КМС не пойму.

пожалуйста хотя-бы тыкните где сайт выводит картинки таблицей.

p/s былобы круто если-бы картинки  подгружались по мере опускания скрола(ползунка)


2.Если картинка узкая то дату и меню с *лайками* утаскивает наверх.
Как сделать так чтобы она была строго снизу?
« Последнее редактирование: 18 Ноября 2018, 00:45:04 от ArhangelXD »
animegif.ru сайт где вы найдете Anime GIF и MEMES на любой случай в жизни!

User

  • Сообщений: 31
    • Просмотр профиля
Re: Галерея с полным заполнением.
« Ответ #1 : 24 Ноября 2018, 06:04:00 »
Эххх. Я просто кипятком ссусь от вида чужой заполненной картинками галереи...  :(

gamma

  • Сообщений: 94
  • люблю музон
    • Просмотр профиля
    • Полный доступ
Re: Галерея с полным заполнением.
« Ответ #2 : 24 Ноября 2018, 17:40:25 »
Не надо ничего отключать для вывода фото не в табличном виде, просто в настройках галереи выставьте выводить в 1 столбик. А потом можно делать какой угодно вывод используя css
Для вывода фоток как Вы захотите на главной галереи редактируете файлы оформления мода photos в стандартном виде это template/Lite/mod/photos/thumb.tpl
К примеру нужно выводить фото по 4 в ряд. Открываем в Notepad++ файл и всё его содержимое заключаем в div которому присваиваем какой нибудь класс, например <div class="fotochki"></div>
Получится следующее
<div class="fotochki">
<!--buffer:author:0--> &nbsp; <span class="author" title="{langauthor}">{langauthor}:</span> {author}<!--buffer-->
<figure class="media">
<a href="{url}">
<img src="{site_url}/{thumb}" alt="{alt}" />
<!--if:title:yes--><h4>{title}</h4><!--if-->
<!--if:date:yes--><time datetime="{date:datetime}">{date:1}</time><!--if-->
<aside>
<div class="media-info">
<!--if:rating:yes--><span class="rating" title="{titlerate}">{langrate}:</span>{rating} &nbsp; <!--if-->
<!--if:comment:yes--><span class="com" title="{comment}">{comment}:</span>{count} &nbsp; <!--if-->
<!--if:info:yes--><span class="hits" title="{langhits}">{langhits}:</span>{hits}<!--if-->
{author}
</div>
</aside>
</a>
</figure>
</div>
Открываем файл который отвечает у нас за оформление - template/Lite/css/screen.css и в самом низу добавляем наш стиль оформления
.fotochki {display:inline-block;width:24%;}
Мы указали что каждая фотка будет выводится размером по горизонтали 24% от общей ширины, таким образом фотки будут выводится по 4 штуки в ряд без табличной вёрстки.
Если захотите добавить всякие другие эффекты с выводом и подгрузкой - изучайте css3 и сможете выводить фото как Ваша душа пожелает. Плюс сделать вывод адаптивным, при уменшении размера экрана выводить по 3 по 2 и по 1 фотке(это уже для мобил с экраном 320пиксел) если знаете что такое медиа запросы в css типа
@media screen and (max-width: 320px) {
.fotochki {width:100%;}
}
Кстати я где то видел код для вывода фоток как в Вашем примере, поиск Вам в руки!
Свободный фрилансер. 90% сайтов которые с успехом сдал под ключ на Даннео.

ArhangelXD

  • Сообщений: 29
  • Отаку
    • Просмотр профиля
    • AnimeGIF.ru
Re: Галерея с полным заполнением.
« Ответ #3 : 25 Ноября 2018, 01:09:14 »
Не надо ничего отключать для вывода фото не в табличном виде, просто в настройках галереи выставьте выводить в 1 столбик.
Вот спасибо сам почему-то вообще не додумался хотя вроде и просто...
слишком сложно на данной CMS сделано... можно менять только значение % а там меняет уйму чего непонято зачем...
.fotochki {display:inline-block;width:24%;}
Побаловался многими свойствами CSS сделать так чтобы пробелов не было не вышло.
как я понял это из-за особенностей html/php и чтобы пробелов не было нужно использовать  javascript.
Есть готовые плагины/шаблоны https://postovoy.net/17.html
Но к чему и как их подключать немного не ясно.

Вот я и спрашиваю где в php коде выводятся блоки с изображениями чтобы к ним как-то прикрепить эти плагины/шаблоны
в mod/photos/index.php для меня много не неясностей... много раз запрашивает одну и туже информацию из бд....
« Последнее редактирование: 25 Ноября 2018, 01:38:18 от ArhangelXD »
animegif.ru сайт где вы найдете Anime GIF и MEMES на любой случай в жизни!

Alex433

  • Сообщений: 31
    • Просмотр профиля
Re: Галерея с полным заполнением.
« Ответ #4 : 25 Ноября 2018, 22:13:32 »
Вот я и спрашиваю где в php коде выводятся блоки с изображениями чтобы к ним как-то прикрепить эти плагины/шаблоны
в mod/photos/index.php для меня много не неясностей... много раз запрашивает одну и туже информацию из бд....

причем тут вообще php ? все делается на css и js скачиваешь плагин ,  подключешься в head шаблоне стили и скрипты, открываешь , шаблон фотографий tpl и вставляешь в определнный div ...  ставишь количество колонок , и все , и смотришь что бы css  не конфликтовал!

и это не зависит от danneo и php
« Последнее редактирование: 25 Ноября 2018, 22:16:42 от Alex433 »

ArhangelXD

  • Сообщений: 29
  • Отаку
    • Просмотр профиля
    • AnimeGIF.ru
Re: Галерея с полным заполнением.
« Ответ #5 : 29 Ноября 2018, 14:58:58 »
Вот я и спрашиваю где в php коде выводятся блоки с изображениями чтобы к ним как-то прикрепить эти плагины/шаблоны
в mod/photos/index.php для меня много не неясностей... много раз запрашивает одну и туже информацию из бд....

причем тут вообще php ? все делается на css и js скачиваешь плагин ,  подключешься в head шаблоне стили и скрипты, открываешь , шаблон фотографий tpl и вставляешь в определнный div ...  ставишь количество колонок , и все , и смотришь что бы css  не конфликтовал!

и это не зависит от danneo и php

Дело в том что сайт просто выбрасывает изображения по отдельности в отдельный div без своего отдельного контейнера.
А js плагин необходимо применять именно на контейнер где лежат блоки.
а они лежат в контейнере <div id="center" role="main"> в котором лежит еше много-чего и не ковсему применять данные правила корректно.

Вот я и хочу сделать отдельный контейнер для блоков с картинками.
как я понял нужно создать новый див а в php прописать чтобы эти элименты относились к этому классу.

вот я и спрашиваю где код вывода и как корректно можно реализовать эту задумку...

по сути мне просто нужно корректно подключить js masonry моду фотос.
Вопрос в том как это сделать..

animegif.ru сайт где вы найдете Anime GIF и MEMES на любой случай в жизни!

sovyonok

  • Сообщений: 56
    • Просмотр профиля
    • Прогулки по Москве
Re: Галерея с полным заполнением.
« Ответ #6 : 29 Ноября 2018, 17:12:28 »
Обычно в шаблонах.

/template/temp_name/mod/photos/...

какой-нибудь thumbs.tpl (но это не точно).

Alex433

  • Сообщений: 31
    • Просмотр профиля
Re: Галерея с полным заполнением.
« Ответ #7 : 29 Ноября 2018, 20:17:19 »
Вот я и спрашиваю где в php коде выводятся блоки с изображениями чтобы к ним как-то прикрепить эти плагины/шаблоны
в mod/photos/index.php для меня много не неясностей... много раз запрашивает одну и туже информацию из бд....

причем тут вообще php ? все делается на css и js скачиваешь плагин ,  подключешься в head шаблоне стили и скрипты, открываешь , шаблон фотографий tpl и вставляешь в определнный div ...  ставишь количество колонок , и все , и смотришь что бы css  не конфликтовал!

и это не зависит от danneo и php

Дело в том что сайт просто выбрасывает изображения по отдельности в отдельный div без своего отдельного контейнера.
А js плагин необходимо применять именно на контейнер где лежат блоки.
а они лежат в контейнере <div id="center" role="main"> в котором лежит еше много-чего и не ковсему применять данные правила корректно.

Вот я и хочу сделать отдельный контейнер для блоков с картинками.
как я понял нужно создать новый див а в php прописать чтобы эти элименты относились к этому классу.

вот я и спрашиваю где код вывода и как корректно можно реализовать эту задумку...

по сути мне просто нужно корректно подключить js masonry моду фотос.
Вопрос в том как это сделать..



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

ArhangelXD

  • Сообщений: 29
  • Отаку
    • Просмотр профиля
    • AnimeGIF.ru
Re: Галерея с полным заполнением.
« Ответ #8 : 29 Ноября 2018, 21:30:17 »
плагин найди который хочешь установить,я установлю у себя, и расскажу как сделать!

Все эти плагины как я понял работают на основе JQuery Masonry: https://masonry.desandro.com/
Мне в принципе и нужна эта "кирпичная кладка"

Рабочие прмеры:
https://postovoy.net/17.html  BlocksIt, Pinterest Clone Layout.... их куча...


еше бы хорошо чтобы блоки загружались по мере спускания ползунка
как тут https://tympanus.net/codrops/2014/05/15/recreating-the-design-samsung-grid-loading-effect/



« Последнее редактирование: 29 Ноября 2018, 21:47:15 от ArhangelXD »
animegif.ru сайт где вы найдете Anime GIF и MEMES на любой случай в жизни!

ArhangelXD

  • Сообщений: 29
  • Отаку
    • Просмотр профиля
    • AnimeGIF.ru
Re: Галерея с полным заполнением.
« Ответ #9 : 03 Декабря 2018, 15:57:56 »
плагин найди который хочешь установить,я установлю у себя, и расскажу как сделать!
как успехи?
animegif.ru сайт где вы найдете Anime GIF и MEMES на любой случай в жизни!

Alex433

  • Сообщений: 31
    • Просмотр профиля
Re: Галерея с полным заполнением.
« Ответ #10 : 05 Декабря 2018, 02:39:44 »
плагин найди который хочешь установить,я установлю у себя, и расскажу как сделать!
как успехи?

честно не делал, тупо лень, я свой сайт не могу доделать, не успеваю =) ну я скачал посмотрел просто ради интереса.... в теории, создай блок на главной, фотографий в один столбец, удали стили , загрузи все стили в папки которые скачал, подключи в top.tpl в head .. открой шаблон фотографий \шаблон\мод\фото\thumb.tpl и посмотри как подключен в модуле просто в ставь в те же теги... смотри что бы стили не пересекались удали совпадения body  и тд!! по сути все готово

ArhangelXD

  • Сообщений: 29
  • Отаку
    • Просмотр профиля
    • AnimeGIF.ru
Re: Галерея с полным заполнением.
« Ответ #11 : 06 Декабря 2018, 23:26:02 »
создай блок на главной, фотографий в один столбец

как его сделать и чтобы блоки с картинками именно в него шли?
animegif.ru сайт где вы найдете Anime GIF и MEMES на любой случай в жизни!

Alex433

  • Сообщений: 31
    • Просмотр профиля
Re: Галерея с полным заполнением.
« Ответ #12 : 07 Декабря 2018, 00:12:16 »
создай блок на главной, фотографий в один столбец

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

зайди в фотогалерею создай категорию,  создай блок, укажи из какой категории выводить , убери галки на все ненужное,  автора описание и тд, оставь только заголовок! ну а дальше дело за стилями!

ArhangelXD

  • Сообщений: 29
  • Отаку
    • Просмотр профиля
    • AnimeGIF.ru
Re: Галерея с полным заполнением.
« Ответ #13 : 07 Декабря 2018, 13:16:46 »
зайди в фотогалерею создай категорию,  создай блок, укажи из какой категории выводить , убери галки на все ненужное,  автора описание и тд, оставь только заголовок! ну а дальше дело за стилями!
вы втираете какую-то дичь!
ничего полезного и конкретного.


Может кто-то помочь?
animegif.ru сайт где вы найдете Anime GIF и MEMES на любой случай в жизни!

Alex433

  • Сообщений: 31
    • Просмотр профиля
Re: Галерея с полным заполнением.
« Ответ #14 : 07 Декабря 2018, 13:32:07 »
зайди в фотогалерею создай категорию,  создай блок, укажи из какой категории выводить , убери галки на все ненужное,  автора описание и тд, оставь только заголовок! ну а дальше дело за стилями!
вы втираете какую-то дичь!
ничего полезного и конкретного.


Может кто-то помочь?

Дичь? я тебе уже помог, не в состоянии сделать элементарное? скопировать и вставить =) что же... остается только мышкой за тебя подергать, иди фрилансеров проси , пусть там теперь помогают... а когда в будущем хоть что то начнешь понимать в элементарном css , прочитай эту дичь заново! Удачи!