Создание превью изображения на основне свойства 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 и на ней маленькие превьюшки некоторых картинок из пака