Увеличение изображений через плагин imgBox на jQuery

Разместил: Apocalypse
Опубликовано: 29 июня 2015

Довольно-таки симпотный способ увеличения изображений через плагин imgBox

Для начала посмотрите ДЕМО

Установка:

1#: В самый низ вашего CSS вставляйте:

#imgbox-loading { 
position: absolute; 
top: 0; 
left: 0; 
background: url('/images/imgbox-spinner.gif') center center no-repeat; 
cursor: pointer; 
display: none; 
z-index: 90; 
} 

#imgbox-loading div { 
background: #FFF; 
width: 100%; 
height : 100%; 
} 

#imgbox-overlay { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: #000; 
display: none; 
z-index: 80; 
} 

.imgbox-wrap { 
position: absolute; 
top: 0; 
left: 0; 
background: #FFF; 
display: none; 
z-index: 90; 
} 

.imgbox-img { 
padding: 0; 
margin: 0; 
border: none; 
width: 100%; 
height: 100%; 
vertical-align: top; 
} 

.imgbox-close { 
position: absolute; 
top: -15px; 
right: -15px; 
height: 30px; 
width: 30px; 
background: url('/images/imgbox-close.png') top left no-repeat; 
cursor: pointer; 
outline: none; 
} 

.imgbox-title { 
padding-top: 10px; 
font-size: 11px; 
text-align: center; 
font-family: Arial; 
color: #333; 
display: none; 
} 

.imgbox-bg-wrap { 
position: absolute; 
padding: 0; 
margin: 0; 
display: none; 
} 

.imgbox-bg { 
position: absolute; 
width: 20px; 
height: 20px; 
} 

.imgbox-bg-n { 
left: 0; 
top: -20px; 
width: 100%; 
background: url(/images/imgbox-bg-n.png) repeat-x; 
} 

.imgbox-bg-ne { 
right: -20px; 
top: -20px; 
background: url(/images/imgbox-bg-ne.png) no-repeat; 
} 

.imgbox-bg-e { 
right: -20px; 
top: 0; 
height: 100%; 
background: url(/images/imgbox-bg-e.png) repeat-y; 
} 

.imgbox-bg-se { 
right: -20px; 
bottom: -20px; 
background: url(/images/imgbox-bg-se.png) no-repeat; 
} 

.imgbox-bg-s { 
left: 0; 
bottom: -20px; 
width: 100%; 
background: url(/images/imgbox-bg-s.png) repeat-x; 
} 

.imgbox-bg-sw { 
left: -20px; 
bottom: -20px; 
background: url(/images/imgbox-bg-sw.png) no-repeat; 
} 

.imgbox-bg-w { 
left: -20px; 
top: 0; 
height: 100%; 
background: url(/images/imgbox-bg-w.png) repeat-y; 
} 

.imgbox-bg-nw { 
left: -20px; 
top: -20px; 
background: url(/images/imgbox-bg-nw.png) no-repeat; 
} 
</style> 
<style type="text/css"> 
#images a { 
margin-right: 14px; 
} 

#images a img { 
border: 1px solid #888;
padding: 3px; 
vertical-align: top; 
} 

#credit { 
clear: both;
margin-top: 50px; 
padding-top: 20px; 
font-size: 10px; 
border-top: 1px solid #BBB; 
font-family: Verdana; 
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

#imgbox-loading {

position: absolute;

top: 0;

left: 0;

background: url('/images/imgbox-spinner.gif') center center no-repeat;

cursor: pointer;

display: none;

z-index: 90;

}

#imgbox-loading div {

background: #FFF;

width: 100%;

height : 100%;

}

#imgbox-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #000;

display: none;

z-index: 80;

}

.imgbox-wrap {

position: absolute;

top: 0;

left: 0;

background: #FFF;

display: none;

z-index: 90;

}

.imgbox-img {

padding: 0;

margin: 0;

border: none;

width: 100%;

height: 100%;

vertical-align: top;

}

.imgbox-close {

position: absolute;

top: -15px;

right: -15px;

height: 30px;

width: 30px;

background: url('/images/imgbox-close.png') top left no-repeat;

cursor: pointer;

outline: none;

}

.imgbox-title {

padding-top: 10px;

font-size: 11px;

text-align: center;

font-family: Arial;

color: #333;

display: none;

}

.imgbox-bg-wrap {

position: absolute;

padding: 0;

margin: 0;

display: none;

}

.imgbox-bg {

position: absolute;

width: 20px;

height: 20px;

}

.imgbox-bg-n {

left: 0;

top: -20px;

width: 100%;

background: url(/images/imgbox-bg-n.png) repeat-x;

}

.imgbox-bg-ne {

right: -20px;

top: -20px;

background: url(/images/imgbox-bg-ne.png) no-repeat;

}

.imgbox-bg-e {

right: -20px;

top: 0;

height: 100%;

background: url(/images/imgbox-bg-e.png) repeat-y;

}

.imgbox-bg-se {

right: -20px;

bottom: -20px;

background: url(/images/imgbox-bg-se.png) no-repeat;

}

.imgbox-bg-s {

left: 0;

bottom: -20px;

width: 100%;

background: url(/images/imgbox-bg-s.png) repeat-x;

}

.imgbox-bg-sw {

left: -20px;

bottom: -20px;

background: url(/images/imgbox-bg-sw.png) no-repeat;

}

.imgbox-bg-w {

left: -20px;

top: 0;

height: 100%;

background: url(/images/imgbox-bg-w.png) repeat-y;

}

.imgbox-bg-nw {

left: -20px;

top: -20px;

background: url(/images/imgbox-bg-nw.png) no-repeat;

}

</style>

#images a {

margin-right: 14px;

}

#images a img {

border: 1px solid #888;

padding: 3px;

vertical-align: top;

}

#credit {

clear: both;

margin-top: 50px;

padding-top: 20px;

font-size: 10px;

border-top: 1px solid #BBB;

font-family: Verdana;

}

2#: Следующий код вставляйте после /head на нужных страницах:

<script type="text/javascript" src="/js/jquery.imgbox.pack.js"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
$("#example1-1").imgbox(); 

$("#example1-2").imgbox({ 
'zoomOpacity' : true, 
'alignment' : 'center' 
}); 

$("#example1-3").imgbox({ 
'speedIn' : 0, 
'speedOut' : 0 
}); 

$("#example2-1").imgbox({ 
'speedIn' : 0, 
'speedOut' : 0, 
'alignment' : 'center', 
'overlayShow' : true, 
'allowMultiple' : false 
}); 
}); 
</script>

$(document).ready(function() {

$("#example1-1").imgbox();

$("#example1-2").imgbox({

'zoomOpacity' : true,

'alignment' : 'center'

});

$("#example1-3").imgbox({

'speedIn' : 0,

'speedOut' : 0

});

$("#example2-1").imgbox({

'speedIn' : 0,

'speedOut' : 0,

'alignment' : 'center',

'overlayShow' : true,

'allowMultiple' : false

});

</script>

3#: Картинки с эффектом увеличения оформляем следующим образом:

1) Эффект простого увеличения:

<div id="images">
<a id="example1-1" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a> 
</div>

</div>

2) Эффект увеличения с плавным скроллом:

<div id="images">
<a id="example1-2" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a> 
</div>

</div>

3) Эффект появления с плавным появлением без скроллом:

<div id="images">
<a id="example1-3" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a> 
</div>

</div>

4) Эффект появления с затемнением заднего плана:

<div id="images">
<a id="example2-1" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a> 
</div>

</div>

Картинки из прикреплённого архива залейте в папку images, JS файл в папку js

Метки: imgBox jQuery Увеличение изображений

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Читайте также:

0 Комментарий

Межтекстовые Отзывы

Посмотреть все комментарии

Всевидящее око

Новый пост от CTYDEHT в теме Скрипт информера по месяцам

2021-02-19 13:03:48

Всевидящее око

Новый пост от Apocalypse в теме Скрипт информера по месяцам

2021-02-19 13:04:27

T-34

🥳 🚜 🚀

2021-03-20 01:09:34

Всевидящее око

Новый пост от andrey.vorobv в теме Ldonate - проблемма с подключением

2021-03-21 13:24:51

Gor

Добрый день уже замучался с данной темой , но как говориться спросишь не узнаешь

у меня есть скрипт который через js включает темную тему при нажатии кнопки

я его установил на свой сайт gor.ovh ( только в моб версии при нажатии на три полоски в верхнем углу если что можно посмотреть в респонсиве страницы )

но возникла проблема скрипт полностью работал , но при смене страницы опять включалась дефолтная тема и приходиться снова нажимать на кнопку темной темы так же при обновление страницы

как я понял нужно записывать данные в локал сторадж или куки я попробовал сделать по примерам которые были опубликованы на этом форуме ранее , нр у меня не вышло

https://jsfiddle.net/yguzhp0f/5/

<button onclick=enableDark() style="color: white;
top: 10px;
position: relative;
border-radius: 4px;
background: linear-gradient(to l

2021-03-24 11:45:54

Apocalypse

@Gor, создай тему с проблемой на форуме

2021-04-11 13:03:28

Apocalypse

Дароф, народ. Как думаете, что размещать на сайте дальше?

2021-04-24 19:24:15

Всевидящее око

Новый пост от Apocalypse в теме Ldonate - проблемма с подключением

2021-04-24 19:29:06

fapalnaapo

💋

2021-05-07 19:56:57

fapalnaapo

В конце зимы, в начале мая
Я вышел из лесУ, удерживая путь к себе домой.
Светило ярко солнце согревая,
весенний запах, приятно наполнял мой нос.
Но не успел дойти я до трамвая!
Я пукнул. И в штаны, внезапно вырвался понос

2021-05-07 20:03:43

......

Для публикации сообщений в чате необходимо авторизоваться

Читайте также:

Посетители сайта

Панель управления

Май 2021
Пн	Вт	Ср	Чт	Пт	Сб	Вс
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Увеличение изображений через плагин imgBox на jQuery

Читайте также:

Определяем, включен AdBlock или нет [Решено]

Учимся прокручивать страницу к якорю на jQuery by Apocalypse

Простой Parallax эффект для фоновой картинки на jQuery by Apocalypse

Посетители сайта

Панель управления