{Natalie Ratkovski} (conjure) wrote,
{Natalie Ratkovski}
conjure

Category:

Моя "Бесконечная книга" и некоторые полезные советы

Я наконец-то сделала склейку своей "Бесконечной книги". Под картинкой ползунок (scroll bar). Тяните его вправо, чтобы посмотреть всю книгу. Формат 24х32см; техника - акварель, простой и цветные карандаши, белила; бумага - Canson Montval 300g/m2.




Свою книгу я склеила в фотошопе - пришлось изрядно повозиться на стыках. Она у меня не помещается в сканер, поэтому нужно было фотографировать и совмещать. О том, как делать подобное окно прокрутки или слайд-шоу, уже подробно рассказала у себя nuts (О вставке длиииииных изображений в жж) - у неё там сразу несколько методов с примерами.

Прокрутку своей книги я сделала по рецепту Сергея Степненко (stepbystep_hdr), который вычитала у nuts. Здесь у Сергея ещё целый ряд подробных примеров для разных видов прокруток: "Как вставить в пост длинную картинку с прокруткой".

Чтобы картинка прокручивалась так, как у меня, нужно в свой постинг вставить следующий код (только не в режиме "Визуальный редактор", а в режиме HTML - переключается вверху справа в рамочке текста для постинга):

<div style="overflow-x: scroll;"><img src="{image_url}" style="min-width:{image_width}px;min-height:{image_height}px" /></div>
вместо надписей в фигурных скобочках подставьте следующее:
{image_url} - ссылка на вашу картинку
{image_width} - ширина картинки
{image_height} - высота картинки

Однако, как мне кажется, это метод не совсем идеален. У моей книги сейчас 13 страниц, а она уже шириной 10 634 pix и весом больше 3Mb. Нужно будет придумать что-то другое. Например, перейти на слайд-шоу, а может разбить книгу на несколько полосок-панорам и делать для каждой отдельное окно прокрутки.

Поэтому есть и другой выход - подгружать несколько картинок: (надписи вроде [ширина картинки] нужно заменить на числа, удалив и квадратные скобки и буквы). Главное, обратите внимание, чтобы обязательно стояло white-space: nowrap - чтобы код не сворачивал картинки во много рядов, а продолжал выкладывать одну за другой:

<div style="overflow-x: scroll; width:[ширина картинки]px; white-space: nowrap;"><img src="[адрес картинки]" style="min-height:[минимальная высота картинки]px; min-width:[минимальная ширина картинки]px;" /><img src="[адрес картинки]" style="min-height:[минимальная высота картинки]px; min-width:[минимальная ширина картинки]px;" /><img src="[адрес картинки]" style="min-height:[минимальная высота картинки]px; min-width:[минимальная ширина картинки]px;" /></div>


По-прежнему хочу вас попросить не забывать ссылаться на сайт проекта. Для этого скопируйте и поставьте в конце своего постинга, если пишете о "Бесконечной книге", вот этот код (делайте это тоже в режиме HTML!):
<a href="http://endless-book.floaty.de/" target="_blank">Сайт проекта &laquo;Бесконечная книга&raquo;</a><br>
<a href="http://conjure.livejournal.com/tag/endless_book" target="_blank">Новости и трансляция книг всех участников проекта</a>

.......................................
Общая информация о проекте
Сайт проекта: книжный проект «Бесконечная книга».
Ссылки на масстер-классы для книги-гармошки: здесь.
Сообщество на фликре: An endless book
.......................................
Tags: endless_book
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 62 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →