Показать большое изображение в другом DIV на Rollover of Thumb - PullRequest
1 голос
/ 23 марта 2012

У меня есть страница с полноразмерным изображением товара и 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 и использовать его повторно для всего, что соответствует этому шаблону, если это вообще возможно.

Спасибо за любые указания на это!

Ответы [ 2 ]

1 голос
/ 23 марта 2012

Я полагаю, что это будет немного сложнее, чем простой JQuery, но я видел несколько плагинов для таких вещей, которые очень просты в использовании, таких как http://wayfarerweb.com/jquery/plugins/simplethumbs/

0 голосов
/ 23 марта 2012

как то так:

<div class="fullsizeimage">
    <img src="/images/products/prod_1/produ_name_1_large.jpg" />
</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>



$('.thumbimage a img').on('click hover',function(){
    $('.fullsizeimage img').attr('src',$(this).attr('src'));
});

но вы должны изменить свою HTML-структуру в соответствии с этим, и вам нужно проанализировать строку URL и заменить 'small' на 'large'

для предварительной загрузки img вы можете использовать обработчик jquerys load ().

Вы также можете добавить скрытый элемент с большим URL-адресом img и проанализировать это:

<div class="thumbimage">
    <a href="#"><img src="images/products/prod_1/prod_name_1_small.jpg"></a>
    <span class="url hidden">/images/products/prod_1/produ_name_1_large.jpg</span>
</div>

$('.thumbimage a img').on('click hover',function(){
    $('.fullsizeimage img').attr('src',$(this).parents('.thumbimage').find('.url').text());
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...