Телепорт

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

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


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

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;
}

javascript
Подключаем jQuery и сам плагин. Далее производим его инициализацию с необходимыми параметрами:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.microgallery.js"></script>
<script type="text/javascript">
    $(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 и требует переписания скрипта с поддержкой новых стандартов.


Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...