Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Как сделать фото слайдшоу за 5 минут

August 23rd, 2007 | Category: API, Ajax, Google, Web20 | Автор: Александр

Снова небольшой туториал. На этот раз будем делать фото слайдшоу. Есть множество библиотек, которые генерируют слайдшоу за вас. Некоторые достаточно легко интегрировать в сайт, некоторые посложнее. Сегодня я нашёл скрипт, который просто поразил меня своей простотой.

Называется этот скрипт GFslideShow, и как можно догадаться из названия - сделали его талантливые ребята из Google. Для туториала нам необходимо: ключ для GoogleFeed API и RSS feed с фотографиями.

Подгружаем джаваскрипт:

PLAIN TEXT
HTML:
  1. <script src="http://www.google.com/jsapi/?key=ВАШ_КЛЮЧ"
  2.       type="text/javascript"></script>
  3. <script src=" http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
  4.       type="text/javascript"></script>

Создаём DIV, в котором будет наше слайдшоу:

PLAIN TEXT
HTML:
  1. <div id="slideshow" class="gss">Loading...</div>

Пишем для слайдшоу маленький CSS

PLAIN TEXT
CSS:
  1. .gss a img {border : none;}
  2. .gss {
  3.     width: 288px;
  4.     height: 216px;
  5.     color: #dddddd;
  6.     background-color: #000000;
  7.     padding: 8px;
  8. }

И наконец создаём слайдшоу объект и даём ему наш RSS feed с фотографиями:

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2.     function load() {
  3.       var samples = "http://dlc0421.googlepages.com/gfss.rss";
  4.       var options = {
  5.         displayTime: 2000,
  6.         transistionTime: 600,
  7.         linkTarget : google.feeds.LINK_TARGET_BLANK
  8.       };
  9.       new GFslideShow(samples, "slideshow", options);
  10.  
  11.     }
  12.     google.load("feeds", "1");
  13.     google.setOnLoadCallback(load);
  14.   </script>

Готовый результат можно посмотреть по этой ссылке - Google Slideshow с помощью Google Feed API.

del.icio.us Забобрить!

1 Comment so far

  1. Ирина August 29th, 2008 19:04

    Александр, плиз, помогите!
    Я вчера задавала вопрос на счет формата RSS.
    Более менее разобралась сама, но у меня все равно не работает слайд-шоу GFslideShow, описанное в вашей статье. Подскажите, пожалуйста, в чем моя ошибка. Вы ведь тоже когда-то учились и задавали вопросы гуру, ответьте, пожалуйста. Вот мой rss:
    http://bi-om.ru/photo.rss (пока пробные 2 фото)

    А вот страничка с кодом слайд-шоу:
    http://bi-om.ru/photo.html

    Ошибка: feed could not be loaded.

    Уверенна, что это из-за photo.rss, там что-то не так.
    Помогите, пожалуйста!!!

Leave a reply