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

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

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 файл стилей:

.microGallery{
    position:relative;
    margin:30px 10px 10px 10px;
    float:left;
    font-family: Verdana;
    font-style: normal;
    font-weight: normal;
}
.microGallery img{
    margin-left:auto;
    margin-right:auto;
    border:none;
    -moz-box-shadow:0px 2px 4px #777;
    -webkit-box-shadow:0px 2px 4px #777;
    box-shadow:0px 2px 4px #777;
    display:none;
}
.description{
    background-color:#f9f9f9;
    position:absolute;
    border:1px solid #fff;
    height:40px;
    bottom:0px;
    left:5px;
    padding:3px;
    -moz-box-shadow:1px 1px 5px #aaa;
    -webkit-box-shadow:1px 1px 5px #aaa;
    box-shadow:1px 1px 5px #aaa;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;  
}
.description div{
    margin:12px 5px 5px 5px;
    color:#666;
    text-shadow:-1px 1px 1px #fff;
    font-size: 9px;
}
.nav{
    background-color:#f9f9f9;
    position:absolute;
    border:1px solid #fff;
    height:25px;
    top:-30px;
    left:5px;
    padding:3px;
    -moz-box-shadow:1px 1px 5px #aaa;
    -webkit-box-shadow:1px 1px 5px #aaa;
    box-shadow:1px 1px 5px #aaa;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;  
}
.smallGallery .nav,.smallGallery .description{
    width:105px;
}
.mediumGallery .nav,.mediumGallery .description{
    width:165px;
}
.largeGallery .nav,.largeGallery .description{
    width:225px;
}
a.thumbview{
    opacity:0.6;
    width:20px;
    height:21px;
    float:left;
    cursor:pointer;
}
a.slideshow{
    opacity:0.6;
    width:20px;
    height:21px;
    float:right;
    cursor:pointer;
}
a.play{
    background:transparent url(../images/play.png) no-repeat center center;
}
a.pause{
    background:transparent url(../images/pause.png) no-repeat center center;
}
a.grid{
    background:transparent url(../images/thumbs.png) no-repeat top left;
}
a.single{
    background:transparent url(../images/single.png) no-repeat top left;
}
a.thumbview:hover,a.slideshow:hover{
    opacity:1.0;
}
button.prev,button.next{
    float:right;
    width:22px;
    height:20px;
    cursor:pointer;
    opacity:0.6;
    outline:none;
    border:none;
}
button::-moz-focus-inner { border: 0; }
button.prev:hover,button.next:hover{
    opacity:1.0;
}
.nav button.disabled{
    opacity:0.2;
}
.nav button.disabled:hover{
    opacity:0.2;
}
button.next{
    background:transparent url(../images/arrows.png) no-repeat top left;
}
button.prev{
    background:transparent url(../images/arrows.png) no-repeat 0px -20px;
}
.images div{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    position:relative;
}
.smallGallery .images,
.mediumGallery .images,
.largeGallery .images{
    padding:10px;
    background-color:#f9f9f9;
    border:1px solid #fff;
    position:relative;
    -moz-box-shadow:1px 1px 5px #aaa;
    -webkit-box-shadow:1px 1px 5px #aaa;
    box-shadow:1px 1px 5px #aaa;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.smallGallery .images,
.smallGallery .singleImg div{
    width:102px;
    height:102px;
}
.mediumGallery .images,
.mediumGallery .singleImg div{
    width:162px;
    height:162px;
}
.largeGallery .images,
.largeGallery .singleImg div{
    width:222px;
    height:222px;
}
.smallGallery .thumbs div,
.mediumGallery .thumbs div,
.largeGallery .thumbs div{
    float:left;
    margin:2px;
    cursor:pointer;
}
.smallGallery .thumbs div{
    width:30px;
    height:30px;
}
.mediumGallery .thumbs div{
    width:50px;
    height:50px;
}
.largeGallery .thumbs div{
    width:70px;
    height:70px;
}

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 и требует переписания скрипта с поддержкой новых стандартов.