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

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

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

Встраивание слайд-шоу в блог на Блоггер с помощью скрипта html

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


Дальше сам текст скрипта - его надо скопировать и вставить в нужное место в посте в режиме редактирования html

</div>
<div style="background: white; border: 3px solid silver; padding: 5px; text-align: center; width: 100%;">
<marquee onmouseout="this.start()" onmouseover="this.stop()" scrollamount="10" width="100%">
<img style="width: 50%;" src="ссылка на фото1" />
<img style="width: 50%;" src="ссылка на фото2" />
<img style="width: 50%;" src="ссылка на фото3" />
</marquee></div>
</textarea>
</div>

где 
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
Как вставить баннер в блог
Как вставить в блог рассылку по электронной почте
Какие кнопки счетчиков поставить в блог
Как вставить поиск по блогу

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

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

    http://beautyselective.blogspot.ru/

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

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

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

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

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

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

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

      Удалить
    2. Большое спасибо! :)

      Удалить
  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. Большое спасибо за подсказку. Программа Пикасса есть, но почему-то никогда не пользовалась как слайд-шоу. Пикасса использовала только для обработки фотографий.

    ОтветитьУдалить
  12. Вставила фотографии по третьему способу с помощью скрипта, но у меня одна в рамочке а другая внизу за рамкой. Почему???

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

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

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

Примечание. Отправлять комментарии могут только участники этого блога.

Related Posts Plugin for WordPress, Blogger...