О том как сделать самому фото-шоу в виде книги по образцу

Вообще-то говоря я мог сделать готовую онлайн программу, которая сама сделает программу фото-шоу. Но практика показала, что для людей, которые что-то понимают, такой путь не очень привлекателен. И я сам обычно не пользуюсь готовыми программами. Намного быстрее и эффективнее просто переделывать шаблон. Этот метод хорош тем, что он унниверсален. Джаваскрипт код любого сайта открыт и его легко получить, например, в Яндекс браузере, Нажимая клавиши [Ctrl]+[U]. Эти кнопки вообще-то показывают только код страницы, но если куски кода записаны в других файлах, имена этих файлов можно кликать и видеть код в этих файлах. То есть код любого сайта легко получить и прочитать. Его также легко скопировать в любой текстовый редактор и затем переписать на свой манер.

Именно такой способ вполне пригоден для некоторых универсальных сайтов, которые выполняют четко определенную работу, то есть решают по сути одну и ту же задачу, но с разными входными данными. В коде такого сайта достаточно изменить входные данные и получится совсем другой сайт, но с таким же внешним оформлением и функционалом. Впрочем это тоже можно изменить, но в этом случае уже нужно понимать как этот код написан. Для изменения входных данных и только даже это не обязательно. В данной статье речь пойдет о программе фото-шоу в виде книги. Образец такого сайта я недавно сделал, вот ссылка на него [1]. Точнее это просто номер ссылки, все ссылки указаны внизу по номерам.

Итак кликаем на указанной ссылке и в отдельном окне запускается фото-шоу. Но нам нужен код. Нажимаем указанные выше кнопки и в отдельном окне показывается код сайта. Теперь окно с фото-шоу можно закрыть, а код надо скопировать в свой текстовый редактор, используя стандартные клавиши [Ctrl]+[A], [Ctrl]+[C] в браузере и [Ctrl]+[V] в своем редакторе. Как видим, кода совсем мало и он примитивно простой. Прежде всего надо изменить текст внутри скобок <title> ... </title>. Это заголовок сайта. Обычно он дублирует название статьи, но может быть любым на ваш вкус. Браузер показывает этот заголовок в его окне и еще он используется поисковиками при ответе на запросы. Так что это важная информация, хотя на сайте непоредственно она не показывается.

Далее стоит ссылка на файл shablon1.css . Кликаем на ссылку и видим код, записанный в этом файле. Точно так же копируем его себе в файл с таким же или другим именем. Пусть имя будет такое же. Две точки в самом начале означают, что файл надо записать не в ту папку, где записан код сайта фото-шоу, а подняться на одну папку наверх и там организовать новую папку с именем js. Для чего это сделано? Дело в том, что сайт фото-шоу записан в папку с именем phsh. И в этой папке может быть много разных файлов разных фото-шоу. И все они будут использовать один и тот же файл с именем shablon1.css . И не только они, но в других программах других папок тоже может быть использован этот файл. Вот поэтому он и выделен в отдельную папку.

Далее указан файл bgim1.gif в другой папке с названием pic. Это файл картинки, на него ссылки нет, потому что не текст. Теперь надо поступать по другому, а именно, в отдельном окне браузера записать в строку адреса полный адрес сайта и то, что стоит после двух точек, то есть ..//pic/bgim1.gif . И открыть сайт по адресу. Вместо сайта будет показана картинка. Затем надо нажать клавиши [Ctrl]+[S] и картинка будет спасена на ваш компьютер, обычно в папку с названием (Загрузки). Затем ее надо перенести в папку с названием pic, которая должна стоять в той же папке, где и папки с названиями phsh и js .

В 6-й строке указан код со ссылкой на мой файл с рекламными кнопками. Эту строку можно убрать, либо заменить на собственную рекламу. Это делается точно таким же методом редактирования шаблона. Сам сайт легко запустить по ссылке и затем посмотреть его код. В скобках <h1> ... </h1> записывается название статьи на сайте. Название можно переписать. Скобки трогать нельзя, это разметка сайта. Внутри скобок <p><b> ... </b></p> стоит текст, который будет показан над картинками фото-шоу. Это обычно какие-то пояснения или инструкции для пользователя. Следующее, что нужно изменить -- это название mp3 файла музыки. Файл музыки снова кликабельный. Если кликнуть ссылку, то музыка заиграет в отдельном окне и потом надо нажать клавиши [Ctrl]+[S], чтобы скачать файл себе на компьютер.

Я все время говорю про браузер Яндекса, в котором я работаю. В других браузерах кое-что может быть сделано иначе, но принцип общий. Однако я не советую скачивать музыку, хотя это и возможно. Вы можете выбрать любую другую музыку в файле с другим именем. Ее просто надо записать в папку с названием mp3 и изменить (исправить) название файла музыки. В 12-й строке стоит предупреждение, что файл оптимизирован под браузер Гугл Хром. Фактически я работаю с браузером Яндекса, но они все еще очень похожи, хотя с течением времени меняются. Когда-то я работал как-раз в Хроме, однако они переборщили с безопасностью и запрещают очень много всего. Мне это не нравится. Кроме того Яндекс показывает практически все форматы файлов и это реально круто.

В 13-й строке стоит ссылка на файл superbook.js . Снова нужно кликнуть ссылку, откроется код файла, его надо скопировать и сделать у себя на компьютере такой же файл с тем же названием в уже указанной выше папке с названием js . В 14-й строке есть текст (adr="...";), где вместо многоточия стоит умя конкретного сайта. Вам следует заменить его на любой другое по вашему вкусу. Этот сайт будет показываться при клике на любую картинку по время показа фото-шоу. В 15-й строке аналогично есть текст (ad="...";), где вместо многоточия стоит адрес конкретной папки в интернете (или на компьютере), где размещены все фотографии данного фото-шоу.

Указан полный адрес, потому что фотографии могут быть даже на другом сервере. Если все происходит на компьютере, то нужно указывать папку компьютера. В принципе нет никаких ограничений на указание и относительного адреса, с использованием двух точек, как было сделано выше. В 16 и 17 строках можно заменить название папки (berlin18a) на любое другое. Эта папка должна находиться внутри папки, имя которой указано переменной adr в 14-й строке. Что касается имен файлов, то в коде предполагается, что файлы имеют имена p011.jpg p012.jpg p021.jpg p022.jpg p031.jpg и так далее. То есть после буквы p двузначный номер фотографии, последняя цифра 1 означает ее правую часть, а цифра два -- левую часть. То есть справа налево, так сделана программа.

Если фотографий меньше 100, то все будет нормально работать, только во втором цикле вместо 75 надо указать реальное число ваших фотографий плюс 1. Если фотографий больше 100, то можно использовать трехзначные номера, тогда в коде в двух циклах вместо буквы p надо записать p0, вместо 75 записать 100, а для фотографий после 99-й надо указать еще один цикл типа for(k=100; k < ???; k++), где вместо ??? указать реальное число ваших фотографий плюс 1. Вот и все, если ваши фотографии имеют размер 1000*750. А если нет, то в 18-й строке вместо чисел 500 и 750 надо указать половину ширины и высоту ваших фотографий. Они все должны иметь одинаковый размер. Масштабирование не выполняется.

Еще раз хочу отметить. Можно приготовить фото-шоу для показа на компьютере. Тогда надо использовать только относительнные адреса. Во всяком случае так проще. Выход на внешнюю папку записывается специальным названием папки из двух точек. Для работы в интернете можно указывать абсолютные адреса любого сервера (любого сайта). Особенно это касается фотографий. Но можно точно так же указывать и относительные адреса, тогда закачивать фотографии на сервер нужно в строго определенном порядке относительно папки с файлом сайта фото-шоу.

Наконец последний вопрос. Удобно приготовить исходные фотографии в исходном размере. Затем их надо разрезать на две половинки, правую и левую. Это можно сделать в любом графическом редакторе методом выделения фрагмента из целой фотографии. Но если фотографий много, то вручную это делать очень долго и неприятно. Есть другой способ. Использовать ACL программу с интерпретатором vkUtility. Код этой программы показан и описан тут [2] в пятом примере. Там указана процедура. Надо скопировать код процедуры в файл с названием piccut.pro , и добавить в новой строке код (#e _picc #%). Этот файл нужно записать в папку с названием acl . Затем в папку с названием 01 нужно скопировать все фотографии.

И запустить кнопку [Player]. Выбрать нужный файл, и запустить его. В папке вместе с исходными картинками появятся их половинки. Это очень быстро и просто. Программа vkUtility сначала покажет текст выбранной программы. После нажатия клавиши [Esc] она поработает, потом выдаст меню. И в этот момент уже можно смотреть новые картинки в папке. А в меню выбрать выход. Затем половинки можно переместить в нужную папку. А оригиналы в исходную папку, где они были. Программа разрезания фотографий работает без параметров. Поэтому в папке 01 не должно быть никакиих лишних файлов и тем более файлов без картинок. Ошибка не отслеживается. На дураков нет времени. Во-всяком случае пока.

Ссылки

[1] ../phsh/berlin18a.htm

[2] ../acl/aclcode.htm