Меняем стандартный способ оценки изображения с выпадающего списка на звёзды. Всё с помощью CSS.
Звёзды трёх разных цветов: в спокойном состоянии, при наведении и при выборе.
Реализовать такую задумку очень просто. Для этого я использовал псевдокласс
В пример я взял пяти бальную систему оценок, сделав необходимую настройку в настройках галереи. При желании можно увеличить до десяти, немного дополнив код.
Замена.
Находим в шаблонах
и меняем на:
p.s. В более свежих версиях галереи вместо
Мы заменили выпадающий список на радио кнопки. Переключатель позволяет выбирать только один из предложенных вариантов. К нему добавлен тег
Теперь стили. Добавить можно просто в конец стиля.
Тут вроде ничего сложного:)
Используемые псевдоклассы относятся к CSS3, а это значит, что работать это будет только в современных браузерах, в IE начиная с 9 версии.
Изображение звёзд: Живой пример можно посмотреть в нашей галерее. Разумеется, оценка изображений доступна только авторизованным на форуме.
Звёзды трёх разных цветов: в спокойном состоянии, при наведении и при выборе.
Реализовать такую задумку очень просто. Для этого я использовал псевдокласс
: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 -->
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 версии.
Изображение звёзд: Живой пример можно посмотреть в нашей галерее. Разумеется, оценка изображений доступна только авторизованным на форуме.
Комментарии: 10
- OJIeG
- Сообщения: 23
- Зарегистрирован: 13 ноя 2012, 09:17
- Настроение:
- Пол: Муж
- Имя: Олег
Большое вам спасибо, очень красиво.
А вы не подскажите - что у меня не так? все вроде сделла, звездочки показываются, но не нажимаются и оценка не производится. что я не так сделал?
http://ogf.gtaserv.ru/gallery/image_pag ... age_id=916
http://ogf.gtaserv.ru/gallery/image_pag ... age_id=916