MooFlow — фотогалерея на MooTools

MooFlow — ефектна фотогалерея, яка має наступні можливості: автопоказ, автоматичне масштабування при зміні розмірів вікна, функцію повноекранного перегляду, прокрутку колесом миші та стрілками на клавіатурі, дзеркальне відображення за допомогою JavaScript, завантаження зображення за допомогою JSON, тощо.

MooFlow — фотогалерея на MooTools

Установка MooFlow

HTML:

Використовуйте атрибут title, як коротку назву (відображається в заголовку) та alt, як докладний опис. Використовуйте теґ <a> , як лінк на інший контент.

<div id="MooFlow">

    <div><img src="img1.jpg" title="Заголовок" alt="Опис" /></div>

    <p><img src="img2.jpg" title="Заголовок" alt="Опис" /></p>

    <span><img src="img3.jpg" title="Заголовок" alt="Опис" /></span>

    <a href="big/image.jpg" rel="image">
    	<img src="image.jpg" title="Заголовок" alt="Опис" />
    </a>

</div>

JavaScript:

window.addEvent('domready', function(){

  var mf = new MooFlow($('MooFlow'), {

      startIndex: 5,

      useSlider: true,

      useAutoPlay: true,

      useCaption: true,

      useResize: true,

      useWindowResize: true,

      useMouseWheel: true,

      useKeyInput: true

  });

});

Завантаження і документація

Категорія: Фотогалереї / Слайди. Теґи: , . Ви можете слідкувати за коментуванням цієї статті за допомогою RSS 2.0. Ви можете залишити коментар, або надіслати трекбек з вашого сайту.

Залишити коментар

XHTML: Ви можете використовувати ці теґи: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>