Context Navigation

source: extensions/Full_Background/js/full_BG.js @ 28523

Last change on this file since 28523 was 28523, checked in by Miklfe, 10 years ago
Bug corrigé: compatibilité avec contactform
File size: 10.8 KB

Line
1	(function($) {
2	$(document).ready(function(){
3	$.fn.preload = function(options) {
4	var opts = $.extend({}, $.fn.preload.defaults, options);
5	o = $.meta ? $.extend({}, opts, this.data()) : opts;
6	var c = this.length,
7	l = 0;
8	return this.each(function() {
9	var $i = $(this);
10	$('<img/>').load(function(i){
11	++l;
12	if(l == c) o.onComplete();
13	}).attr('src',$i.attr('src'));
14	});
15	};
16	$.fn.preload.defaults = {
17	onComplete : function(){return false;}
18	};
19
20
21
22	$(function() {
23	var $tf_bg = $('#tf_bg'),
24	$tf_bg_images = $tf_bg.find('img'),
25	$tf_bg_img = $tf_bg_images.eq(0),
26	$tf_thumbs = $('#tf_thumbs'),
27	total = $tf_bg_images.length,
28	current = 0,
29	$tf_content_wrapper = $('#tf_content_wrapper'),
30	$tf_next = $('#tf_next'),
31	$tf_prev = $('#tf_prev'),
32	$tf_loading = $('#tf_loading');
33	$tf_pattern = $('#tf_pattern');
34
35	//preload the images
36	$tf_bg_images.preload({
37	onComplete : function(){
38	$tf_loading.hide();
39	init();
40	}
41	});
42
43	//shows the first image and initializes events
44	function init(){
45	//get dimentions for the image, based on the windows size
46	var dim = getImageDim($tf_bg_img);
47	//set the returned values and show the image
48	$tf_bg_img.css({
49	width : dim.width,
50	height : dim.height,
51	left : dim.left,
52	top : dim.top
53	}).fadeIn();
54
55	//resizing the window resizes the $tf_bg_img
56	$(window).bind('resize',function(){
57	var dim = getImageDim($tf_bg_img);
58	$tf_bg_img.css({
59	width : dim.width,
60	height : dim.height,
61	left : dim.left,
62	top : dim.top
63	});
64	});
65
66
67
68
69	//expand and fit the image to the screen
70	$(document).on('click', '#tf_zoom',
71	function(){
72	if($tf_bg_img.is(':animated'))
73	return false;
74	var $this = $(this);
75	var id = $tf_bg_images.eq(current).attr('id');
76	$.ajax({
77	type: "POST",
78	url: "themes/Full_Background/full_BG.php",
79	data: {id: id},
80	success:function(msg){
81	var div = "nbhit"+id;
82	document.getElementById(div).innerHTML=msg ;}
83	});
84	if($this.hasClass('tf_zoom')){
85	resize($tf_bg_img);
86	$this.addClass('hidedi')
87	if($tf_pattern.hasClass('visible')){
88	$tf_pattern.addClass('hide')
89	.removeClass('visible');}
90	if($('.titrePage').hasClass('visible')){
91	$('.titrePage').addClass('hide')
92	.removeClass('visible');}
93	if($('.additional_info').hasClass('visible')){
94	$('.additional_info').addClass('hide')
95	.removeClass('visible');}
96	if($('.infor').hasClass('visible')){
97	$('.infor').addClass('hide')
98	.removeClass('visible');}
99	if($('.footer').hasClass('visible')){
100	$('.footer').addClass('hide')
101	.removeClass('visible');}
102	if($('.tf_thumbs').hasClass('visible')){
103	$('.tf_thumbs').addClass('hide')
104	.removeClass('visible');}
105	if($('.tf_next').hasClass('visible')){
106	$('.tf_next').addClass('hidedi')
107	.removeClass('visible');}
108	if($('.tf_prev').hasClass('visible')){
109	$('.tf_prev').addClass('hidedi')
110	.removeClass('visible');}
111	if($('.tf_info').hasClass('visible')){
112	$('.tf_info').addClass('hidedi')
113	.removeClass('visible');}
114	if($('.tf_fullscreen').hasClass('hidedi')){
115	$('.tf_fullscreen').addClass('visible')
116	.removeClass('hidedi');}
117	}
118	}
119	);
120
121	$(document).on('click', '#tf_fullscreen',
122	function(){
123	if($tf_bg_img.is(':animated'))
124	return false;
125
126	var $this = $(this);
127	if($this.hasClass('tf_fullscreen')){
128
129	var dim = getImageDim($tf_bg_img);
130	$tf_bg_img.animate({
131	width : dim.width,
132	height : dim.height,
133	top : dim.top,
134	left : dim.left
135	},550);
136	$this.addClass('hidedi')
137	.removeClass('visible');
138	$('.tf_zoom').addClass('visible')
139	.removeClass('hidedi');
140	$tf_pattern.addClass('visible')
141	.removeClass('hide');
142	$('.titrePage').addClass('visible')
143	.removeClass('hide');
144	$('.additional_info').addClass('visible')
145	.removeClass('hide');
146	$('.infor').addClass('visible')
147	.removeClass('hide');
148	$('.footer').addClass('visible')
149	.removeClass('hide');
150	$('.tf_thumbs').addClass('visible')
151	.removeClass('hide');
152	$('.tf_next').addClass('visible')
153	.removeClass('hidedi');
154	$('.tf_prev').addClass('visible')
155	.removeClass('hidedi');
156	$('.tf_info').addClass('visible')
157	.removeClass('hidedi');
158
159	}
160
161	}
162	);
163
164
165
166	//click the arrow down, scrolls down
167	$tf_next.bind('click',function(){
168	if($tf_bg_img.is(':animated'))
169	return false;
170	scroll('bt');
171	});
172
173	//click the arrow up, scrolls up
174	$tf_prev.bind('click',function(){
175	if($tf_bg_img.is(':animated'))
176	return false;
177	scroll('tb');
178	});
179
180	//mousewheel events - down / up button trigger the scroll down / up
181	$(document).bind('mousewheel' , function(e, delta) {
182	if($tf_bg_img.is(':animated'))
183	return false;
184
185	if(delta < 0)
186	scroll('bt');
187	else
188	scroll('tb');
189	return false;
190	});
191
192	//key events - down / up button trigger the scroll down / up
193	$(document).keydown(function(e){
194	if($tf_bg_img.is(':animated'))
195	return false;
196
197	switch(e.which){
198	case 38:
199	scroll('tb');
200	break;
201
202	case 40:
203	scroll('bt');
204	break;
205	}
206	});
207	}
208
209
210
211	if(total > 1 ){
212
213	//show next / prev image
214	function scroll(dir){
215	//if dir is "tb" (top -> bottom) increment current,
216	//else if "bt" decrement it
217	current = (dir == 'bt')?current + 1:current - 1;
218
219	//we want a circular slideshow,
220	//so we need to check the limits of current
221	if(current == total) current = 0;
222	else if(current < 0) current = total - 1;
223
224
225
226	//flip the thumb
227	$tf_thumbs.flip({
228	color : 'rgb(255,255,255)',
229	direction : dir,
230	speed : 400,
231	onBefore : function(){
232	//the new thumb is set here
233	var content = '<span id="tf_zoom" class="tf_zoom ' + $tf_bg_images.eq(current).attr('Z') + '"></span>';
234	if($tf_bg_images.eq(current).attr('Z')=='thumb'){
235	content += '<span id="tf_info" class="tf_info" onclick="$lb.launch({url:' + $tf_bg_images.eq(current).attr('link') + '})"></span>'
236	content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';}
237	else{content +='<a href="' + $tf_bg_images.eq(current).attr('link') + '"><img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/></a>';}
238	$tf_thumbs.html(content);
239	$tf_pattern.addClass('visible')
240	.removeClass('hide');
241	$('.titrePage').addClass('visible')
242	.removeClass('hide');
243	$('.additional_info').addClass('visible')
244	.removeClass('hide');
245	$('.infor').addClass('visible')
246	.removeClass('hide');
247	$('.footer').addClass('visible')
248	.removeClass('hide');
249	$('.tf_thumbs').addClass('visible')
250	.removeClass('hide');
251	$('.tf_next').addClass('visible')
252	.removeClass('hidedi');
253	$('.tf_prev').addClass('visible')
254	.removeClass('hidedi');
255	$('.tf_info').addClass('visible')
256	.removeClass('hidedi');
257	$('.tf_fullscreen').addClass('hidedi')
258	.removeClass('visible');
259
260	}
261	});
262
263	//we get the next image
264	var $tf_bg_img_next = $tf_bg_images.eq(current),
265	//its dimentions
266	dim = getImageDim($tf_bg_img_next),
267	//the top should be one that makes the image out of the viewport
268	//the image should be positioned up or down depending on the direction
269	top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';
270
271	//set the returned values and show the next image
272	$tf_bg_img_next.css({
273	width : dim.width,
274	height : dim.height,
275	left : dim.left,
276	top : top
277	}).show();
278
279	//now slide it to the viewport
280	$tf_bg_img_next.stop().animate({
281	top : dim.top
282	},1000);
283
284	//we want the old image to slide in the same direction, out of the viewport
285	var slideTo = (dir == 'bt')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
286	$tf_bg_img.stop().animate({
287	top : slideTo
288	},1000,function(){
289	//hide it
290	$(this).hide();
291	//the $tf_bg_img is now the shown image
292	$tf_bg_img = $tf_bg_img_next;
293	//show the description for the new image
294
295	$tf_content_wrapper.children()
296	.eq(current)
297	.show();
298
299
300	});
301	//hide the current description
302	$tf_content_wrapper.children(':visible')
303	.hide()
304
305	}
306	}
307	//animate the image to fit in the viewport
308	function resize($img){
309	var w_w = $(window).width(),
310	w_h = $(window).height()-35,
311	i_w = $img.width(),
312	i_h = $img.height(),
313	r_i = i_h / i_w,
314	new_w,new_h;
315
316	if(i_w > i_h){
317	new_w = w_w;
318	new_h = w_w * r_i;
319
320	if(new_h > w_h){
321	new_h = w_h;
322	new_w = w_h / r_i;
323	}
324	}
325	else{
326	new_h = w_w * r_i;
327	new_w = w_w;
328
329	if(new_h > w_h){
330	new_h = w_h;
331	new_w = w_h / r_i;
332	}
333
334	}
335
336	$img.animate({
337	width : new_w + 'px',
338	height : new_h + 'px',
339	top : '35px',
340	left : (w_w / 2)-(new_w / 2)
341	},550);
342	}
343
344	//get dimentions of the image,
345	//in order to make it full size and centered
346	function getImageDim($img){
347	var w_w = $(window).width(),
348	w_h = $(window).height(),
349	r_w = w_h / w_w,
350	i_w = $img.width(),
351	i_h = $img.height(),
352	r_i = i_h / i_w,
353	new_w,new_h,
354	new_left,new_top;
355
356	if(r_w > r_i){
357	new_h = w_h;
358	new_w = w_h / r_i;
359	}
360	else{
361	new_h = w_w * r_i;
362	new_w = w_w;
363	}
364
365
366	return {
367	width : new_w + 'px',
368	height : new_h + 'px',
369	left : (w_w - new_w) / 2 + 'px',
370	top : (w_h - new_h) / 2 + 'px'
371	};
372	}
373	});
374	});
375	})(jQuery);

Note: See TracBrowser for help on using the repository browser.

Download in other formats: