Увеличение изображений через плагин 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

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

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

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

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

Декабрь 2020
Пн	Вт	Ср	Чт	Пт	Сб	Вс
	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

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

Стильный MP3 преер на HTML5, CSS3 и jQuery

Неплохая галерея изображений через плагин UvumiGallery на jQuery

Ловим позицию курсора в текстовых полях на jQuery

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

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