моя прелесть

stepbystep_hdr

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

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


Предыдущий пост Перепостить Следующий пост
Как вставить в пост длинную картинку с прокруткой
моя прелесть
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>
Метки:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

?

Log in

No account? Create an account