Главная » jQuery » Микро Галерея Изображений на jQuery.

Микро Галерея Изображений на jQuery

Микро Галерея Изображений на  jQuery

На страницах сайтов и блогов, места как всегда не хватает, хочется разместить информации много и все сразу, остро встает вопрос о размещении большого количества изображений в виде миниатюр, как дополнение к общему содержанию. Поэтому сегодня, давайте рассмотрим интересный способ создания миниатюрной , которая не займет много места и отлично впишется в боковой колонке любого сайта.
Следующий jQuery плагин преобразовывает ряд изображений в крошечную галерею несколькими вариантами. Навигационный блок может быть видимым, или скрытым и выдвигаться только при наведении. В общей сложности девять миниатюр показывается при предварительном просмотре в блоке. Плагин автоматически изменит размеры согласно выбранному варианту галереи.
 
Микро - галерея изображений с помощью jQuery
 
По заведенной традиции посмотрите на пример работы всех вариантов :

Параметры плагина:

* menu: Определяет, если меню должно быть видимо (true) или только появляться, при наведении на галерею (false); .
* size: Размер галереи изображения: «маленький» (small), «средний»(medium) или «большой»(large);
* mode: способ вывода в галерее изображения: “single” или “thumbs”;

Три варианта галереи определяют следующие параметры (максимальная высота и ширина):

* small:102 px
* medium:162 px
* large: 222 px

C параметрами разобрались, теперь рассмотрим, что необходимо сделать для работы галереи.

1. HTML

Подключим к нашему документу фреймворк . Для этого между тегами head пропишем следующий код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.microgallery.js" type="text/javascript"></script>

Далее нам понадобится такой скрипт:

<script type="text/javascript">
      $(function() {
        $("#mG1").microgallery({
            menu:true,
            size:'small',
            mode:'single'
            });
        $("#mG2").microgallery({
            menu:true,
            size:'medium',
            mode:'thumbs'
            });
        $("#mG3").microgallery({
            menu:false,
            size:'large',
            mode:'single'
            });
      });
</script>

2. CSS

В отдельной таблице стилей CSS сконфигурированы стили для нашей галереи. Вы можете экспериментировать с параметрами по своему усмотрению:

.microGallery{
    position:relative;
    margin:30px 10px 10px 10px;
    float:left;
}
.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;
}
.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{
    width:105px;
}
.mediumGallery .nav{
    width:165px;
}
.largeGallery .nav{
    width:225px;
}
a.thumbview{
    opacity:0.6;
    width:20px;
    height:21px;
    float:left;
    cursor:pointer;
}
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{
    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;
}

Для того чтобы подключить таблицу стилей, в документе между тегами head необходимо прописать следующий код:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

Не забывайте указывать правильный путь до файла стилей .css вашей галереи, в примере указана папка с исходниками.

3. HTML

Ну и наконец сами изображения поместим в блок div с классом “microGallery” в то место на странице, где бы вам хотелось видеть галерею:

<div id="mG1" class="microGallery">
    <img src="gallery/2.jpg" alt="" />
    <img src="gallery/3.jpg" alt="" />
    <img src="gallery/4.jpg" alt="" />
    <img src="gallery/5.jpg" alt="" />
</div>

С помощью параметра id="mG1" мы определяем один из трех вариантов нашей галереи.
Все файлы изображений, вы можете разместить в папке с галереей, или в отдельной, при этом не забывайте прописывать правильный путь к картинке.
Если ничего не пропустил, то на этом пожалуй все!

За внимание отдельное спасибо!

Источник:tympanus.net

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. Добрый день!

    Ваша галерея-микро — это то, что сегодня ищу. Но увы — ссылка не работает.

    Не могли бы Вы помочь?

    Буду очень признателен.

    Ответить
    • driver:

      Спасибо за отзыв.

      Ссылку для скачивания поправил, будут вопросы по работе плагина пишите, чем смогу помогу.

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru