У меня есть страница с полноразмерным изображением товара и 4 (может быть, больше, может быть, меньше) миниатюрами. При наведении курсора мыши или нажатии на каждую миниатюру (любую) я хотел бы изменить изображение в полном размере. Также полноразмерное изображение должно по умолчанию иметь первый эскиз.
Я не совсем уверен, как это сделать, и будет несколько папок и названий продуктов, но соглашение об именах будет одинаковым во всех.
Я предполагаю, что это будет jQuery (что хорошо, но я немного новичок), но вот сценарий:
<div class="fullsizeimage">show /images/products/prod_1/produ_name_1_large.jpg here by default but change as the thumbs are rolled over or clicked.</div>
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_1_small.jpg"></a></div>
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_2_small.jpg"></a></div>
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_3_small.jpg"></a></div>
...
Вот подробности:
- Имена изображений будут images / products / prod_name / prod_name_1_small.jpg (100x100px) и images / products / prod_name / prod_name_1_large.jpg (400x400px) для всех, кроме prod_name и prod_1 будут отличаться для каждой папки
- Может быть от 1 до 10 миниатюр.
- Хотелось бы, чтобы на первом миниатюре была загружена полноразмерная копия по умолчанию.
Я бы предпочел сделать это только с помощью jQuery и использовать его повторно для всего, что соответствует этому шаблону, если это вообще возможно.
Спасибо за любые указания на это!