Slide Show для блога, простые и сложные слайд-шоу

<<

BloggerForum

Аватара пользователя

Автор темы

Сообщения: 132

Зарегистрирован: 01 мар 2011, 23:43

Благодарил (а): 37 раз.
Поблагодарили: 23 раз.

Сообщение 08 апр 2011, 23:06

Slide Show для блога, простые и сложные слайд-шоу

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

Способ первый - самый простой!
Демо: Смотреть
Переходим на сайт slide.com
Загружаем картинки любым удобным способом:
zagruzka-kartinok.PNG

Как видно из скриншота, можно загрузить:
  • со своего компьютера,
  • указав ссылку на картинку, например, которая находится в веб-альбоме Picasa,
  • с Facebook и другие службы, которые не особо популярны у нас.
После загрузки фотографий, они появятся в окне слайдера, дальше тыкаем по всяким настройкам, там очень много разных, добиваемся нужного результата, задаем размер самого слайдера, который вам нужен. Сохраняем. На следующем этапе ещё кое-какие настройки, опять сохраняем.
После второго сохранения попадаем на страницу с инструкциями, как загрузить слайд в блог. Есть инструкция и для Blogger.
publikatciya-clide-show.PNG

Копируем код слайдера и вставляем в сообщение блога или в другое необходимое место.

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

Способ второй и третий - посложнее, но покрасивее.
Для создания слайд шоу есть специальные десктопные программы. Скачать их можно по ссылкам сайт 1, сайт 2. На указанных сайтах есть платные версии программы для профессионального использования, а есть бесплатные, с небольшим функционалом, но вполне достаточным, чтобы сделать собственное слайд шоу для блога. Ссылки дала сразу на скачивание программ. Чтобы скачать программы на свой компьютер надо указать свой адрес почты.

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

Заранее создаем на своем компьютере папку, не забудьте, где именно вы ее создаете, в нее мы будем загружать наше слайд шоу.
После того как вы наиграетесь с настройками, жмем на кнопку Опубликовать. Попадаем на вкладку, где будет предложен метод публикации.
Выбираем самый первый пункт Опубликовать в папку:
publikatciya-slideshow.PNG

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

Теперь начинается самый сложный этап. Будьте очень внимательны!

Слайд шоу с помощью программы WOW Slider

Шаг первый.
Открываем папку, в которую сохранили свое слайд шоу. В папке будет файл index.html и две папки data и engine.
Открываем папку data, в ней все наши картинки. Нам нужно их загрузить в свой веб-альбом на Picasa.

Далее открываем папку engine, в которой лежат ещё несколько картинок. Количество картинок и их названия определяются созданным вами слайд шоу, поэтому я не знаю, что будет у вас. Их также надо загрузить в веб-альбом.
Далее нужно будет у каждой картинки скопировать ее URL адрес.

Шаг второй.
В папке engine находим файл style.css, открываем его в текстовом редакторе. В этом файле нужно заменить адреса картинок на те, которые вы только что загружали в веб-альбом именно из этой же папки.
Все адреса картинок будут выглядеть так:
  Код:
background-image: url(./bg.png);

Необходимо ./bg.png заменить на URL адрес, который соответствует этой картинке.
Должно получиться, примерно, следующее:
  Код:
background-image: url(http://lh6.googleusercontent.com/_G92voTj-yF0/TZ9EbG82dPI/AAAAAAAABaw/lUkscrZpOpA/bg.png);

Из адреса картинки в протоколе https можно удалить букву s.

Шаг третий.
Далее файл style.css и два других файла, которые находятся в папке engine - jquery.js и script.js размещаем в интернете. Для этого подойдут:
Сайт Google, статья на моем блоге о том, как создать сайт и загрузить файл.
Сайт на .narod.ru - загружайте именно в мастерской, если у вас уже есть такой сайт.
В своем примере я буду использовать сайт Google. После загрузки файлов и копирования ссылок на файлы, сами ссылки выглядят так:
  Код:
https://sites.google.com/site/seobiblioteka/jquery.js?attredirects=0&d=1
https://sites.google.com/site/seobiblioteka/script.js?attredirects=0&d=1
https://sites.google.com/site/seobiblioteka/style.css?attredirects=0&d=1

Удаляем из протокола s, удаляем все, что начинается со знака вопроса. Должно получиться так:
  Код:
http://sites.google.com/site/seobiblioteka/jquery.js
http://sites.google.com/site/seobiblioteka/script.js
http://sites.google.com/site/seobiblioteka/style.css

На этом этапе мы проделали всю подготовительную работу! Осталось совсем чуть-чуть.

Шаг четвертый.
Возвращаемся к папке, в которую мы сохраняли слайд шоу. Там остался последний файл, который мы не трогали, index.html.
Открываем его в редакторе. Находим такой код:
  Код:
<link rel="stylesheet" type="text/css" href="engine/style.css" media="screen" />
   <style type="text/css">a#vlb{display:none}</style>
   <script type="text/javascript" src="engine/jquery.js"></script>

Меняем адреса файлов style.css и jquery.js на те, которые мы получили после загрузки на сайт Google. Вставляем весь этот код в шаблон блога перед тегом </head>

Возвращаемся к файлу index.html и находим в нем код:
  Код:
<script type="text/javascript" src="engine/script.js"></script>

Меняем адрес файла script.js на адрес, полученный после загрузки на сайт Google.
Идем в шаблон блога, находим тег </body> и перед ним вставляем код.
Сохраняем шаблон.

Шаг пятый - последний.
Возвращаемся к файлу index.html, вычленяем из него код, который примерно будет выглядеть так:
  Код:
   <div id="wowslider-container">
   <div id="wowslider-images">
<a href="#"><img src="data/images/p1020104.jpg" alt="P1020104" title="P1020104" id="wows0"/></a>
<a href="#"><img src="data/images/p1020106.jpg" alt="P1020106" title="P1020106" id="wows1"/></a>
</div>
<div class="ws_bullets">
<a href="#wows0" title="P1020104"></a>
<a href="#wows1" title="P1020106"></a>
</div>
<a id="vlb" href="http://wowslider.com">jQuery Slider Easing by WOWSlider.com v1.1</a>
   <div id="wowslider-shadow"></div>
   </div>

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

Меняем все адреса картинок на те, которые мы скопировали с картинок в веб-альбоме Picasa, после их загрузки. Для скрипта порядок картинок не важен. Но если вы специально добивались определенной последовательности смены изображений, то и вставлять нужно адреса картинок в точном соответствии с их названиями.

Каждая строчка с адресом картинки будет выглядеть, примерно, так:
  Код:
<a href="#"><img src="http://lh4.googleusercontent.com/_G92voTj-yF0/TZ9BRrqqVAI/AAAAAAAABZc/qCPE9gFFG-4/p1020107.jpg" alt="P1020104" title="P1020104" id="wows0"/></a>


Далее, если вы не хотите, чтобы внизу слайдера была ссылка на авторов программы, удаляем строчку:
  Код:
<a id="vlb" href="http://wowslider.com">jQuery Slider Easing by WOWSlider.com v1.1</a>


Если вы обратили внимание, у каждой картинки в слайд шоу есть ссылка. Вы можете в этом слайд шоу использовать картинки из своих статей, а в ссылке указать адреса своих статей.

Все, ваше слайд-шоу полностью готово ко вставке в блог!

А вот куда вставлять, вопрос индивидуальный. Полученный код можно вставить в сам шаблон блога, можно в виджет, можно в сообщение блога. Можно настроить его отображение только на главной, используя условную конструкцию. Но об этом позже, или в другой теме, или можете спрашивать в комментариях.
Также, позже уделю внимание третьей программе и пока ничего не сказано про четвертую, на мой взгляд, самую интересную ;) .
У вас нет необходимых прав для просмотра вложений в этом сообщении.
<<

PANIC

Аватара пользователя

Сообщения: 42

Зарегистрирован: 11 апр 2011, 13:16

Благодарил (а): 0 раз.
Поблагодарили: 2 раз.

Сообщение 11 апр 2011, 13:36

Re: Slide Show для блога, простые и сложные слайд-шоу

Спасибо! как раз подыскиваю Slide Show для блога, чтобы акцентировать внимание на конкретные статьи (поэтому важно, чтобы была картинка с ссылкой и названием статьи, а также чтобы можно было "управлять" слайдами мышкой).
первый способ , как понимаю, не подходит.
второй - уже интереснее. постараюсь внешне наиболее привлекательный для себя подобрать. надеюсь, никакие библиотеки подключать не придется.
буду ждать остальных))
<<

BloggerForum

Аватара пользователя

Автор темы

Сообщения: 132

Зарегистрирован: 01 мар 2011, 23:43

Благодарил (а): 37 раз.
Поблагодарили: 23 раз.

Сообщение 11 апр 2011, 13:40

Re: Slide Show для блога, простые и сложные слайд-шоу

PANIC писал(а):надеюсь, никакие библиотеки подключать не придется.

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

PANIC

Аватара пользователя

Сообщения: 42

Зарегистрирован: 11 апр 2011, 13:16

Благодарил (а): 0 раз.
Поблагодарили: 2 раз.

Сообщение 11 апр 2011, 14:04

Re: Slide Show для блога, простые и сложные слайд-шоу

у меня с библиотеками (вроде той, что использовалась для предложенным Вами таб-меню) некоторые скрипты не работают. поэтому я их избегаю. я планирую менять дизайн, так что присматриваю разные варианты.
<<

BloggerForum

Аватара пользователя

Автор темы

Сообщения: 132

Зарегистрирован: 01 мар 2011, 23:43

Благодарил (а): 37 раз.
Поблагодарили: 23 раз.

Сообщение 11 апр 2011, 14:32

Re: Slide Show для блога, простые и сложные слайд-шоу

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

Mister Mauzer

Аватара пользователя

Сообщения: 51

Зарегистрирован: 11 апр 2011, 14:29

Откуда: Санкт-Петербург

Благодарил (а): 6 раз.
Поблагодарили: 2 раз.

Сообщение 11 апр 2011, 15:07

Re: Slide Show для блога, простые и сложные слайд-шоу

А я на Picasa сделал слайд-шоу и вставил его себе в блог. Прикольно получилось. Всё работает.
МойБЛОГ ОФИЦЕРА. - это блог о службе ратной.
<<

BloggerForum

Аватара пользователя

Автор темы

Сообщения: 132

Зарегистрирован: 01 мар 2011, 23:43

Благодарил (а): 37 раз.
Поблагодарили: 23 раз.

Сообщение 11 апр 2011, 15:27

Re: Slide Show для блога, простые и сложные слайд-шоу

Mister Mauzer
Да, можно сделать слайд-шоу из пикассы, но, во-первых, его невозможно настроить под свой дизайн, нельзя сделать, чтобы фотографии были большими, во-вторых, сам функционал шоу (как сменяются картинки и др.) ограничен по сравнению, например, со вторым способом, описанным в этой статье.
<<

astrelas

Сообщения: 2

Зарегистрирован: 08 сен 2011, 15:33

Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 08 сен 2011, 16:38

Re: Slide Show для блога, простые и сложные слайд-шоу

Далее, если вы не хотите, чтобы внизу слайдера была ссылка на авторов программы, удаляем строчку:
Код:
<a id="vlb" href="http://wowslider.com">jQuery Slider Easing by WOWSlider.com v1.1</a>

Удалилась только ссылка, а надпись то никак что ли убрать нельзя? :(
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 08 сен 2011, 17:51

Re: Slide Show для блога, простые и сложные слайд-шоу

К сожалению, я не знаю, как ее убрать. Эта ссылка находится внутри файла script.js в строке 21:
  Код:
var t="WOWSlider.com";

Но при этом, точно известно, что она не видна поисковикам. Если посмотреть в инструментах для вебмастера Google как Googlebot видит страницу, то видно, что он не видит этой ссылки. Вот кусок содержимого виджета со слайдером именно в том виде, как его видит Google
  Код:
<div class='widget-content'>
<div id="wowslider-container">
<div id="wowslider-images">
<a href="#"><img src="http://lh4.googleusercontent.com/_G92voTj-yF0/TZ9BRrqqVAI/AAAAAAAABak/oyygI0feRhs/p1020107.jpg" alt="P1020104" title="P1020104" id="wows0"/></a>
<a href="#"><img src="https://lh3.googleusercontent.com/_G92voTj-yF0/TZ9BRo9ZRwI/AAAAAAAABak/W2__31WtpCc/p1020106.jpg" alt="P1020106" title="P1020106" id="wows1"/></a>
<a href="#"><img src="https://lh5.googleusercontent.com/_G92voTj-yF0/TZ9BRj7zToI/AAAAAAAABak/v8Ae7D9oyrE/p1020104.jpg" alt="P1020107" title="P1020107" id="wows2"/></a>
<a href="#"><img src="https://lh3.googleusercontent.com/_G92voTj-yF0/TZ9BSHtPPzI/AAAAAAAABak/qjYK-iLVL-w/p1020109.jpg" alt="P1020109" title="P1020109" id="wows3"/></a>
<a href="#"><img src="https://lh6.googleusercontent.com/_G92voTj-yF0/TZ9BSAz6mbI/AAAAAAAABak/6BKH-ebhC4Y/p1020111.jpg" alt="P1020111" title="P1020111" id="wows4"/></a>
<a href="#"><img src="https://lh5.googleusercontent.com/_G92voTj-yF0/TZ9BSEql0oI/AAAAAAAABak/6JX_i1Ne_S8/p1020112.jpg" alt="P1020112" title="P1020112" id="wows5"/></a>
<a href="#"><img src="https://lh6.googleusercontent.com/_G92voTj-yF0/TZ9BSsgY64I/AAAAAAAABak/uaovtfrfpr8/p1020113.jpg" alt="P1020113" title="P1020113" id="wows6"/></a>
<a href="#"><img src="https://lh3.googleusercontent.com/_G92voTj-yF0/TZ9BSsf5c7I/AAAAAAAABak/3baPHaJqUjs/p1020114.jpg" alt="P1020114" title="P1020114" id="wows7"/></a>
<a href="#"><img src="https://lh6.googleusercontent.com/_G92voTj-yF0/TZ9BSy-_IiI/AAAAAAAABak/HzeFpSyEXR8/p1020115.jpg" alt="P1020115" title="P1020115" id="wows8"/></a>
<a href="#"><img src="https://lh3.googleusercontent.com/_G92voTj-yF0/TZ9BS7g04mI/AAAAAAAABak/lf5z-hTOcmg/p1020117.jpg" alt="P1020117" title="P1020117" id="wows9"/></a>
<a href="#"><img src="https://lh4.googleusercontent.com/_G92voTj-yF0/TZ9BTMFg0bI/AAAAAAAABak/uwZcLn0DZdo/p1020119.jpg" alt="P1020119" title="P1020119" id="wows10"/></a>
<a href="#"><img src="https://lh3.googleusercontent.com/_G92voTj-yF0/TZ9BTUW2BdI/AAAAAAAABak/nAEY_jyfpC4/p1020120.jpg" alt="P1020120" title="P1020120" id="wows11"/></a>
<a href="#"><img src="https://lh5.googleusercontent.com/_G92voTj-yF0/TZ9BTa_MmbI/AAAAAAAABak/VchqcApIiJQ/p1020121.jpg" alt="P1020121" title="P1020121" id="wows12"/></a>
<a href="#"><img src="https://lh5.googleusercontent.com/_G92voTj-yF0/TZ9BTp5DLGI/AAAAAAAABak/xN6X0wtQpXE/p1020123.jpg" alt="P1020123" title="P1020123" id="wows13"/></a>
<a href="#"><img src="https://lh4.googleusercontent.com/_G92voTj-yF0/TZ9BTxK5M7I/AAAAAAAABak/uaWmzlP6bfU/p1020124.jpg" alt="P1020124" title="P1020124" id="wows14"/></a>
<a href="#"><img src="https://lh5.googleusercontent.com/_G92voTj-yF0/TZ9BUJpZYNI/AAAAAAAABak/bnb7VgQ4_po/p1020126.jpg" alt="P1020126" title="P1020126" id="wows15"/></a>
<a href="#"><img src="https://lh6.googleusercontent.com/_G92voTj-yF0/TZ9BUJkiiTI/AAAAAAAABak/tbS7JkBBXd4/p1020127.jpg" alt="P1020127" title="P1020127" id="wows16"/></a>
</div>
<div class="ws_bullets">
<a href="#wows0" title="P1020104"></a>
<a href="#wows1" title="P1020106"></a>
<a href="#wows2" title="P1020107"></a>
<a href="#wows3" title="P1020109"></a>
<a href="#wows4" title="P1020111"></a>
<a href="#wows5" title="P1020112"></a>
<a href="#wows6" title="P1020113"></a>
<a href="#wows7" title="P1020114"></a>
<a href="#wows8" title="P1020115"></a>
<a href="#wows9" title="P1020117"></a>
<a href="#wows10" title="P1020119"></a>
<a href="#wows11" title="P1020120"></a>
<a href="#wows12" title="P1020121"></a>
<a href="#wows13" title="P1020123"></a>
<a href="#wows14" title="P1020124"></a>
<a href="#wows15" title="P1020126"></a>
<a href="#wows16" title="P1020127"></a>
</div>
<div id="wowslider-shadow">
</div>
</div>
</div>
<div class='clear'></div>
<<

astrelas

Сообщения: 2

Зарегистрирован: 08 сен 2011, 15:33

Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 08 сен 2011, 18:15

Re: Slide Show для блога, простые и сложные слайд-шоу

а в папке engine нет ни одного файла изображений...))) :-(
След.

Вернуться в Скрипты для Blogger

Кто сейчас на конференции

Зарегистрированные пользователи: Google [Bot], Google Feedfetcher

Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo