5 670 Скрипты / Slider

Плагин микро галереи

Плагин для создания микро галереи на сайте. Автопоказ, возможность добавления описания для каждого изображения, и режим листания по кругу, т.е. зацикливание.

HTML

Изображения должны быть помещены в див с классом microGallery:

<div id="mG1" class="microGallery">
    <img src="gallery1/1.jpg" alt="Птичка"/>
    <img src="gallery1/2.jpg" alt="Птица"/>
    <img src="gallery1/3.jpg" alt="Пернатый"/>
    <img src="gallery1/4.jpg" alt="Птичка"/>
</div>

CSS

Плагин имеет свой css файл стилей:

JS

Подключаем jQuery и сам плагин. Далее производим его инициализацию с необходимыми параметрами:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/jаvascript" src="jquery.microgallery.js"></script>
<script type="text/jаvascript">
    $(function() {
   
        $("#mG1").microgallery({
            menu        :true,
            size        :'large',
            mode        :'single',
            cycle       :true,
            autoplay    :true,
            autoplayTime:2000
        });
       
    });
</script>

Опции

  • menu: true - определяет будет ли показано меню всегда (true) или только при наведении на слайдер (false);
  • size: 'small' - определяем размер изображений в галереи: "small", "medium", "large" (маленькие, средние, большие);
  • mode: 'single' - режим работы галереи при инициализации: "single" или "thumbs";
  • cycle: true - определяет просмотр слайдов по кругу (по циклу) true или false;
  • autoplay: true - автопоказ изображений, true или false;
  • autoplayTime: 2000 - время в мс, через которое будет показан следйющий слайд, при включенном автоматическом показе.

Три размера изображений в галерее имеют следующие значения:

  • small - 102px
  • medium - 162px
  • large - 222px

Увы плагин не работает на версии jQuery выше 1.6 и требует переписания скрипта с поддержкой новых стандартов.

Скачать 1935Загрузок 1,01 Mb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи