моя прелесть

stepbystep_hdr

Сергей Степаненко

фотожурнал пейзажиста


Previous Entry Перепостить Next Entry
Как вставить в пост длинную картинку с прокруткой
моя прелесть
stepbystep_hdr
Данный совет применим для длинных панорам, которые не помещаются в экран по ширине. Для длинных по высоте панорам это неактуально, поскольку используется прокрутка самой страницы.
Одним из вариантов является использование flash как для виртуальных туров с круговыми панорамами на 360 градусов. Я сам flash не люблю, считаю его постепенно отмирающей технологией и заменой на html5.

Идея была в том чтобы зафиксировать ширину картинки на странице и добавить прокрутку по горизонтали.
Итак чтобы сделать это нужно вставить следующий html код в страничку поста

<div style="overflow-x: scroll;"><img src="{image_url}" style="min-width:{image_width}px;min-height:{image_height}px" /></div>

где:
{image_url} - url на картинку
{image_width} - ширина картинки
{image_height} - высота картинки

Примеры:
1. Автоматическая ширина по родительскому html элементу странички
<div style="overflow-x: scroll;"><img src="http://ic.pics.livejournal.com/stepbystep_hdr/11824494/342685/342685_original.jpg" style="min-width:5072px;min-height:617px" /></div>



2.
Ограничение по ширине в 1200px:
<div style="overflow-x: scroll; width:1200px;"><img src="http://ic.pics.livejournal.com/stepbystep_hdr/11824494/1199598/1199598_original.jpg" style="min-width:3674px;min-height:685px" /></div>


3. Вертикальная прокрутка с ограничением по высоте в 400px:
<div style="overflow-y: scroll; height:400px; width:{image_width}px;"><img src="{image_url}" style="min-height:{image_height}px" /></div>

  • 1
Спасибо! Пользительно!
В копилку... :)

Очень интересно. Спасибо!

Это к сожалению работает не для всех вариантов верстки. Например у меня в ленте оно выводится на все 5к+ пикселей в ширину. Зависит от реализации блоков в установленном шаблоне

прописуй ширину как во втором примере, проверил на твоем дизайне:)

Edited at 2013-08-29 08:47 am (UTC)

Это то понятно, что фиксированная ширина работает.
Я просто указал тот факт, что применяя именно этот метод и ожидая, что всё будет нормально у тех, кто читает пост, оно таки не всегда будет :)

Спасибо ещё раз ;)

спасибо, сейчас попробую!

вижу, проба прошла успешно:)

Спасибо! Полезно.

зачем делать такие панорамы

Как мне кажется, вся соль панорамы – в непрерывности. со скроллом они перестают восприниматься непрерывно и начинают восприниматься как дискретные карточки. Ну или делать и печатать или делать не такие широкие, чтобы картинка не дробилась.

Re: зачем делать такие панорамы

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

Re: зачем делать такие панорамы

+1, как говорится.

Про ограничение длины не знала, так что добавлю в избранное.
Спасибо!

(Deleted comment)
Спасибо Серега! Работает. Только пришлось добавить </div>

Отлично.
Точно, забыл добавить div.

картинки супер!)

Большое спасибо )))

пользуйтесь наздоровье

Добренького! А нет у вас рецепта, как картинку использовать в виде задника, под текстом? Чтобы поверху картинки можно было текст разместить.

Хорошая подсказка, пригодится. Правда, я в тот раз в другом месте нашла и сделала, как хотела:
http://greystar-belaya.livejournal.com/230117.html

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

Делала на другом компе, где у мня маленький монитор. Там все ровненько выглядело :))

Ну да от экрана зависит. Резиновый фон надежней )

Я уже схомячила : ) и при случае обязательно учту, воспользуюсь.

Здравствуйте! Увидела ссылку на ваш пост в проекте "Бесконечная Книга". Там как раз с каждой неделей все актуальнее вопрос, как показывать ну ооочень длинный рисунок... А можно пару вопросов Вам? Я на МакБуке, Сафари, - у меня постоянно пропадает скроллбар - можно ли с этим как-то бороться? И еще - работает ли этот код на телефонах и планшетах? Спасибо!

На сафари не проверял, на всех других браузерах работает. А что значит "постоянно пропадает скроллбар", как это выглядит, вообще не показывается или как?

На телефоне отлично работает, можно скролить, потянув пальцем

Спасибо! Да, вот просто исчезает скроллбар не появляется больше при наведении мышки. Просто статичная картинка остается, и не прокручивается никак ... Не пойму - это косяк Сафари или вообще макбука...

Подключила второй монитор - прокрутка вернулась! Видно это все-таки косяк именно лэптопа. Еще раз спасибо!

рад, что пригодилось:)

Очень классная штука, спасибо огромное.
У меня только один вопрос, можно ли сделать ограничения по высоте в панораме или она всегда одного размера или зависит от размера фотографии?. Картинку я меняю, но размер панорамы не меняется, только качество ухудшается. Еще размер дива изменила, получилось две прокрутки. Что-то не то делаю...
Спасибо

Edited at 2014-02-27 10:52 am (UTC)

често говоря, я не понял, что же вы хотите в конце концов получить:)

МЕньший размер картинки по высоте, он не меняется.
Хочу, например, чтобы панорама была 400 пикселей в высоту

Я не понимаю, от очего зависит высота панорамы

Edited at 2014-02-27 11:19 am (UTC)

специально для вас добавил 3-й пример в пост с вертикальной прокруткой

Спасибо вам большое. Прокрутка у меня горизонтальная, извините, если неправильно выразила мысль.

Но я разобралась. Мне всего-то надо было min- у height убрать, чтобы высота стала точно задаваемой, и все стало идеально.

Спасибо еще раз за этот способ, я тоже с проекта "Бесконечная книга" и там это оочень актуально.

спасибо огромное!

Помогите, пожалуйста, разобраться: мне нужно вставить в свой блог (в пост) длинную картинку( http://fotki.yandex.ru/users/khri-khri705/view/1303494). Как узнать, какие цифры ставить для ширины и длины в коде? Пробовала несколько вариантов- получается ерунда какая-то(((Прокрутка есть. а картинка размытая и вытянутая

сегодня билась над тем же, у меня проблема решилась, когда я вставила ссылку на картинку не из веб альбома пикасы, или фликера, а из radikal.ru

Спасибо за подсказку, попробую!

Я тоже из бесконечной книги - ваш урок просто подарок для нас!
Спасибо большущее!!!

Спасибо! Вставлял себе в пост небольшую панораму с берега Волги. Хотелось, чтобы можно было рассмотреть ее поближе.

  • 1
?

Log in

No account? Create an account