Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Вид материалов для фотоальбомов
Скрипты

Всем привет! сегодня решил сделать новый вид материалов для модуля Фотоальбомы так как мало таких материалов на сайте. Также сделал демо страницу чтоб вы могли посмотреть как это всё выглядит перед тем как устанавливать на свой сайт

О материале

1 Я решил сделать его круглой формы.Почему? сам не знаю просто решил и всё.
2 Добавил ему красивую на мой взгляд рамку которую вы можете сменить на свою заменив всего лишь ссылку на картинку.
3 Добавил выезжающий блок по верх картинки при наведении, В него поместил две ссылки первая это логин автора, вторая ведёт на страницу фотографии в виде лупы

Установка

В виде материалов модуля фотоальбомы заменяем весь код на этот
Код
<div id="wid_m_block">
<div id="wid_m_img">
  <span><a href="$PROFILE_URL$">$USER$</a></span>
<div class="wid_m_img"> $PHOTO$</div>
  <div class="zzum"><a href="$PHOTO_LIGHTBOX_URL$" ><img src="/img/zum_img.png" class="zum_img" width="25px;" height="25px"></a></div>
</div>
</div>
Теперь подключим наши стили для этого заходим в Управление дизайном » Редактирование шаблонов » Таблица стилей (CSS и в самый конец добавляем данный код
Код

#wid_m_block {
  float: left;
  margin: 30px;
  background: url("../img/wid_m_img.png") no-repeat;
  width: 200px;
  height: 200px;
  padding: 15px;
  overflow: hidden;
}

#wid_m_img {
position: relative;
  width: 170px;
  height: 175px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  overflow: hidden;
}
.wid_m_img img {
  z-index: 1;
  min-width: 100%;
  max-width: 180%;
  height: 175px;
  object-fit: cover;
}
#wid_m_img span {
  display: block;
  height: 175px;
  width: 175px;
  padding: 40px 0;
  text-align: center;
  color: #FFF;
  top: 180px;
  background: rgba(0,0,0,.5);
  position: absolute;
  -o-transition: all 1s;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
#wid_m_img span a {
  color: #FFF;
  display: block;
  text-decoration: none;
  font-size: 22px;
}
#wid_m_img a:hover {
  color: #7CC623;
}
#wid_m_img:hover span {
  top: 0px;
}

.zzum {
  position: absolute;
  z-index: 9;
  margin-left: 75px;
  margin-top: -80px;
  display: none;
}
.zum_img{
  width: 25px!important;
  height: 25px!important;

}
#wid_m_img:hover .zzum {
  display: block;
}

Теперь нам осталось только скачать архив и залить несколько картинок в папку img в файловый менеджер своего сайта

Особености:

Тематика
Для любого сайта
Браузеры
Одинаково работаее на всех браузерах последней версии
Адаптация
Есть
Архив
Все нужные файлы
Размер
27.8Kb

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

tolyan163rus 22.12.2016 в 13:30
почему так?
waak 22.12.2016 в 15:57
Здравствуйте! потому что вы не загрузили картинку на свой сайт
tolyan163rus 22.12.2016 в 16:06
Не верно! не от картинки зависит, там икона поиска! она не как не влияет на кавадрат... присмотрись...
tolyan163rus 22.12.2016 в 16:09
при наведении на изображение, квадратно, а у тебя показано закругленно...
waak 22.12.2016 в 16:14
Ссылку на сайт да мне и я помогу просто на скриншоте я увидел отсутствие картинки думал ты про неё
tolyan163rus 22.12.2016 в 16:15
Не заметил его отсутствие... от сайта не зависит эффект... таких стилей нету)
waak 22.12.2016 в 16:22
Всё есть вот эти стили отвечают за него #wid_m_img span {тут стили }
ссылка на твой сайт мне нужна для того чтоб посмотреть код в работе посмотреть чего не хватает или что ломает вид

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