вторник, 13 декабря 2016 г.

3 способа вставить в блог слайдшоу из фотографий


Иногда возникает необходимость показать в блоге фотографии так, чтобы можно было просмотреть сразу их большое количество. Я как-то уже показывала, как можно разместить в блоге галерею, составленную из набора фотографий (здесь  - в виде таблицы, а здесь - с помощьювнешней программы InLinkz). А сегодня я расскажу, как можно организовать просмотр нескольких фотографий в виде слайдшоу: так, чтобы одна картинка автоматически сменялась другой.
Делается это очень просто, особенно если использовать готовые сервисы от "столпов" современных фотохостингов: Пикасы и/или Яндекса. Но можно пойти более сложным путем и поставить в блог свой скрипт. Как лучше, зависит от конкретной задачи. Я просто расскажу о каждом из этих трех способов подробнее.

1. Итак, самый простой способ вставить в блог слайдшоу - это воспользоваться встроенной функцией Пикасса.

Почему этот способ самый простой? Потому что для блогов на платформе Блоггер редактор Пикасса является "родным". Вставляя фотографии в блог, мы по умолчанию используем его. У каждого из пользователей Блоггер есть в Пикасса бесплатный аккунт, 15360 МБ для хранения фотографий и возможность пользоваться всеми услугами этого сервиса, включая и создание слайдшоу.
Допустим, вы хотите показать в блоге все фото ваших с детьми новогодних поделок (как это понадобилось мне для поста в моем основном блоге "Это интересно!"). Для этого вам необходимо создать новый вебальбом Пикаса и за грузить в него все нужные фотографии. Не забудьте поставить опцию доступа "Видимый для всех в интернете", чтобы изображения были доступны для просмотра. А после останется всего лишь в правом сайдбаре (колонке) нажать "Ссылка на этот альбом".
Под ней появится строчка "Встроить слайд-шоу".

После того, как на нее нажмешь, откроется окошко, в котором можно настроить параметры слайд-шоу - время задержки кадра, его размер и т.д. А внизу будет код для вставки в блог, который надо будет просто скопировать, а потом в ставить в свой блог. Если вы хотите, чтобы слайдшоу отображалось в сообщении, то вставьте код в режиме HTML в окошке редактора. Если же вы хотите, чтобы слайдшоу показывалось у вас на боковой панельке блога, то полученный код надо вставить в гаджет "HTML/Java script".

Все, слайдшоу сразу же появится в вашем блоге.
P.S. В режиме редактирования сообщения у меня вместо экрана появляется надпись от Оперы (моего браузера) "Нет плагина. Ознакомиться". Но это ничего страшного - после публикации сообщения все появится в нужном месте.



2. Встраивание слайдшоу от Яндекса.

Если у вы храните свои фото не в Пикасса, а во втором по распространенности  бесплатном фотохостинге - Яндекс. Фотки, то вам будет удобнее воспользоваться его сервисом. Процедура практически такая же. Вы создаете новый альбом и добавляете в него нужные фото.
После этого заходите в альбом, нажимаете "Слайд-шоу".

И под окошком с примером слайд-шоу выбираете "Код для вставки на сайт или в блог".

Копируете предложенный код так же как и в предыдущем способе: если надо вставить в сообщение, то в режиме HTML, если надо на сайдбар, то с помощью  гаджета "HTML/Java script".

Все параметры можно будет настроить уже в самом слайд-шоу. Вот как это будет выглядеть:



3. Встраивание слайдшоу с помощью скрипта.

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


Его HTML-код выглядит так:
где
border - толщина рамки
solid silver – цвет рамки silver
padding – расстояние между объеками внутри рамки и рамкой по вертикали
background:white – цвет фона white
width – ширина окошка, высота выравнится автоматически благодаря padding
text-align: center – выравнивание объекта внутри рамки
scrollamount – скорость движения картинок
width height – размер картинок
onmouseover=this.stop() onmouseout=this.start() – останавливает картинку при наведении на нее курсора мыши

Кроме того, существует множество профессиональных программ, в которых можно создать слайд-шоу. Вы их без труда найдете через поисковик.  Минус в том, что большинство из них сильно увеличивает время загрузки блога. Да и разобраться с их настройкой и установкой за 5 минут не получится (((  А мне бы хотелось найти что-нибудь простое, но функциональное... Может, кто-нибудь из читателей подскажет, чем пользуется он? Буду рада обсудить эти вопросы в комментариях.

0 коммент.:

Отправить комментарий