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

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

ProtoFlow: Coverflow на Prototype

March 12th, 2008 | Category: Javascript, Prototype, Script.aculo.us | Автор: Александр

protoflowМесяц назад я писал про Imageflow - coverflow на джаваскрипте. Так вот теперь появилась альтернатива. Obaid Ahmed написал похожий скрипт при помощи Prototype и Scriptaculous - Protoflow. В отличие от Imageflow, Protoflow не зависит от сервера и будет работать хоть с PHP, хоть с Java, хоть с Rails.

protoflow

Установка довольно простая. Качаем библиотеку, подгружаем нужные javascript файлы в head и вставляем следующий маркап:

PLAIN TEXT
HTML:
  1. <div id="protoflow">
  2.   <img src="imgs/DSCN0940_91360.jpg"/>
  3.   <img src="imgs/stimme_von_oben_187192.jpg"/>
  4.   <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
  5.   <img src="imgs/farbraum_012_147508.jpg"/>
  6.   <img src="imgs/IMG_4906_199357.jpg"/>
  7.   <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
  8.   <img src="imgs/Fries_201253.jpg"/>
  9.   <img src="imgs/Fries_201253.jpg"/>
  10. </div>
  11.  
  12. <ul id=”protoCaptions” class=”protoCaptions”>
  13.   <li>Caption 1</li>
  14.   <li>Caption 2</li>
  15.   <li>Caption 3</li>
  16.   <li>Caption 4</li>
  17.   <li>Caption 5</li
  18.   <li>Caption 6</li>
  19.   <li>Caption 7</li>
  20.   <li>Caption 8</li>
  21. </ul>

Ну и немного джаваскрипта, чтобы всё заработало:

PLAIN TEXT
JavaScript:
  1. Event.observe(window, 'load', function() {
  2.  cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
  3. });

Тут можно посмотреть ДЕМО.

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

2 Comments so far

  1. adw0rd March 27th, 2008 12:41

    По сравнению с ImageFlow - ProtoFlow работает куда хуже: медленно тянется, слоиться криво. Тестил демку под FF.

  2. Dimas June 9th, 2008 13:02

    Под Opera 9.27 так же - интеракитвности не зватает, но в целом не плохо

Leave a reply