вторник, 14 января 2014 г.

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 минут не получится (((  А мне бы хотелось найти что-нибудь простое, но функциональное... Может, кто-нибудь из читателей подскажет, чем пользуется он? Буду рада обсудить эти вопросы в комментариях.

Что еще полезного можно вставить в блог, читайте здесь:
Как вставить презентацию в блог
Как вставить после поста ссылки на похожие посты с помощью LinkWithin
Как вставить счетчик посещений с флагами Flagcounter
Как вставить баннер в блог
Как вставить в блог рассылку по электронной почте
Какие кнопки счетчиков поставить в блог
Как вставить поиск по блогу

27 комментариев:

  1. Как всегда полезная информация на заметку, спасибо))

    http://beautyselective.blogspot.ru/

    ОтветитьУдалить
  2. Спасибо, у вас всегда интересненько)

    ОтветитьУдалить
  3. Татьян здравствуйте, подскажите, как в блоге отразить активных ПЧ на боковой панельке, допустим первые 5 человек,каким гаджетом воспользоваться??

    ОтветитьУдалить
  4. Спасибо огромное! Отличный материал!

    ОтветитьУдалить
  5. Спасибо !!! а возможно ли сделать окошко слайд-шоу больше по размеру???

    ОтветитьУдалить
  6. Ответы
    1. Когда вы получаете html-код слайд-шоу (первые два способа) или пишите его сами (третий способ), найдите среди параметров в нем width и hight - это и есть ширина и высота окна. Исправьте ее по своему усмотрению.

      Удалить
  7. Анонимный23 мая 2014 г., 23:29

    Здравствуйте, подскажите, пожалуйста, как сделать презентацию постов на главной страничке, например, как в сайте Марты Стюарт http://www.marthastewart.com/1072704/cook-5-19-14
    Спасибо.

    ОтветитьУдалить
    Ответы
    1. То, что вы имеете ввиду, называется "слайдер". Я как раз сейчас раздумываю, вставлять его в блог и если да, то какой. Поэтому, если у меня что-то получится, обязательно напишу пост с подробностями. А пока попробуйте найти информацию о слайдерах в поисковике.

      Удалить
    2. Анонимный27 мая 2014 г., 23:57

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

      Удалить
  8. Слайд-шоу -отличный выход, когда фото очень много надо разместить! Спасибо за подсказку!!!
    Таня, а ты не знаешь как вставить в сообщение документ ворд?

    ОтветитьУдалить
    Ответы
    1. Рада, что пригодится :)
      Насчет файла ворд: смотря, зачем это нужно. Если просто передать файл, то можно разместить его, например, на Яндекс Диске, а в блоге дать ссылку для скачивания. Если же вас интересует именно сам текст, то его можно просто скопировать в ворде и вставить в сообщение блога. А если нужны какие-то специфичные детали оформления (таблицы, диаграммы), то можно сделать принтскрины нужных страниц документа в ворде и вставить их в блог как изображения.

      Удалить
  9. Да-да, таблица! Про принскрины я подумала, только как их делать не знаю. Вернее, нажимаю кнопку prt sc, а ничего не выходит. Я что-то делаю не так?

    ОтветитьУдалить
    Ответы
    1. Когда вы нажимаете prt scr, снимок экрана (в виде файла с расширением bmp) попадает в клипборд. После этого переключитесь в какую-нибудь графическую программу (например ту, которой вы просматриваете фото) и нажмите ctrl-v. Файл со снимком экрана вставится.
      Если у вас, как у меня, на компьютер установлена Пикасса, то тогда можно просто при включенной Пикассе нажать prt scr - в этот момент выскочит маленькое окошко с сообщением "Снимок экрана сохранен. Нажмите для просмотра", вы по нему щелкните - и увидите свой сохраненный файл.

      Удалить
    2. Нажимаете на клавиатуре prt scr, затем открываете программу Paint, нажимаете "вставить", редактируете, сохраняете в формате JPEG- снимок готов.

      Удалить
  10. У меня тоже Пикасса. Целый час билась с кнопками вс включенной Пикассой, ничего не выходит.И даже в Хром есть специальная функция по захвату экрана- не работает. А когда-то. я помню, получалось. Может это где-то настраивается?

    ОтветитьУдалить
    Ответы
    1. Нет, вряд ли это у вас какие-то настройки. Не видя, трудно что-то посоветовать, но скорее всего это связанно с вашей клавиатурой. Может, у вас какая-то "навороченная" модель и есть переключатель на функциональные кнопки отдельно? Что-то типа "Fn" (function) или подобное? Проверьте, работают ли у вас кнопки F1, F2 и т.д. Вызывают они что-то? Тогда и PrtScr должна работать.

      Удалить
    2. Таня, почему на вы))
      Да, на клавиатуре есть fn. Но я и обычную подключала. В руководстве пользователя тоже написано , PrtScr для снимка экрана. Я понимаю, так трудно узнать причину. Но я очень благодарна тебе за отклик! Когда узнаю причину, по стараюсь сюда написать))

      Удалить
    3. Обыкновенные "Ножницы" из Windows чем вам не нравятся?

      Удалить
  11. Большое спасибо за подсказку. Программа Пикасса есть, но почему-то никогда не пользовалась как слайд-шоу. Пикасса использовала только для обработки фотографий.

    ОтветитьУдалить

Чтобы оставить комментарий*, напишите текст в окошке и выберите в "Подписи комментария" профиль из любого вашего аккаунта. Если вы нигде не зарегистрированы, выбирайте Имя/URL и просто вводите свое имя - оно отобразится в подписи.

*Оставляя комментарий вы тем самым подтверждаете, что даете свое согласие на обработку своих персональный данных. См. Политика конфиденциальности

Related Posts Plugin for WordPress, Blogger...