|
Похожие материалы для uCoz
|
|
Angerfist |
Понедельник, 21 Ноября 2016, 13:28 | Сообщение 1 |
|
Залил код для пользователя 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>
Далее в вид похожих материалов лепим
Код <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-
No regrets
Сообщение отредактировал
Angerfist - Понедельник, 21 Ноября 2016, 13:50 |
| [ RU ] |
|
|
Rinat1990 |
Понедельник, 21 Ноября 2016, 14:27 | Сообщение 2 |
|
Огромное спасибо! Добрейшей души человек!
Вот что получилось! И прекрасно адаптация работает!
Сообщение отредактировал
Rinat1990 - Понедельник, 21 Ноября 2016, 14:37 |
| [ RU ] |
|
|
Angerfist |
Понедельник, 21 Ноября 2016, 14:44 | Сообщение 3 |
|
|
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
|
| [ RU ] |
|
|
Angerfist |
Понедельник, 21 Ноября 2016, 15:21 | Сообщение 4 |
|
|
Дополню пример, убираем обтекание прописав в каскадной таблице общие значения:
Код
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
|
| [ RU ] |
|
|
Angerfist |
Понедельник, 21 Ноября 2016, 15:27 | Сообщение 5 |
|
|
И ещё, всё же советую прочитать пост пользователя SAM ТУТ по поводу
исходного содержимого строки списка, и окружающей "требухи" маркированного списка...
Хотя честно сам признаюсь и каюсь на тестовом шаблоне я не обрезал обёртку функцией substr, глядя по исходнику там нужно вырезать примерно это
Код <ul class="uRelatedEntries"> Тут конструкция вида материалов в этой самой обёртке </ul>
No regrets
Сообщение отредактировал
Angerfist - Понедельник, 21 Ноября 2016, 15:47 |
| [ RU ] |
|
|
Kosten |
Понедельник, 21 Ноября 2016, 20:04 | Сообщение 6 |
|
Убрал, так как нужно теги переписывать, время отвести, да переписать, а так здраво все показывает.
|
| [ RU ] |
|
|
ucozmental |
Вторник, 22 Ноября 2016, 03:06 | Сообщение 7 |
|
Не все так просто, вот почему на блоге ucoz сразу не напишут, как что работает и можно сделать, а просто, мы создали обновление, радуйтесь.
|
| [ RU ] |
|
|
Kosten |
Вторник, 22 Ноября 2016, 03:10 | Сообщение 8 |
|
|
Цитата ucozmental (  ) Не все так просто, вот почему на блоге ucoz сразу не напишут, как что работает и можно сделать, а просто, мы создали обновление, радуйтесь.
За такие деньги, они вообще должны скрипты писать, а они их продают. 
|
| [ RU ] |
|
|
Yan4953 |
Суббота, 15 Апреля 2017, 00:06 | Сообщение 9 |
|
|
Всё работает, всё классно спасибо, давно искал такое! Скажите как сделать, что-бы при нажатие на картинку тоже появлялось название, и можно было перейти на страницу материала по клику! Заранее большое спасибо!
|
| [ RU ] |
|
|
Kosten |
Суббота, 15 Апреля 2017, 00:24 | Сообщение 10 |
|
|
Yan4953, по клику должно так и работать, чтоб могли перейти, так как для этого сделали, а чтоб при наведение появлялось название, то нужно добавить title.
За оператором изображение ставим:
|
| [ RU ] |
|
|
Yan4953 |
Суббота, 15 Апреля 2017, 00:39 | Сообщение 11 |
|
|
Цитата Kosten ( ) Yan4953, по клику должно так и работать, чтоб могли перейти, так как для этого сделали, а чтоб при наведение появлялось название, то нужно добавить title.
За оператором изображение ставим:
Он работает по клику только на тексте а мне надо что-бы еще и по клику на картинку переходил!
|
| [ RU ] |
|
|
Kosten |
Суббота, 15 Апреля 2017, 00:51 | Сообщение 12 |
|
|
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="https://zornet.ru/Fresa/AB/net_foto-min.png" alt="$TITLE$"><?endif?></div
|
| [ RU ] |
|
|
Yan4953 |
Суббота, 15 Апреля 2017, 22:33 | Сообщение 13 |
|
|
Цитата 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="/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> |
| [ RU ] |
|
|
Kosten |
Суббота, 15 Апреля 2017, 22:51 | Сообщение 14 |
|
|
Yan4953, вид материалов и комментариев к нему, попробуйте так, хотя возможно через информер, но за него Angerfist, не чего не писал.
|
| [ RU ] |
|
|
Yan4953 |
Суббота, 15 Апреля 2017, 23:07 | Сообщение 15 |
|
|
Цитата Kosten ( ) Yan4953, вид материалов и комментариев к нему, попробуйте так, хотя возможно через информер, но за него Angerfist, не чего не писал.
Попробую,спасибо!
|
| [ RU ] |
|
|
