Окно превью с миниатюрами

[alleclf]

Скажите пожалуйста, как можно реализовать всплывающее окно. При наведении на ссылку "Preview" чтобы показывались картинки с классом "post", но уменьшенного размера. В самом посте у них размер ширина 500px, а во всплывающем окне что бы было 100px - уменьшенные копии.

<div class="post">
<img src="image1" width="500px">
<img src="image2" width="500px">
<img src="image3" width="500px">
</div>

<a href="">Preview</a>

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

Edited May 25, 2012 by alleclf

[Great Rash]

Скриптом

[alleclf]

Скриптом

очень информативный ответ

[Avalon4eg]

А вы ожидали листинг на 2 страницы?

Подобная задача решается примерно так:

Создаете слой а в нем помещаете пустй тег img, через стили задаете этому слою display: none.

Далее при наведении на ссылку (событие hover) запускается функция которая, получает атрибут href данной ссылки (можно через this.href).

присваивает данное значение атрибуту src тега img, находящегося в скрытом слое, и отображаете слой при помощи функции show().

данный слой можно с позиционировать в нужном для Вас месте.

Если проявить фантазию можно, к примеру отображать привью рядом с курсором и тд....

ЗЫ: не пойму только смысла показывать привью при наведении на текст ссылки! если это ссылка - значит на нее нужно нажать, а не ожидать что при наведении на нее произойдет что то кроме изменения ее цвета, тем более появление всплывающего окна. Если делать привью - то при наведении на уменьшенную копию - хотя может я не понимаю всей глубины Вашей задумки.

[alleclf]

Avalon4eg

делаю для сайта с обоями. В кратких новостях хочу сделать предпросмотр полной новости, что бы сразу было видно сколько и каких там обой.

а как именно сделать - при наведении или по клику я ещё подумаю

На данный момент окно открывается и работает как нужно, проблема только в том что размер картинок большой (такой как в полной новости) и всплывающее окно нужно прокручивать вниз что бы увидеть всё содержимое. Проблема именно в том что бы изменить размер картинок - уменьшить их раза в 2-3. Не могу понять где и как перехватить и уменьшить.

Edited May 25, 2012 by alleclf

[Avalon4eg]

задайте тегу img ширину а высота будет подобрана из пропорции

[alleclf]

задайте тегу img ширину а высота будет подобрана из пропорции

у них уже есть стиль определяющий размер в полной новости, при уменьшении необходимо перехватывать свойство, просто так не получается видимо накладка или приоритет свойств.

Сейчас иду в сторону очистки параметров картинок что бы не было накладок

[Avalon4eg]

Создайте отдельный идентификатор для окна с привью и будет вам счастье.