Увеличение изображений через плагин imgBox на jQuery — Уникальные скрипты и готовые решения для сайта

Добавить в закладки

Скачать [RAR] [8 КБ]

Довольно-таки симпотный способ увеличения изображений через плагин 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>