Страница 1 из 212»
Форум про uCoz » Создание сайта на uCoz » Другие скрипты для uCoz » Похожие материалы для uCoz (Вариант для вида похожих материалов)
Похожие материалы для uCoz
Angerfist
Дата: Понедельник, 21.11.2016, 13:28 | Сообщение # 1
Vip
Сообщений:759
Награды: 21


Залил код для пользователя Rinat1990, в материале по Похожим материалам для uCoz был запрос на мобильную адптацию.

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

Сразу скажу что предлагаю выводить чётное число похожих материалов, так как подразумеваем адаптивность и при уменьшении экрана всё же надо учитывать смотрибельность и читабельность, применяя медиа запрос на этапе к примеру с 480px будем делать не 4 колонки (2 строки), а две (с нечётным показателем в 10 материалов, ясно что будет оставаться пустая позиция справа).

На странице материала и комментариев выводим например:
Код

<p style="text-transform: uppercase;">Похожие материалы: </p>
<p><?if($RELATED_ENTRIES$(8))?><?$RELATED_ENTRIES$(8)?><?else?>Похожие материалы не найдены.<?endif?></p>
<div class="clear"></div>


Сразу обращаю внимание на
Код
<div class="clear"></div>
, этим мы убираем обтекание, (почему так, в основе многих шаблонов уже есть прописанный этот параметр и точно также или же class="clr", поэтому можно не писать лишний раз правила синтаксиса, если же нет, то читаем тут Сlear.)

Далее в вид похожих материалов лепим
Код

<div class="relatedentry">
<div class="relatedentry-img" style="background-image: url('$IMG_URL$');">
<div class="relatedentry-title"><a href="$ENTRY_URL$" title="Перейти к просмотру">
<span class="style-relatedentry">$TITLE$</span></a>
</div></div></div>


Ну и кратко оформляем это безобразие
Код

.relatedentry {
width: 24%;
float: left;
margin: 0.5%;
}
.relatedentry-img {
opacity: 0.85;
display: block;
position: relative;
padding-bottom: 125%;
overflow: hidden;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
box-shadow: inset 0 1px 2px 2px #000;
-webkit-box-shadow: inset 0 1px 2px 2px #000;
-moz-box-shadow: inset 0 1px 2px 2px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.relatedentry-img:hover {
opacity: 1;
}
.relatedentry-title {
z-index:1;
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 4px;
background: rgba(0,0,0,0.85);
height: 22px;
overflow: hidden;
}
.style-relatedentry {
font-family: Impact;
font-size: 14px;
color: #CCCCCC;
text-transform: uppercase;
margin: 2px 2px 6px 4px;
}


В принципе закончили, но добьём стиль медиа запросом, добавим внизу к стилям ещё параметр
Код

@media all and (max-width:480px) {
.relatedentry {width:49%; float:left; margin: 0.5%;}
}

Ведь для смартфонов думаю будет лучше всё таки две колонки, если всё равно мелковато то можно
уменьшить запрос с 620px. "Вообщем типа того и всё такое..." -Beavis & Butthead-

Прикрепления: 6322920.jpg(83Kb) · 5826940.jpg(60Kb)


No regrets

Сообщение отредактировал Angerfist - Понедельник, 21.11.2016, 13:50
Rinat1990
Дата: Понедельник, 21.11.2016, 14:27 | Сообщение # 2
Пользователи
Сообщений:64
Награды: 0


Огромное спасибо! Добрейшей души человек!
Вот что получилось! И прекрасно адаптация работает!

Прикрепления: 2163602.jpg(108Kb)


Сообщение отредактировал Rinat1990 - Понедельник, 21.11.2016, 14:37
Angerfist
Дата: Понедельник, 21.11.2016, 14:44 | Сообщение # 3
Vip
Сообщений:759
Награды: 21


Rinat1990, судя по скрину немного не ровно название материала, советую поиграться с отступами тут
Код

.style-relatedentry {
font-family: Impact;
font-size: 14px;
color: #CCCCCC;
text-transform: uppercase;
margin: 2px 2px 6px 4px;

А именно margin, можно одним значением сделать отступ со всех краёв, либо двумя тремя значениями, тут же я 4 значения применил под тестовым шаблоном (где вышло с этими параметрами ровно) и имел ввиду 1-ое отступ 2px сверху 2-ое 2px справа 3-ее снизу и 4-ое слева.


No regrets
Angerfist
Дата: Понедельник, 21.11.2016, 15:21 | Сообщение # 4
Vip
Сообщений:759
Награды: 21


Дополню пример, убираем обтекание прописав в каскадной таблице общие значения:

Код

html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0}


и уже после этого конструкция

Код
<div class="clear"></div>
заработает.


No regrets
Angerfist
Дата: Понедельник, 21.11.2016, 15:27 | Сообщение # 5
Vip
Сообщений:759
Награды: 21


И ещё, всё же советую прочитать пост пользователя SAM ТУТ по поводу
исходного содержимого строки списка, и окружающей "требухи" маркированного списка...
Хотя честно сам признаюсь и каюсь на тестовом шаблоне я не обрезал обёртку функцией substr, глядя по исходнику там нужно вырезать примерно это
Код

<ul class="uRelatedEntries">
Тут конструкция вида материалов в этой самой обёртке
</ul>


No regrets

Сообщение отредактировал Angerfist - Понедельник, 21.11.2016, 15:47
Kosten
Дата: Понедельник, 21.11.2016, 20:04 | Сообщение # 6
Администраторы
Сообщений:14284
Награды: 47


Убрал, так как нужно теги переписывать, время отвести, да переписать, а так здраво все показывает.
ucozmental
Дата: Вторник, 22.11.2016, 03:06 | Сообщение # 7
Пользователи
Сообщений:104
Награды: 0


Не все так просто, вот почему на блоге ucoz сразу не напишут, как что работает и можно сделать, а просто, мы создали обновление, радуйтесь.
Kosten
Дата: Вторник, 22.11.2016, 03:10 | Сообщение # 8
Администраторы
Сообщений:14284
Награды: 47


Цитата ucozmental ()
Не все так просто, вот почему на блоге ucoz сразу не напишут, как что работает и можно сделать, а просто, мы создали обновление, радуйтесь.

За такие деньги, они вообще должны скрипты писать, а они их продают. 11a
Yan4953
Дата: Суббота, 15.04.2017, 00:06 | Сообщение # 9
Пользователи
Сообщений:4
Награды: 0


Всё работает, всё классно спасибо, давно искал такое! Скажите как сделать, что-бы при нажатие на картинку тоже появлялось название, и можно было перейти на страницу материала по клику! Заранее большое спасибо!
Kosten
Дата: Суббота, 15.04.2017, 00:24 | Сообщение # 10
Администраторы
Сообщений:14284
Награды: 47


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

За оператором изображение ставим:

Код
title="$TITLE$"
Yan4953
Дата: Суббота, 15.04.2017, 00:39 | Сообщение # 11
Пользователи
Сообщений:4
Награды: 0


Цитата Kosten ()
Yan4953, по клику должно так и работать, чтоб могли перейти, так как для этого сделали, а чтоб при наведение появлялось название, то нужно добавить title.

За оператором изображение ставим:


Он работает по клику только на тексте а мне надо что-бы еще и по клику на картинку переходил!
Kosten
Дата: Суббота, 15.04.2017, 00:51 | Сообщение # 12
Администраторы
Сообщений:14284
Награды: 47


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

Код
<div class="h_mtr_image"> <div class="h_mtr_image_over" style="position: relative;"><?if($IMG_URL1$)?><a href="$IMG_URL1$" class="ulightbox" target="_blank"><img src="$IMG_URL1$" alt="$TITLE$"></a><?else?><img src="http://zornet.ru/Fresa/AB/net_foto-min.png" alt="$TITLE$"><?endif?></div
Yan4953
Дата: Суббота, 15.04.2017, 22:33 | Сообщение # 13
Пользователи
Сообщений:4
Награды: 0


Цитата Kosten ()
Yan4953, если не ошибаюсь, то так поставить и посмотреть, вот с вид материала, где по клику на изображение происходит переход, нужно вытащить и поставить.

Код: выделить всё
<div class="h_mtr_image"> <div class="h_mtr_image_over" style="position: relative;"><?if($IMG_URL1$)?><a href="$IMG_URL1$" class="ulightbox" target="_blank"><img src="$IMG_URL1$" alt="$TITLE$"></a><?else?><img src="http://zornet.ru/Fresa/AB/net_foto-min.png" alt="$TITLE$"><?endif?></div

Спасибо,но что-то не помогло!
вот мой код,куда мне поставить что-бы при клики на картинку переходил?!
Код
<div class="relatedentry">
<div class="relatedentry-img" title="$TITLE$" style="background-image: url('$IMG_URL$');">
<div class="relatedentry-title"><a href="$ENTRY_URL$" title="Смотреть $TITLE$ онлайн">
<span class="style-relatedentry">$TITLE$</span></a>
</div></div></div>
Kosten
Дата: Суббота, 15.04.2017, 22:51 | Сообщение # 14
Администраторы
Сообщений:14284
Награды: 47


Yan4953, вид материалов и комментариев к нему, попробуйте так, хотя возможно через информер, но за него Angerfist, не чего не писал.
Yan4953
Дата: Суббота, 15.04.2017, 23:07 | Сообщение # 15
Пользователи
Сообщений:4
Награды: 0


Цитата Kosten ()
Yan4953, вид материалов и комментариев к нему, попробуйте так, хотя возможно через информер, но за него Angerfist, не чего не писал.

Попробую,спасибо!
Форум про uCoz » Создание сайта на uCoz » Другие скрипты для uCoz » Похожие материалы для uCoz (Вариант для вида похожих материалов)
Страница 1 из 212»
Поиск: