» »

Скрипт на случайные материалы для uCoz

Скрипт на случайные материалы для uCoz

Создаем информер на случайные файлы в 2 колонки и размещаем в блок. При перезагрузки страницы материал будет меняться постоянно. Также на них есть небольшой эффект, это когда вы наводить будете, то появится в один пиксель рамка яркая. Что на темном сайте очень красиво выглядеть и безусловно смотрится. Этот информер доработан был пользователем Angerfist, а точнее были доработаны стили под мобильную адаптацию. И теперь вы сами можете выставить ширину под ваш контейнер сайта, так как они все разные. Он идет на темный фон и можно поставить на светлый, изменений не каких не будет, но разве эффект по гамме изменить.

Что если говорить о тематическом наклонение его, на какой теме можно его использовать, то здесь можно с уверенностью сказать, что она широкая. Но больше всего подойдет на кино сайт или игровые интернет ресурсы. Вообщем на тех порталах, где главное изображение идет по размерам соответственно похоже. И только в этом случай будет выводить картинки корректно и главное можно будет понять, на какой вы материал заходите. Здесь идет парно, и только можно выставить с на 4 или шесть и восемь, думаю это будет уже нормально по функциональности главной странице и место не так много займет.

Приступаем к установке:

Идем в админ панель в раздел информер и создаем его.

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 4 · Колонки: 1 ]

Код
<div class="ScreenGame">
<div class="ScreenGame-img" onclick="location.href='$ENTRY_URL$'" style="background-image: url('$IMG_URL1$')" title="Перейти к просмотру $TITLE$">
</div>
</div>


CSS:

Код
.ScreenGame {
display: block;
float: left;
width: 48%;  
margin: 1%;
}
.ScreenGame-img {
display: block;
position: relative;
padding-bottom: 125%;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
border: 1px solid #515151;
border-radius: 3px;
-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;
}
.ScreenGame-img:hover {
cursor: pointer;
border: 1px solid #6899C3;
}  
@media all and (min-width:480px) and (max-width:768px) {
.ScreenGame {
width: 32%;  
margin: 0.65%;  
}


PS - как можно заметить, в стилях прописан media, для адаптаций под мобильную ширину.
23.12.2016 Просмотров: 1002 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
FeStemBer
FeStemBer 23.12.2016 03:581
0
Что то подобное уже встречал, возможно что не был настроен под мобильные устройства. Если скрипты редко кто делает, а информеру видимо встречаю в первые, а может где то есть на продажу как обычно.
Сафрон
Сафрон 23.12.2016 04:062
0
Не чего удивительного про настройку мобильного устройства, можно посмотреть материал, что выложил на сайт Angerfist, но он вероятно весь уже настроен, но что видел, везде media присутствует.
Tergran
Tergran 23.12.2016 04:103
0
Этот информер установлен на сайте cstavr.ru, что не плохо смотрится.
Angerfist
Angerfist 23.12.2016 10:554
0
Здесь медиа под особенности складывания шаблона сайта cstavr, для других шаблонов вероятно запрос на этом промежутке будет лишним.
Kosten
Kosten 23.12.2016 23:185
0
Но в таком случай можно просто убрать, но для этого для начало стоит установить и посмотреть.
avatar