http://www.bladeofgrass.co.uk/_s/js/Skins/Item/slideDesign.js

1var slideDesign = {	
2};
3
4slideDesign.buildPic = function(obj){
5	obj.find(".itemContainer").each(function(index) {
6		$(this).find("img").wrap('<div class="picContainer" />');
7		$(this).find("img").load(function() {
8			  slideDesign.cropPic($(this).parent());
9		});
10	});
11}
12
13slideDesign.cropPic = function(picContainer){
14	
15	picContainer.find("img").css("position", "absolute");
16	
17	
18	if ((picContainer.find("img").width()!=0)&&(picContainer.find("img").height()!=0)){
19		
20		
21		var ratioH = parseInt(picContainer.width()) / parseInt(picContainer.find("img").width()) ;
22		var ratioV = parseInt(picContainer.height()) / parseInt(picContainer.find("img").height());
23		
24		
25		var ratio = Math.max(ratioH, ratioV);
26		
27		var newWidth = ratio * parseInt(picContainer.find("img").width())
28		var newHeight = ratio * parseInt(picContainer.find("img").height())
29		
30		var topPos = (parseInt(picContainer.height()) - newHeight) / 2
31		var leftPos = (parseInt(picContainer.width()) - newWidth) / 2
32		
33		
34		picContainer.find("img").css("top", topPos)
35		picContainer.find("img").css("left", leftPos)
36		picContainer.find("img").css("width", newWidth)
37		picContainer.find("img").css("height", newHeight)
38		
39		
40		
41	}
42	
43	
44	
45	
46	
47}
48
49
50slideDesign.animateSlide = function(obj, speeed)
51{
52	/*obj.find(".main").stop().animate({
53	    left: 1-parseInt(obj.attr("currentSlide"))*parseInt(obj.width()),
54	  }, {
55		    duration: speeed,
56		    specialEasing: {
57		     	 left: 'easeOutQuint'
58		    },
59		    complete: function() {
60		     
61		    }
62		  });
63	*/
64	//obj.find(".main").transition({ left: 1-parseInt(obj.attr("currentSlide"))*parseInt(obj.width()), perspective: parseInt(obj.attr("currentSlide"))*parseInt(obj.width()), rotateY: '20deg', duration: 2000, easing: 'snap' });
65	
66	
67
68	
69	
70	
71	obj.find(".item").each(function(index) {
72		
73	
74	      // this will stop the current animation
75	     //$(this).css('-webkit-transition', null);// = null;
76		
77		//$(this).css3animate({"left": $(this).css('left')}, 0);  
78		
79		//$(this).css("-webkit-animation-play-state", "paused");
80		
81		// this will setup the coordinates on the position the animation
82	      // was stopped
83	     // $(this).css(properties);
84
85
86		
87		
88		$(this).css('position', 'absolute')
89		var fromCurrent = index - parseInt(obj.attr("currentSlide"));
90		var currentSlide = parseInt(obj.attr("currentSlide"));
91		//console.log("from current ", fromCurrent, fromCurrent,  fromCurrent * parseInt(obj.width()), parseInt(obj.width()))
92		var scale = 1;
93		var z3d = 0;
94		var rotation = 0;
95		if (index > currentSlide){
96			$(this).css("z-index", 900-index*50)
97			scale = 0.5
98			z3d = 2
99			rotation = -30;
100		}
101		if (index < currentSlide){
102			$(this).css("z-index", index*50)
103			scale = 0.5
104			z3d = 2
105			rotation = 50
106		}
107		if (index == currentSlide){
108			$(this).css("z-index", 2000)
109			scale = 0.7
110			z3d = 1;
111			rotation = 1
112		}
113
114		//console.log()
115	    //$(this).style['WebkitTransition'] = null;
116
117		//var $animated = $(this)
118		//$(this).css3animate({"left": $(this).css('left'), "rotateY": $(this).css('rotateY')}, 1);
119		
120		//$(this).stop(true, true).transition({ left: fromCurrent * parseInt(obj.width()/2), perspective: '300px', rotateY: fromCurrent*-30, scale: scale, duration: 750, easing: 'snap' });
121		
122		console.log("OMG", parseInt(obj.width())/2+"px 200px")
123		
124		$(this).parent().css('-webkit-perspective-origin', parseInt(obj.width())/2+"px 200px");
125		$(this).parent().css('-webkit-perspective', '800px');
126		//$(this).parent().css('-webkit-transform', 'translateZ(-1000px)');
127		
128		$(this).css('-webkit-transform-style', 'preserve-3d');
129		$(this).css('-webkit-box-reflect', 'below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(0,0,0,0.4)))');
130		
131		$(this).css('-webkit-animation', '2s')
132		$(this).css('-webkit-transition', 'all 1.5s cubic-bezier(.25,.91,.12,1)');
133
134		var xPoz = fromCurrent * 200;
135	
136		
137		$(this).find("h2").html(index + " " + currentSlide + " " +fromCurrent)
138		
139		if (index == currentSlide ) {
140			
141			$(this).css('-webkit-transform', 'translate3d('+ xPoz +'px, 0px, -300px) rotateY(0deg) ');
142			$(this).css('-webkit-filter', 'brightness(0%)');
143			//$(this).css('-webkit-transform', 'rotateY(0deg)');
144		}
145		if (index > currentSlide ) {
146			$(this).css('-webkit-transform', 'translate3d('+ parseInt(xPoz+140) +'px, 0px, -800px

146) rotateY(-50deg) ');
147			$(this).css('-webkit-filter', 'brightness(-45%)');
148			//$(this).css('-webkit-transform', 'rotateY(30deg)');
149		}
150		if (index < currentSlide ) {
151			$(this).css('-webkit-transform', 'translate3d('+ parseInt(xPoz-140) +'px, 0px, -800px) rotateY(50deg) ');
152			$(this).css('-webkit-filter', 'brightness(-45%)');
153			//$(this).css('-webkit-transform', 'rotateY(-30deg)');
154		}
155		
156		
157		
158		
159		//$(this).css('-webkit-transform', 'rotateY(60deg) translateZ('+-1000*z3d+'px)');
160		//$(this).css('left', fromCurrent * parseInt(obj.width()/2.5))
161		//$(this).css('-webkit-filter', 'brightness('+30*z3d+'%)');
162		//if (index == currentSlide) {
163		//	$(this).css('-webkit-filter', 'brightness(none)');
164		//}
165	//	$(this).css('scale', scale)
166		//transform: rotateY(130deg);
167		//-webkit-transform: rotateY(130deg); /* Safari and Chrome */
168		//-moz-transform: rotateY(130deg); /* Firefox */
169		
170	});
171	
172}
173
174slideDesign.init = function(obj)
175{
176	
177	slideDesign.buildPic(obj)
178	
179	obj.attr("currentSlide", 0);
180	obj.find(".container").append("<div class='slideNav' id='next'><img src='../js/Skins/Item/round_right.png'/></div>")
181	obj.find(".container").append("<div class='slideNav' id='prev'><img src='../js/Skins/Item/round_left.png'/></div>")
182
183	obj.find("#next").click(function() {
184		obj.attr("currentSlide", parseInt(obj.attr("currentSlide"))+1);
185		
186		if (parseInt(obj.find(".item").length) <= parseInt(obj.attr("currentSlide"))){
187			obj.attr("currentSlide", 0);
188		}
189		
190		slideDesign.animateSlide(obj, 2000)
191		
192	});
193	
194	obj.find("#prev").click(function() {
195		obj.attr("currentSlide", parseInt(obj.attr("currentSlide"))-1);
196		
197		if (parseInt(obj.attr("currentSlide")) < 0){
198			obj.attr("currentSlide", parseInt(obj.find(".item").length)-1);
199		}
200		
201		slideDesign.animateSlide(obj, 2000)
202		
203	});
204	
205	
206	obj.find(".container").css("width", "100%");
207	obj.find(".container").css("height", "100%");
208	
209	obj.find(".main").css("width", parseInt(obj.width())*obj.find(".item").length);
210	obj.find(".main").css("position", "absolute");
211	obj.find(".main").css("top", "0px")
212	obj.find(".main").css("left", "0px")
213	
214	obj.find(".main").css("height", "100%");
215	obj.find(".main").css("float", "left");
216	obj.find(".main").css("padding", 0);
217	obj.find(".main").css("margin", 0);
218	
219	obj.css("padding", 0);
220	obj.css("margin", 0);
221	
222	
223	slideDesign.tweak(obj);
224
225}
226
227slideDesign.tweak = function(obj)
228{
229
230	obj.find(".itemContainer").each(function(index) {
231		$(this).find(".picContainer").css("width", parseInt(obj.width()));
232		$(this).find(".picContainer").css("height", parseInt(obj.height()));
233		$(this).find(".picContainer").css("position", "absolute");
234		$(this).find(".picContainer").css("left", 0);
235		$(this).find(".picContainer").css("top", 0);
236		$(this).find(".picContainer").css("z-index", 1);
237		$(this).find(".picContainer").css("overflow", "hidden");
238		
239		slideDesign.cropPic($(this).find(".picContainer"))
240		
241		//info
242		$(this).find(".info").css("position", "absolute");
243		$(this).find(".info").css("left", 0);
244		$(this).find(".info").css("bottom", 0);
245		$(this).find(".info").css("z-index", 2);
246		
247		$(this).find(".info").css("color", "white");
248		$(this).find(".info").css("margin", "20px");
249		$(this).find(".info").css("text-shadow", "0px 0px 7px #000");
250		
251		$(this).find(".info h2").css("color", "white");
252		$(this).find(".info h2").css("font-weight", "normal");
253		$(this).find(".info h2").css("font-family", obj.attr('vbTitleFontFamily'));
254		$(this).find(".info h2").css("font-size", "76px");
255		$(this).find(".info h2").css("margin", "0px");
256		
257		
258		
259		
260		//font-family: OstrichSansRoundedMedium; letter-spacing: 0em; line-height: 100%; font-size: 76px;
261		
262		
263		
264		//
265	});
266	
267	obj.find(".item").css("float", "left");
268	obj.find(".item").css("width", parseInt(obj.width()))
269	obj.find(".item").css("height", parseInt(obj.height()))
270	
271	obj.find(".itemContainer").css("position", "absolute");
272	obj.find(".itemContainer").css("width", "100%");
273	obj.find(".itemContainer").css("height", "100%");
274	
275
276	obj.find(".slideNav").css("position", "absolute");
277	obj.find(".slideNav").css("z-index", 10);
278	
279	obj.find(".slideNav").css("top", (parseInt(obj.height())-79)/2);
280
281	obj.find("#next").css("right", 0);
282	obj.find("#prev").css("left", 0);
283	
284	
285	slideDesign.animateSlide(obj, 0)  
286
287}