Context Navigation

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

Last change on this file since 20799 was 19033, checked in by Miklfe, 12 years ago

File size: 10.8 KB

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

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

Download in other formats: