Создание превью изображения на основне свойства Overflow

[gryzzly]

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

[n1mnul]

Всё уже давным-давно придумали, просто об этом не писали статьи.

[gryzzly]

понятно что всё придумано, но ведь и давным-давно это надо было придумать, правда? ну и к тому же вовсе не всё придумано :)

[SantaCluster]

писАли :) и давно причём. только на аглицком...
я неска лет назад наткнулся на одного престарелого CSS-гика Стью Николса (cssplay.co.uk)
он умудряется в свои, 60-с-хвостиком лет (если мне не отшибает память) такие чудеса стилями делать!..
многое почерпнул...

а за перевод хабратчанке всё равно спасибо :)

[slavik]

всё уже украдено до нас © 8)

[serega011]

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

[Sakura]

Спасибо за статью, как раз это мне сейчас и надо было :)

[ANDEREY]

Полгода назад еще так же делал... Вообще удобно очень=).

[Bonch]

Это всё конечно хорошо. Но как быть тем людям, у которых не безлимит или даже не выделенка? Ведь картинка будет грузиться полностью, и далеко не факт, что пользователь, увидев тамбнейл захочет просмотреть картинку целиком.

Это подойдет только для тех случаев, если исходное изображение небольшое по размеру (как в статье). Только вот не могу придумать случаев, где это юзабельно.

А так спасибо автору и переводчику - интересная методика.

[habratchanka]

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

[habratchanka]

обрезало..
Смысл даже не в том, чтобы "не грузить большие превьюшки", а в том, чтобы съэкономить место на странице. Превью в полном масштабе допустим слишком широкое, а по высоте узкое. За одно и одинаковый размер у всех картинок будет.

[svolot4]

Подобные штуки лучше делать на Ajax'e. Будет работать медленнее, но гораздо юзабельнее.... ИМХО!
Полностью с Вами согласен!

[Regis]

Но тогда для превью всё равно придется жать или резать.

[svolot4]

превью по определению надо ужимать =)

[donPedro]

В этом случае придётся создавать ещё один «ужимок».

[svolot4]

Не согласен! Второй «ужимок» будет лишним если мы первый ужмём нормально!
Конечно же это всё моё личное мнение, но всё должно быть как можно проще и показывать полную превьюшку при наведении изврат...
Господа, будьте проще!!!

[hlomzik]

аякса не надо
src спасет отца русской демократии ;)

[Mailo]

Хорошая статья. Данный метод также полезен при создании резиновых макетов.

[k_s]

Ну во-первых это только для небольших фотографий подходит, а во вторых использовать элемент «a» без ссылки как-то несамантично :)

[habratchanka]

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

[Orenlab]

А с точки зрения Гугла еще и не честно, так как надо идти назад и запомнить тупик, затаив обиду =).

[homm]

Что же поделаешь, монополисты вынуждают.

[Fade]

Спасибо. Уже неделю ищю именно это. Завтра понесу заказчику показывать. Супер.

[kosiakk]

а если б ещё и анимацию прикрутить (хотя бы на оторбражение)!
jQuery нам поможет?

[Ladygin]

Зачем jQuery?
Ведь гараздо лучше библиотека mootools.

[dtmax]

А чем лучше, поделитесь плз.

[my_own_parasite]

+1. тоже непонятно, чем лучше (да ещё и гораздо). вопрос привычки - не более.

[Ladygin]

Лучше в плане производительности.
Причём в разы.

[Ladygin]

и плюс в несколько раз меньше размер подключаемого файла с библиотекой.

[Fade]

Все прикручиваеться без проблем: jQuery, mootools, prototype... пробовал

[Delka]

очень классно!

2kosiakk: анимацию через crop можно сделать.

[BACRHR]

ну, имхо, не очень красиво смотрится. Без JS не обойтись никак.

[exel]

Класс!

[hlomzik]

давно делал похожую вещь - crop и resize картинки с превьюшкой
http://dsms.ru/pic2phone/
превьюшка - полная картинка, размеры и положение которой указываются в зависимости от выделения, установленная в блок с overflow

[mbystrik]

Спасибо за полезный пост.
Так же за наводку на хороший ресурс.

[S0nic]

Большое спасибо за великолепную идею!

[mimic]

А кто-нибудь может подсказать, как реализовать такое:
в превьюшке находиться уменьшеная картинка, при наведении курсора раскрывается полная картинка, как описано в посте. Т.е. картинок 2 или одна, но в превьюшке ужатая програмно.

[pdev]

Интересная статья, спасибо, вот только непонятно, а почему бы свойство clip не использовать ?

[Donat]

А есть программа для создания листа с превьюшками? По типа как на сайтах выкладывают паки картинок и в краткой новости например картинка размером 500х500 и на ней маленькие превьюшки некоторых картинок из пака