Оценка изображения в галерее в виде звёзд

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Оценка изображения в галерее в виде звёзд

CabinetAdmin 24 июн 2014, 20:01 Сообщение

Меняем стандартный способ оценки изображения с выпадающего списка на звёзды. Всё с помощью CSS.

Изображение


Звёзды трёх разных цветов: в спокойном состоянии, при наведении и при выборе.

Реализовать такую задумку очень просто. Для этого я использовал псевдокласс :checked, который позволяет применить стиль к "включенному" элементу, а который из них включен поможет узнать :nth-of-type.
В пример я взял пяти бальную систему оценок, сделав необходимую настройку в настройках галереи. При желании можно увеличить до десяти, немного дополнив код.

Замена.
Находим в шаблонах gallery/viewimage_body.html и gallery/posting_body.html:

Код: Выделить всё

<!-- IF S_ALLOWED_TO_RATE -->
<dl>
<dt><label>{L_YOUR_RATING}:</label></dt>
<dd>
<!-- IF .rate_scale -->
<select name="rate">
<!-- BEGIN rate_scale -->
<!-- IF rate_scale.RATE_POINT == 1 --><option value="0">{L_DONT_RATE_IMAGE}</option><!-- ENDIF -->
<option value="{rate_scale.RATE_POINT}">{rate_scale.RATE_POINT}</option>
<!-- END rate_scale -->
</select>
<!-- IF (not S_ALLOWED_TO_COMMENT or S_HIDE_COMMENT_INPUT) and .rate_scale -->
<input type="submit" name="submit" value="{L_SUBMIT}" class="button1" />
<!-- ENDIF -->
<!-- ELSE -->
{CONTEST_RATING}
<!-- ENDIF -->
</dd>
</dl>
<!-- ENDIF -->

и меняем на:

Код: Выделить всё

<!-- IF S_ALLOWED_TO_RATE -->
<dl class="rate">
<dt><label>{L_YOUR_RATING}:</label></dt>
<dd class="rate-body">
<!-- IF .rate_scale -->
<!-- BEGIN rate_scale -->
<input id="r{rate_scale.RATE_POINT}" type="radio" class="styled" name="rate" value="{rate_scale.RATE_POINT}">
<label for="r{rate_scale.RATE_POINT}" class="radio"></label>
<!-- END rate_scale -->
<!-- IF (not S_ALLOWED_TO_COMMENT or S_HIDE_COMMENT_INPUT) and .rate_scale -->
<input type="submit" name="submit" value="{L_SUBMIT}" class="button1" />
<!-- ENDIF -->
<div class="rate-star"></div>
<!-- ELSE -->
{CONTEST_RATING}
<!-- ENDIF -->
</dd>
</dl>
<!-- ENDIF -->


p.s. В более свежих версиях галереи вместо name="rate" может быть name="rating".

Мы заменили выпадающий список на радио кнопки. Переключатель позволяет выбирать только один из предложенных вариантов. К нему добавлен тег <label>, который ссылается на кнопку с таким же id - r{rate_scale.RATE_POINT}. Это нужно для того, чтобы как-то привязаться к переключателям, ведь в нашей модификации они будут скрыты.
<div class="rate-star"></div> - блок, который будет выводить выбранное количество звёзд.

Теперь стили. Добавить можно просто в конец стиля.

Код: Выделить всё

/* Rate image */
.rate input[type=radio] {
display: none;
}

.rate dt {
padding: 10px 0;
}

.rate-body {
background: url("./images/stars.png") 0 0;
width: 160px;
position: relative;
}

.rate-star {
background: url("./images/stars.png") 0 0;
width: 0;
height: 32px;
}

.rate .radio {
width: 32px;
height: 32px;
padding: 0;
display: block;
float: left;
cursor: pointer;
}

.rate .button1 {
position: absolute;
top: 8px;
right: -85px;
}

.rate .radio:nth-of-type(1):hover ~ .rate-star {width: 32px;}
.rate .radio:nth-of-type(2):hover ~ .rate-star {width: 64px;}
.rate .radio:nth-of-type(3):hover ~ .rate-star {width: 96px;}
.rate .radio:nth-of-type(4):hover ~ .rate-star {width: 128px;}
.rate .radio:nth-of-type(5):hover ~ .rate-star {width: 160px;}
.rate .radio:hover ~ .rate-star {background-position: 0 50% !important;}

.rate input:checked ~ .rate-star {background-position: 0 100% !important;}
.rate input:checked:nth-of-type(1) ~ .rate-star {width: 32px;}
.rate input:checked:nth-of-type(2) ~ .rate-star {width: 64px;}
.rate input:checked:nth-of-type(3) ~ .rate-star {width: 96px;}
.rate input:checked:nth-of-type(4) ~ .rate-star {width: 128px;}
.rate input:checked:nth-of-type(5) ~ .rate-star {width: 160px;}


Тут вроде ничего сложного:)

Используемые псевдоклассы относятся к CSS3, а это значит, что работать это будет только в современных браузерах, в IE начиная с 9 версии.

Изображение звёзд:
Оценка изображения в галерее в виде звёзд - stars.png
Оценка изображения в галерее в виде звёзд - stars.png (4.33 КБ) 1622 просмотра


Живой пример можно посмотреть в нашей галерее. Разумеется, оценка изображений доступна только авторизованным на форуме.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Аватара пользователя
kuprin

Оценка изображения в галерее в виде звёзд

kuprin 11 май 2016, 10:46 Сообщение

А вы не подскажите - что у меня не так? все вроде сделла, звездочки показываются, но не нажимаются и оценка не производится. что я не так сделал?
http://ogf.gtaserv.ru/gallery/image_pag ... age_id=916

Аватара пользователя
CabinetAdmin

Оценка изображения в галерее в виде звёзд

CabinetAdmin 11 май 2016, 15:56 Сообщение

У вас есть тестовый пользователь? Просто я как гость не имею возможности оценки изображений. Ну или дайте на время право оценки гостям.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
kuprin

Оценка изображения в галерее в виде звёзд

kuprin 13 май 2016, 11:31 Сообщение

зайдите под пользователем Darkur, пароль 12345

Аватара пользователя
CabinetAdmin

Оценка изображения в галерее в виде звёзд

CabinetAdmin 13 май 2016, 16:06 Сообщение

Так, для эксперимента зашёл с хрома и лисы в первые попавшиеся изображения - всё работает.

Теперь подробнее, как именно не работает и с какого браузера пробовали?
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
kuprin

Оценка изображения в галерее в виде звёзд

kuprin 13 май 2016, 16:10 Сообщение

с Интернет Эксплоера а может я не то нажимаю?

Аватара пользователя
kuprin

Оценка изображения в галерее в виде звёзд

kuprin 13 май 2016, 16:12 Сообщение

Или потому что я под администратором не пойму. У меня они перелливаются разным цветом, но при нажатии никакой реакции )))
с хрома тоже самое

Аватара пользователя
CabinetAdmin

Оценка изображения в галерее в виде звёзд

CabinetAdmin 13 май 2016, 16:25 Сообщение

kuprin писал(а):Источник цитаты с Интернет Эксплоера

В нём только с 9 версии будет работать.

kuprin писал(а):Источник цитаты Или потому что я под администратором не пойму.

А под тем же пользователем, под которым я только что оценил вам пару изображений?
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
kuprin

Оценка изображения в галерее в виде звёзд

kuprin 13 май 2016, 21:35 Сообщение

а комментарий обязательно оставлять при оценке?

Аватара пользователя
CabinetAdmin

Оценка изображения в галерее в виде звёзд

CabinetAdmin 14 май 2016, 08:52 Сообщение

Не обязательно. Выбрать количество звёзд и нажать кнопку отправить.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя