jeto v javě nebo v CSS?

window.addEvent('domready', function() {
		
		
		// CHANGE THIS !!
		var slides = 2;		// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		
		var pos = 0;
		var offset = 462;	// HOW MUCH TO SLIDE WITH EACH CLICK
		var currentslide = 1;	// CURRENT SLIDE IS THE FIRST SLIDE
		var inspector = $('fullimg');	// WHERE THE LARGE IMAGES WILL BE PLACE	
		var fx = new Fx.Morph(inspector, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
 		var fx2 = new Fx.Morph(inspector, {duration: 200, transition: Fx.Transitions.Sine.easeOut});

		
		/* THUMBNAIL IMAGE SCROLL */
		var imgscroll = new Fx.Scroll('wrapper', {
   			offset: {'x': 0, 'y': 0},
   			transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
		}).toLeft();

	
		/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
		$('moveleft').addEvent('click', function(event) { event = new Event(event).stop();
			if(currentslide == 1) return;
			currentslide--;					// CURRENT SLIDE IS ONE LESS
			pos += -(offset);				// CHANGE SCROLL POSITION
			imgscroll.start(pos);			// SCROLL TO NEW POSITION
		});
		$('moveright').addEvent('click', function(event) { event = new Event(event).stop();
			if(currentslide >= slides) return;
			currentslide++;
			pos += offset;
			imgscroll.start(pos);
		});
		
		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		$$('.item').each(function(item){ 
			item.addEvent('click', function(e) { 
				e = new Event(e).stop();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage
					var loadimg = '/image/loader.gif';	   // Reference to load gif
					var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector); 
					fx2.start({ 'opacity' : 1 });
					var largeImage = new Element('img', { 'src': item.href }); // create large image
					
					/* When the large image is loaded, fade out, fade in with new image */
					//largeImage.onload = function(){  // While this line of code causes the images to load/transition in smoothly, it cause IE to stop working
						fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	           				// empty stage
							var description = item.getElement('span');	// see if there is a description
							
							if(description)					   
								var des = new Element('p').set('text', description.get('text')).inject(inspector);
									
							largeImage.inject(inspector); // insert new image
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					//};
					
				});
			});
		});

		// INSERT THE INITAL IMAGE - LIKE ABOVE
		inspector.empty();
		var description = $('first').getElement('span');
		//if(description) var desc = new Element('p').setHTML(description.get('html')).inject(inspector);
		if(description) var des = new Element('p').set('text', description.get('text')).inject(inspector);
		var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);
		
		/*inspector.empty();
		var description = $('first').getElement('span');
		if(description) var desc = new Element('p').setHTML(description.get('html')).inject(inspector);
		var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);*/
	
});

body{ background:black; color:white; }
#img_gallery{ margin:5px auto; width:800px; }
#img_gallery a{ outline:none; border:none; }
#img_gallery a img{border:none;}

/* --- IMAGE STAGE */
#fullimg{
	width:800px;
	overflow:hidden;
	height:600px;
}

/* --- SLIDER --- */
#img_gallery #wrapper{
	overflow:hidden;
	padding:4px 2px;
	width: 764px;
	float:left;
	height:50px;
	background-color:#181818;
	position: relative;

}

#items{
	margin:0px 0px;
	padding:0px;
	list-style:none;
	width:50000px;
	position: relative;
	letter-spacing:0em;
}
#items li{
	float:left;
	list-style:none;
	margin-right:2px;
}
#items .thumb{
	width:75px;
	height:50px;
	cursor:pointer;
	margin:0px;
	padding:0px;
}
#items .large{
	display:none;
	position:absolute;
}
#fullimg .loading{
	width: 24px;
	height: 24px;
}
#fullimg .thumb{display:none;}

#items .item  p, #items .item  span{
	display:none;
	text-indent: -2000em;
}
#moveleft, #moveright{
	margin:0px;
	height:58px;
	color: white;
	width: 16px;
	text-indent: -2000em;
	text-decoration: none;
	z-index: 10000; 
	display:block;
	cursor: pointer;
	float:left;
}
#moveleft{background: url('/image/left_gallery.gif');}
#moveright{background: url('/image/right_gallery.gif');}
#moveleft:hover, #moveright:hover{ background-position:bottom; }