http://abclass.ru/js/slybox-1.1/js/slybox.js

1// вспомогательные объекты
2var slybox = {
3color : "#fff"
4}
5// вспомогательные объекты
6var slypreload = new Array();
7var errorsrc = new Object();
8
9$(function(){
10	
11	for(i = 0; i < $(".minislybox").length; i++) {
12	slypreload[i] = false
13	}
14	// для быстрой генерации элементов
15	$("body").append('<div id="slyload"><div id = "slyloader"></div><div class="unit-ratingdemo"></div><div class="topslydemo"></div><div id = "slyprev"></div><div id = "slynext"></div><div class="loadingdemo"></div></div>');
16
17$("body").click(function(event) {
18	if($("#slyconteiner").attr('terget') == '1'){
19	
20		if(event.target.id =='slyshadow'){
21	
22		delshadow()
23	
24		}
25	}
26});
27
28
29/* внутри функции attevent - содержится  обработчик hendler события onload(load) для изображения
30она принемает два параметра - newim - объект нового изображения и параметр e - объект содержащий
31информацию об изображении первью (комментарий, src максимального изображения) */
32
33function attevent(newim,e){
34	// обработчик события onload(load)
35
36	function hendler()
37	{
38	if(!errorsrc.error)	$('.sscontainer').append('<img id = "bigimg" src='+newim.src+'></img>');
39	else {
40		$('.sscontainer').append('<div id = "bigimg" class="errorbigimg">'+errorsrc.des+'</div>');
41		$('.sscontainer').next().hide();
42	
43	}
44	$("#slyconteiner").bind('mouseleave',mouseouthandler);
45	$("#slyconteiner").bind('mouseenter',mouseoverhandler);
46	// эффект затемнения - эффект сокрытия элементов страницы при показе увеличенного изображения
47	// Получаем высоту всей старницы для установления свойства height элемента 
48	// создающего эффект затемнения
49	
50	function getDocumentHeight() 
51	{  
52	return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollHeight : document.documentElement.scrollHeight);  
53	}  
54
55	// Получаем ширину всей старницы для установления свойства width элемента 
56	// создающего эффект затемнения
57	function getDocumentWidth() {  
58	return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollWidth : document.documentElement.scrollWidth);  
59	} 
60	var iml = document.getElementById("slyconteiner").clientWidth;
61	$("#slycommenttext").text($(".minislybox[active='active']").attr('alt')).css({'width':iml-20});
62	var imt = document.getElementById("slyconteiner").clientHeight;
63	
64	bh = (imt > document.documentElement.clientHeight) ? getDocumentHeight() + 10 : getDocumentHeight();
65	bw = (iml > document.documentElement.clientWidth) ? getDocumentWidth() + (iml - document.documentElement.clientWidth) : getDocumentWidth();
66
67
68	
69	$(document.body).append('<div id = "slyshadow" style="width:'+bw+'px;height:'+bh+'px;"></div>');
70    
71	// Прогрессбар - скрываем его так как изображения полностью загрузилось
72	// Прогрессбар является элементом div, содержащим изображение, изменить его  можно
73	// изменив параметр  background:url('ajax-loader.gif');  
74	$('#slyload').hide();
75
76	
77	var imbt = document.documentElement.clientHeight;
78	var offset = $(document).scrollTop();
79	
80	// центрирование изображения по высоте и по ширине body
81	var centerimgh = (imt > document.documentElement.clientHeight) ?  10 : (imbt/2) - (imt/2);
82	var centerimg = Math.abs((bw/2) - (iml/2)); 
83	tlw = $('.tl').next().width();
84	$('.tl').next().width(tlw-21);
85	$('.bl').next().width(tlw-21);
86	$('.bagie').width(iml-21);
87	
88	// текст комментария не должен выходить 
89	
90	//alert('('+$('#slyconteiner').height()+')-' + document.documentElement.clientHeight);
91	// баг в ie 6 7
92	$(".topsly,.botsly,.slymaincontainer,.rightsly").css({'width':iml});
93
94	
95	if($(".minislybox[active='active']").attr('alt')=='') $("#slycommenttext").css({'height':"10px"});
96
97	// эфекты 
98	$("#slyconteiner").hide().fadeOut('fast').css({'left':centerimg+'px','to

98p':offset + centerimgh+'px'}).fadeIn('fast',function(){$("#slyconteiner").attr('terget','1');});
99	
100	var act = $(".minislybox").index($(".minislybox[active='active']"));
101	slypreload[act] = true
102
103	if(!slypreload[act+1]) {
104		if ($(".minislybox").length > act + 1) {
105			e = act+1;
106			nextnewImnext = new Image();
107			nextnewImnext.src = $(".minislybox:eq("+e+")").attr("src").replace(/_s/ig,"");
108			slypreload[e] = true;
109			
110			}
111	}		
112	if (!slypreload[act-1]) {	
113	e = act-1;
114			if(e >= 0) {
115			nextnewImnext = new Image();
116			nextnewImnext.src = $(".minislybox:eq("+e+")").attr("src").replace(/_s/ig,"");
117			}
118			slypreload[e] = true;
119			}
120
121		
122	
123	}
124
125	function hendlere(){
126	errorsrc = {'error':true,'des':'Ошибка: отсутствует увеличенное изображение!'}
127	hendler()
128	}
129	errorsrc = {'error':false}
130	// кроссбраузерный обработчик 
131	$(newim).load(hendler);
132	$(newim).error(hendlere);
133}
134
135// функция bigimg основная функция для создания нового изображения и удаления предыдущего 
136// функция принемает один параметр (e) - содержащий src изображения
137function bigimg(e)
138{
139
140	$("#slynext,#slyprev,#slycomment,#slyconteiner,.slymaincontainer,.sscontainer").remove();
141
142	
143	$('body').append('<div id = "slyconteiner"><div class="topsly"><div class="tlsly"></div><div class="bagie" ></div><div class="trsly"></div></div><div class="slymaincontainer"><div class="sscontainer" ></div><div id = "slycomment" style="background:'+slybox.color+'"><div id = "slyclose"></div><div id = "slycommenttext" style="background:'+slybox.color+'"></div></div></div><div class="botsly"><div class="blsly"></div><div class="bagie"></div><div class="brsly"></div></div><div id = "slyprev"></div><div id = "slynext"></div></div>');
144	$(".slymaincontainer,.bagie").css({"background-color":slybox.color});
145	
146	if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent)) {
147	
148	$($("#slyclose")).fixPNG($("#slyclose"));
149	$($("#slyload")).fixPNG($("#slyload"));
150	}
151	//функци с элементом canvas для создания уголков
152	function createCorner(b) {
153
154    var a = $('.'+b);
155	a.width("12px");
156	a.height("12px");
157	var d = 12,
158	e = 12;
159
160	position = {
161	top: b.charAt(0) == "t",
162	left: b.charAt(1) == "l"
163	};
164	
165		
166	var canvas = document.createElement('canvas');
167    $(a).append(canvas);
168	var G_vmlCanvasManager;
169
170	// code for IE browsers
171	if (window.G_vmlCanvasManager)
172	{
173	canvas = window.G_vmlCanvasManager.initElement(canvas);
174
175	}
176	var context = canvas.getContext('2d');
177
178	canvas.width = 12;
179	canvas.height = 12;
180	$(canvas).css({"float":"left"});
181	
182	
183	a = context;
184	
185	a.fillStyle = slybox.color;
186	a.arc(position.left ? d : e - d, position.top ? d : e - d, d, 0, Math.PI * 2, true);
187	a.fill();
188	a.fillRect(position.left ? d : 0, 0, e - d, e);
189	a.fillRect(0, position.top ? d : 0, e, e - d)
190	}
191
192	$(".tlsly,.trsly,.blsly,.brsly").each(function(){
193	$(this).css({"background-color":"transparent"});
194		createCorner($(this).attr("class"))
195	});
196	
197	// сокрытие элементов управления 
198	$("#slynext,#slyprev").hide();
199
200	// получение количества коментариев, находящихся внутри элемента div с целью их удаления
201
202	//удаление максимального изображения вместе с тенью
203	if(document.getElementById("slyshadow")){
204	$('#slyshadow,#slyconteiner #bigimg').remove();
205	//удаление максимального изображения вместе с тенью
206	}
207	// создание аттрибута src для максимального изображения
208	// регулярное изображение удаляет символы  _s из аттрибута src миниизображения
209
210
211	if(!document.getElementById('bigimg')){
212	var newim = new Image();
213	// обработчик загрузки изображения
214	attevent(newim,e)
215	newim.src = e;
216	}
217}
218
219
220$('.minislybox').click(function(){
221
222	np = $(this)
223	ajaxurl(np)
224	return false
225});
226
227function ajaxurl(np)
228{
229	var imb = document.documentElement.clientWidth;
230	var imbt = document.documentElement.clientHeight;
231	offset = $(document).scrollTop();
232	var centerimg = (imb/2) - (45/2); 
233	var centerimgt = (imbt/2) - (41/2); 
234	$("#slyload").css({'left': centerimg+"px", 'top': offset + centerimgt-10+"px"}).show();
235
236	index = $(".minislybox").index($(".minislybox[active='active']"));
237	$(".minislybox:eq("+index+")").attr('active','');
238	$(np).attr('active','active');
239	np = $(np).attr("src");
240
241	n = np.replace(/_s/ig,"");
242
243
244	bigimg(n)
245
246
247}
248

249// дополнение, которое не является обязательным, а создаёт лишь стиль для миниизображений
250$('.minislybox').mouseover(function(){$(this).animate({'opacity' :'1'})});
251$('.minislybox').mouseout(function(){$(this).animate({'opacity' :'0.5'});});
252
253// функция обработчик запускаемая при возникновении события mouseover
254// функция необходима для сокрытия элементов управления - кнопок next (prev)
255function mouseoverhandler()
256{
257
258	var cont = $("#slyconteiner");
259	var curimg = parseInt($(".minislybox").index($(".minislybox[active='active']"))) + 1;
260	if(curimg == $(".minislybox").length && $(".minislybox").length !== 1)
261	{
262	$("#slyprev").fadeOut().css({'left':"10px",'top':((cont.height()-$("#slycomment").height()-6)/2)-16+"px","opacity":"0.6"}).fadeIn('slow');
263	$("#slyprev").fadeOut().css({'left':"10px",'top':((cont.height()-$("#slycomment").height()-6)/2)-16+"px","opacity":"0.6"}).fadeIn('slow');
264	}
265	else if(curimg == 1 && $(".minislybox").length > 1){
266	$("#slynext").fadeOut().css({'left':cont.width()-48+"px",'top':((cont.height()-$("#slycomment").height()-6)/2)-16+"px","opacity":"0.6"}).fadeIn('slow');
267	}
268	else if (curimg > 1 && curimg < $(".minislybox").length){
269	$("#slyprev").fadeOut().css({'left':"10px",'top':((cont.height()-$("#slycomment").height()-6)/2)-16+"px","opacity":"0.6"}).fadeIn('slow');
270	$("#slynext").fadeOut().css({'left':cont.width()-48+"px",'top':((cont.height()-$("#slycomment").height()-6)/2)-16+"px","opacity":"0.6"}).fadeIn('slow');
271	}
272
273}
274// функция обработчик запускаемая при возникновении события mouseout
275// функция необходима для отображения элементов управления - кнопок next (prev)
276function mouseouthandler()
277{
278	$("#slynext,#slyprev").fadeOut();
279}
280
281function nextimg()
282{
283	$("#slyconteiner").fadeOut('slow',function(){
284	$("#slyshadow").fadeOut('slow',function(){
285	var e = $(".minislybox").index($(".minislybox[active='active']"))+1;
286	if(e >= 0 && e < $(".minislybox").length+1) ajaxurl($(".minislybox:eq("+e+")"))
287	});
288	});
289}
290
291function previmg()
292{
293	$("#slyconteiner").fadeOut('slow',function(){
294	$("#slyshadow").fadeOut('slow',function(){
295	var e = $(".minislybox").index($(".minislybox[active='active']"))-1;
296	if(e >= 0 && e < $(".minislybox").length+1) ajaxurl($(".minislybox:eq("+e+")"))
297	});
298	});
299}
300
301$("#slyclose").live('click',function(){delshadow()});
302$("#slyprev").live('click',function(){previmg()});
303$("#slynext").live('click',function(){nextimg()});
304
305$("#slyconteiner").bind('mouseleave',mouseouthandler).bind('mouseenter',mouseoverhandler);
306
307
308$("#slyprev,sly#next").live('click',function(){
309	$("#slyconteiner").unbind('mouseleave',mouseouthandler);
310	$("#slyconteiner").unbind('mouseenter',mouseoverhandler);
311});
312
313//удаление максимального изображения вместе с тенью
314function delshadow()
315{
316
317	$("#slyconteiner").attr('terget','0');
318	if(document.getElementById("slyshadow")){
319	
320	$("#slyconteiner").unbind('mouseleave',mouseouthandler);
321	$("#slyconteiner").unbind('mouseenter',mouseoverhandler);
322		// сокрытие багов прозрачного фильтра в ие
323	
324	$("#slynext,#slyprev").fadeOut('slow',function(){
325	if(jQuery.browser.msie)	$("#slynext,#slyprev,#slyclose,#slyshadow").css('filter','');
326		$('#slyconteiner').fadeOut('slow',function(){
327		$('#slybigimg').remove();
328		$('#slyshadow').fadeOut('slow');
329		// сокрытие элементов управления
330		$("#slyconteiner").hide();
331		});
332	// получение количества коментариев, находящихся внутри элемента div с целью их удаления
333	});
334	}
335	else return false
336}
337
338jQuery.fn.fixPNG = function (element)
339{
340  //Если браузер IE версии 5.5-6
341  if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
342  {
343    var src;
344
345    if (element.tagName=='IMG') //Если текущий элемент картинка (тэг IMG)
346    {
347      if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
348      {
349        src = element.src;
350        element.src = "/css/blank.gif"; //заменяем изображение прозрачным gif-ом
351      }
352    }
353    else //иначе, если это не картинка а другой элемент
354    {
355	  //если у элемента задана фоновая картинка, то присваеваем значение свойства background-шmage переменной src
356     src = element.css("background-image").match(/url\("(.+\.png)"\)/i);
357      if (src)
358      {
359        src = src[1]; //берем из значения свойства background-шmage только адрес картинки
360        element.css("background-image","none"); //убираем фоновое изображение
361		
362      }
363    }
364    //если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
365    if (src) element.css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='image')");
366  }
367}
368
369
370
371});
372
373
374