В этом уроке я расскажу о том, как можно сделать превью разных цветов одного элемента. Это свойство можно использовать, например, при создании интернет-магазина, чтобы показать цветовые вариации одного товара.
Шаг 1.
Прежде всего подключим нужные скрипты (фреймворк jQuery, скрипт strip.js), а также файл css-стилей. Для этого между тегами <head> пропишем следующий код:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="strip.js"></script>
<link type="text/css" rel="stylesheet" href="strip.css" >
Шаг 2.
Далее пропишем такой скрипт:
<script type="text/javascript">
var mystrip;
$(document).ready(function() {
mystrip = new ImageStrip('#stripdiv',100,0);
});
</script>
Шаг 3.
Подготовим изображение высотой 100px и по 100px в ширину для каждого элемента. В данном случае у нас 4 цветовых элемента, поэтому размер изображения равен 400px х 100px.
При желании Вы можете сделать еще больше цветовых вариантов.
Шаг 4.
В нужном месте вставляем блок с меняющимися элементами таким образом:
<div class="strip" id="stripdiv"><img src="shirts.png"></div>
<select onchange="mystrip.move(this.value)">
<option value="1">Green</option>
<option value="2">Yellow</option>
<option value="3">Blue</option>
<option value="4">Red</option>
</select>
</div>
Если элементов больше четырех, то выпадающий список следует продолжить, соответственно меняя значения option value.
Все готово! Надеюсь, этот урок Вам пригодится!