Главная / Каталог скриптов для uCoz / Разное, Бесплатно

Кнопка скачать с анимацией для каталога файлов

Добавлено 25-06-2018 в 23:25

Категория Разное, Бесплатно
Авторwaak
Просмотры910
Комментарии0
Понравилось9

Кнопка скачать с анимацией для каталога файлов

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

Так как на сайте пока ещё мало скриптов и ещё меньше для каталога файлов то не долго думая я решил сделать простую стильную кнопку скачать для данного каталога но так как таких кнопок очень много уже есть в интернете пришлось немного подумать над тем как её оформить

И вот что получилось!

Вид кнопки по умолчанию

Вид кнопки при наведении

Как можно видеть на картинке выше при наведении на кнопку возле неё появляется доп информация
Размер архива и количество скачиваний

Установка

Для начало установим стили данной кнопки для этого нам нужно перейти в Админ панель Управление дизайном Таблица стилей и в самый её конец добавить код ниже

Код

.cnopaz {position: relative;margin: 40px 70px;}
  .cnopaz a {
  display: inline-block;
  padding: 10px 20px;
  background: #2dc108;
  color: #FFF;
  border-radius: 5px;
}

.cnopanumz {
  position: absolute;
  z-index: 2;
  color: #333;
  font-size: 0px;
  left: 30px;
}
.cnopanumves {
  position: absolute;
  z-index: 2;
  color: #333;
  font-size: 0px;
  bottom: 0px;
  left: 0;
}

.cnopaz a:hover .cnopanumz {
  font-size: 13px;
  top: -20px;
  left: 0;
  transition: 1s;
}
.cnopaz a:hover .cnopanumves {
  font-size: 13px;
  left: -50px;
  bottom: 5px;
  transition: 1s;
}

.cnopanumves:before, .cnopanumz:before {
  top: -10px;
  content: "";
  display: block;
  position: absolute;
  background-color: #2dc108;
  border-radius: 5px;
}

.cnopaz a:hover .cnopanumz:before {
  left: 0;
  width: 10px;
  height: 10px;
}

.cnopaz a:hover .cnopanumves:before {
  right: 0;
  width: 20px;
  height: 20px;
  top: -25px;
}

отлично не забываем сохранить

Теперь установим сому кнопку для этого перейдём в Админ панель Управление дизайном Каталог файлов Страница материала и комментариев к нему и по месту где хотим видеть кнопку добавляем код ниже

Код

<?if($FILE_URL$)?><div class="cnopaz">
<a href="$FILE_URL$">
  <span class="cnopanumz">$LOADS$ загрузок</span>
  <span class="cnopanumves">$FILE_SIZE$</span>
  Скачать</a>
</div><?endif?>

отлично не забываем сохранить

Так же хочу отметить что данная кнопка будет видна только если к материалу прикреплён файл для скачивания

Оставить комментарий

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

Регистрация Вход

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

pa patali2k

Спасибо большое!

06-06-2025 в 05:58 материал

waak

на все страницы вывести можно скриптом через запрос на персональную страницу пользователя а на странице со списком закладок я вывел так

Код

У вас $NUM_ENTRIES$ заклад<?if($NUM_ENTRIES$%10=0||$NUM_ENTRIES$%10>4||$NUM_ENTRIES$%100>10&&$NUM_ENTRIES$%100<15)?>ок<?else?><?if($NUM_ENTRIES$%10=1)?>ка<?else?>ки<?endif?><?endif?>

05-06-2025 в 22:07 материал

pa patali2k

Добрый день! Waak подскажи как вы сделали У вас N закладок, у меня выходит 1-5 например, так если можете подскажите как вывести кол.во закладок пользователя например в мини профиль, чтоб кол.во закладок показывало на любой странице

04-06-2025 в 16:51 материал

pa patali2k

Добрый день!
Сегодня снова попробовал установить скрипт и он снова не заработал, все перерыл, изменял, убирал и никак не заводился.
Решение: В общих настройках сайта нужно переключить Версия библиотеки jQuery: на jquery-1.12.4.min.js
В общем теперь просьба, не могли бы переписать скрипт закладок под jquery-3.6.0.min.js