вторник, 01 июня 2010
22:03

Превью фото одного размера.

все записи пользователя в сообществе Smai-LA
When in doubt, relax, turn off your mind, float downstream. ©
Здравствуйте! Хочу настроить на своей панели дополнительную кнопку, которая из ссылок на фотки на назличных фото-хостерах будет делать такие вот превьюшки.



Только вот почему-то никак не получается сделать так, чтобы эти превьюшки размещались в одну строчку, хотя я и размещаю их даже без пробелов. Как сделать так, чтобы они не переносились? Помогите, пожалуйста, очень надо! :beg:

Вот код одной превьюшки:


@темы: Добавление изображений, Кодировка

URL
Комментарии
01.06.2010 в 22:08

Симорошка
дайте мне точку опоры и я об неё споткнусь
почему-то код не могу скопировать...
в общем, надо добавить display:inline; в первый тег, между кавычек где-нибудь.
URL
01.06.2010 в 22:18

Smai-LA
When in doubt, relax, turn off your mind, float downstream. ©
Симорошка
Вставила. Смотрите, что получилось..




URL
01.06.2010 в 22:27

Караидель
149ea694a792f3ad2caaf77077a0df58 Спорящая с богом
А в чём смысл в таких превьюшках? Траффик оно не экономит и скорость показа не увеличивает, уменьшается только видимый размер.
URL
01.06.2010 в 22:32

Smai-LA
When in doubt, relax, turn off your mind, float downstream. ©
Симорошка ой, знаете, помогло display:inline-block ))) спасибо за наводку)))


URL
01.06.2010 в 22:34

~a-kin~
Караидель
Вероятно внешний вид страницы аккуратный получается
URL
01.06.2010 в 22:37

Smai-LA
When in doubt, relax, turn off your mind, float downstream. ©
Караидель А смысл в том, что такие превью во-первых,выглядят эстетичнее - все одного размера, что вертикальные фото, что горизонтальные, во-вторых, так их намного удобнее открыть сразу в полном размере, чем такое стардартное превью фотохостера, которое кроме картинки загружает еще кучу левых элементов. Таким образом сокращается время открытия фото)


URL
01.06.2010 в 23:20

Симорошка
дайте мне точку опоры и я об неё споткнусь
Smai-LA
да, точно)) давно версткой не занималась. Рада, что вы нашли решение)))
URL
02.06.2010 в 00:57

bokonist
fail better
если выкинуть всё лишнее, останется




но Караидель права, вы зря заставляете ваших читателей скачивать полноразмерные картинки. превьюшки с внешнинх сервисов тоже можно обвести рамочкой (и вероятно есть сервисы, которые не добавляют надписи и обводку).
URL
02.06.2010 в 01:01

bokonist
fail better
с твоим способом обрезания до квадрата есть проблема с вертикальными картинками

можно картинке добавить style="min-width:120px;" — это сработает в некоторых браузерах

и inline-block, к сожалению, не работает в IE, можно только добавить style="display:inline-block;//display:inline;zoom:1;"
URL
02.06.2010 в 03:05

Smai-LA
When in doubt, relax, turn off your mind, float downstream. ©
bokonist Благодарю за помощь)) в итоге оставила такой вот код


вы зря заставляете ваших читателей скачивать полноразмерные картинки.
все картинки у меня находятся под катом. и количество картинок пишется в кате. так что они на свое усмотрение открывают)
превьюшки с внешнинх сервисов тоже можно обвести рамочкой
но эти фото на внешних сервисах загружаются намного дольше, так как они еще загружают рекламу и прочие лишние байты. То есть получается, что человек, решивший посмотреть все фото под катом, загрузит меньше байт при моем способе, чем будет открывать каждую отдельную фотку со всей рекламой на фото-хостере))) Вы попробуйте сами их пооткрывать. Во-первых, размер фото не сразу такой, какой должен быть, а во-вторых вокруг этого фото грузится очень много лишнего.)
inline-block, к сожалению, не работает в IE, по-моему, он не работает только во второй мозиле [source]
URL
02.06.2010 в 03:10

Симорошка
дайте мне точку опоры и я об неё споткнусь
Smai-LA
мне, кстати, очень нравится эта идея. Потому что многочисленные выложенные на фотохостингах картинки раздражают. ну, я вообще люблю, когда картинки прямо в дайри-БИ загружаются и по клику превьюшка сразу меняется на полный размер (чтобы не кликать по вкладкам), но тут есть ограничения))
URL
02.06.2010 в 03:22

bokonist
fail better
Smai-LA, inline-block совершеенно точно не работает в IE6-7, но его можно эмулировать c помощью "display:inline;zoom:1;".

лучший вариант — more для каждой превьюшки, но это может быть слишком трудоёмко.
URL
02.06.2010 в 03:25

Smai-LA
When in doubt, relax, turn off your mind, float downstream. ©
но тут есть ограничения))
причем очень существенные. мне для сообщества приходится каждый день как минимум 20 фото загружать. поэтому с БИ не проканает)
а так еще и в дизайн можно вписать, выбрав нужный цвет рамки)
URL
02.06.2010 в 03:28

Smai-LA
When in doubt, relax, turn off your mind, float downstream. ©
лучший вариант — more для каждой превьюшки, но это может быть слишком трудоёмко.

да нет, уже не нужно это) тот код, который я последним оставила - там ничего этого не нужно)
значение кнопки получилось следующим

bokonist еще раз спасибо за помощь)
URL
02.06.2010 в 11:08

Gabalus
Ты меня забудешь...©
Спасибо за тему. Полезно!
URL
03.06.2010 в 19:48

P@nteleymon
Не делай лимонад!!!
< div > Автоматом переносит на новый абзац.
Один див — один абзац. Поэтому все превью надо размещать среди одной пары "дивок"
URL