Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2


    Последние комментарии
    ...
    HI-tech:
    0

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

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


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

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



    Скачать бесплатно

    Теги:

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.