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

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

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

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

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

Все, слайдшоу сразу же появится в вашем блоге.

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

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

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

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

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

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

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

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

Минус этого способа: когда у вас фотографий под сотню (как у нас в случае с поделками), то вручную их вставлять не очень-то интересно.

Самих скриптов можно найти по поиску множество. Скрипт очень простенький, но те, кто понимают HTML, могут без труда модифцировать его. А для каких-то простых целей и этого будет достаточно.

Его HTML-код выглядит так:

<div style="background: white; border: 3px solid silver; padding: 5px; text-align: center; width: 360px;">

<marquee height="350" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="350"><a href="ссылка на пост1"><img src="ссылка на фото1" /></a><a href="ссылка на пост2"><img src="ссылка на фото2" /></a><a href="ссылка на пост3"><img src="ссылка на фото3" /></a><a href="ссылка на пост4"><img src="ссылка на фото4" /></a></marquee></div>

где

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

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