Мікро Галерея Зображень на jQuery

41

Микро Галерея Изображений на 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

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

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

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

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

$(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’
});
});

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;
 висота: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;
}

.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;
висота: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{
ширина: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="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />
</div>



За допомогою параметра id=”mG1″ ми визначаємо один з трьох варіантів нашій галереї.
Всі файли зображень, ви можете розмістити в папці з галереєю, або в окремій, при цьому не забувайте прописувати правильний шлях до зображення.
Якщо нічого не пропустив, то на цьому мабуть все!

ДемоСкачать

Окреме спасибі За увагу!

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

З Повагою, Андрій .

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