Version 1.4

Demo/demo.css

@@ -40,8 +40,9 @@
     margin-bottom:-5px;
 }
 #thumbareaContent img{
+	padding:0px;
     margin:0px;
-	margin-right:15px;
+	margin-right:8px;
 	cursor:pointer;
     border: 3px solid #ffffff;
 }

Demo/index.html

@@ -18,47 +18,43 @@
 
     <div id="gallery">
 
-                <div id="scrollGalleryHead">		
+                <div id="scrollGalleryHead">
 					<div id="thumbarea">
 						<div id="thumbareaContent">
-                            <img  src="fotos/image1.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image2.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image3.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image4.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image5.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image6.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image7.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image8.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image9.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image10.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image11.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image12.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image13.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image14.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image15.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image16.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image1.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image2.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image3.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image4.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image5.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image6.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image7.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image8.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image9.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image10.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image11.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image12.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image13.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image14.jpg" width="120" height="80" alt="" />
 						</div> 
-					</div> 
+					</div>
 				</div>
 				<div id="scrollGalleryFoot">
 					<div id="imagearea">
 					  <div id="imageareaContent">
-                            <img  src="fotos/image1.jpg"  />
-                            <img  src="fotos/image2.jpg"  />
-                            <img  src="fotos/image3.jpg"  />
-                            <img  src="fotos/image4.jpg"  />
-                            <img  src="fotos/image5.jpg"  />
-                            <img  src="fotos/image6.jpg"  />
-                            <img  src="fotos/image7.jpg"  />
-                            <img  src="fotos/image8.jpg"  />
-                            <img  src="fotos/image9.jpg"  />
-                            <img  src="fotos/image10.jpg"  />
-                            <img  src="fotos/image11.jpg"  />
-                            <img  src="fotos/image12.jpg"  />
-                            <img  src="fotos/image13.jpg"  />
-                            <img  src="fotos/image14.jpg"  />
-                            <img  src="fotos/image15.jpg"  />
-                            <img  src="fotos/image16.jpg"  />
+                            <img  src="fotos/image1.jpg" alt="" />
+                            <img  src="fotos/image2.jpg" alt="" />
+                            <img  src="fotos/image3.jpg" alt="" />
+                            <img  src="fotos/image4.jpg" alt="" />
+                            <img  src="fotos/image5.jpg" alt="" />
+                            <img  src="fotos/image6.jpg" alt="" />
+                            <img  src="fotos/image7.jpg" alt="" />
+                            <img  src="fotos/image8.jpg" alt="" />
+                            <img  src="fotos/image9.jpg" alt="" />
+                            <img  src="fotos/image10.jpg" alt=""  />
+                            <img  src="fotos/image11.jpg" alt="" />
+                            <img  src="fotos/image12.jpg" alt="" />
+                            <img  src="fotos/image13.jpg" alt="" />
+                            <img  src="fotos/image14.jpg" alt="" />
 
                       </div> 
 					</div> 

Demo/mootools-1.2.4.4-more.js

@@ -174,3 +174,100 @@ Fx.Scroll = new Class({
 	}
 
 });
+/*
+---
+
+script: Scroller.js
+
+description: Class which scrolls the contents of any Element (including the window) when the mouse reaches the Element's boundaries.
+
+license: MIT-style license
+
+authors:
+- Valerio Proietti
+
+requires:
+- core:1.2.4/Events
+- core:1.2.4/Options
+- core:1.2.4/Element.Event
+- core:1.2.4/Element.Dimensions
+
+provides: [Scroller]
+
+...
+*/
+
+var Scroller = new Class({
+
+	Implements: [Events, Options],
+
+	options: {
+		area: 20,
+		velocity: 1,
+		direction: "",
+		onChange: function(x, y){
+			if(this.options.direction=="y") x=0;
+			if(this.options.direction=="x") y=0;
+			this.element.scrollTo(x, y);
+		},
+		fps: 50
+	},
+
+	initialize: function(element, options){
+		this.setOptions(options);
+		this.element = document.id(element);
+		this.listener = ($type(this.element) != 'element') ? document.id(this.element.getDocument().body) : this.element;
+		this.timer = null;
+		this.bound = {
+			attach: this.attach.bind(this),
+			detach: this.detach.bind(this),
+			getCoords: this.getCoords.bind(this)
+		};
+	},
+
+	start: function(){
+		this.listener.addEvents({
+			mouseover: this.bound.attach,
+			mouseout: this.bound.detach
+		});
+	},
+
+	stop: function(){
+		this.listener.removeEvents({
+			mouseover: this.bound.attach,
+			mouseout: this.bound.detach
+		});
+		this.detach();
+		this.timer = $clear(this.timer);
+	},
+
+	attach: function(){
+		this.listener.addEvent('mousemove', this.bound.getCoords);
+	},
+
+	detach: function(){
+		this.listener.removeEvent('mousemove', this.bound.getCoords);
+		this.timer = $clear(this.timer);
+	},
+
+	getCoords: function(event){
+		this.page = (this.listener.get('tag') == 'body') ? event.client : event.page;
+		if (!this.timer) this.timer = this.scroll.periodical(Math.round(1000 / this.options.fps), this);
+	},
+
+	scroll: function(){
+		var size = this.element.getSize(), 
+			scroll = this.element.getScroll(), 
+			pos = this.element.getOffsets(), 
+			scrollSize = this.element.getScrollSize(), 
+			change = {x: 0, y: 0};
+		for (var z in this.page){
+			if (this.page[z] < (this.options.area + pos[z]) && scroll[z] != 0)
+				change[z] = (this.page[z] - this.options.area - pos[z]) * this.options.velocity;
+			else if (this.page[z] + this.options.area > (size[z] + pos[z]) && scroll[z] + size[z] != scrollSize[z])
+				change[z] = (this.page[z] - size[z] + this.options.area - pos[z]) * this.options.velocity;
+		}
+		if (change.y || change.x) this.fireEvent('change', [scroll.x + change.x, scroll.y + change.y]);
+	}
+
+});

README.md

@@ -26,26 +26,26 @@ Use this structure in the body :
        <div id="scrollGalleryHead">		
 		<div id="thumbarea">
 			<div id="thumbareaContent">
-                            <img  src="fotos/image1.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image2.jpg" width="120" height="80" alt="" />
-                            <img  src="fotos/image3.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image1.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image2.jpg" width="120" height="80" alt="" />
+                            <img  src="fotos/small_image3.jpg" width="120" height="80" alt="" />
 				...
                      </div> 
 		</div> 
 	 </div>
 	 <div id="scrollGalleryFoot">
 		<div id="imagearea">
 			<div id="imageareaContent">
-                            <img  src="fotos/image1.jpg"  />
-                            <img  src="fotos/image2.jpg"  />
-                            <img  src="fotos/image3.jpg"  />
+                            <img  src="fotos/image1.jpg" alt="" />
+                            <img  src="fotos/image2.jpg" alt="" />
+                            <img  src="fotos/image3.jpg" alt="" />
    				...
                      </div> 
 		</div> 
 	</div>
      </div>
 
-In this version it is important that the thumbs and the images have the same src! 
+It is important, that you have the same number of images in thumbareaContent and imageareaContent.
 
 Syntax
 ----------
@@ -61,10 +61,10 @@ Options
 ----------
 
 * 'start': (number) start at Picture ...
-* 'notScrollWidth': (number) width of the area to select thumbs without scrolling
+* 'area': (number) width of the area to scroll left or right 
 * 'thumbarea': (string) div id name for the thumbs
 * 'imagearea': (string) div id name for the images 
-* 'speed': (number) thumb scroll speed
+* 'speed': (number) 0<=speed<=1 thumb scroll speed
 
 Events
 ----------

Source/scrollGallery.js

@@ -11,6 +11,7 @@ license:
 requires: 
 - core/1.2.4: '*'
 - more/1.2.4: 'Fx.Scroll'
+- Scroller.js by Valerio Proietti
 
 provides: [scrollGallery]
 
@@ -23,26 +24,21 @@ var scrollGallery = new Class({
 
 	options: {
 		'start': 1,
-        'notScrollWidth': 400,
+        'area': 200,
 		'thumbarea': 'thumbarea',
 		'imagearea': 'imagearea',
-		'speed': 4
+		'speed': 0.1
         /* Events...*/
 	},
 
 	initialize: function(element,options){
-		this.setOptions(options);
-		this.aktivesEvent = false;
-		this.aktivesScrollEvent = null;
-		this.interval = null;
-		this.aktuellePositionX = 0;
-        //FX
-		this.scrollthumbareaFx = new Fx.Scroll(this.options.thumbarea, {
-			offset: {
-				'x': 0,
-				'y': 0
-			} 
-		});
+		this.setOptions(options);		
+		Scroller.implement(new Events, new Options);
+
+		this.tumbObjs=null;
+		this.imgObjs=null;
+
+		//FX
 		this.scrollimageareaFx = new Fx.Scroll(this.options.imagearea, {
 			offset: {
 				'x': 0,
@@ -51,93 +47,39 @@ var scrollGallery = new Class({
 		});
         //init Thumb-Images
 		if($(this.options.thumbarea)){
-			$(this.options.thumbarea).setStyle('overflow', 'hidden');
-			$(this.options.thumbarea).setStyle('overflow-x', 'hidden');
-			var allThumbs = $(this.options.thumbarea).getElements('img');
-			$each(allThumbs, function(imgObjekt, index){
-				imgObjekt.addEvent('click', function(){
-					$clear(this.interval);
-					this.aktivesEvent = true;
-					var allImages = $(this.options.imagearea).getElements('img');
-					$each(allImages, function(imgObjektimContent, index){														
-						if(imgObjekt.get('src')==imgObjektimContent.get('src')){
-							this.scrollimageareaFx.toElement(imgObjektimContent); // scrollt zu Bild im content
-						}
-					}.bind(this));
-				}.bind(this));
-				imgObjekt.addEvent('mouseleave', function(event){ 
-					event.stop();
-					this.aktivesEvent = false;  
-				}.bind(this));
+			this.scrollthumbareaFx = new Scroller($(this.options.thumbarea), {area: this.options.area, velocity: this.options.speed, direction: "x"});
+			//$(this.options.thumbarea).setStyle('overflow', 'hidden');
+			$(this.options.thumbarea).setStyle('overflow-x', 'hidden')
+			// Thumb Events
+			$(this.options.thumbarea).addEvent('mouseenter', this.scrollthumbareaFx.start.bind(this.scrollthumbareaFx));
+			$(this.options.thumbarea).addEvent('mouseleave', this.scrollthumbareaFx.stop.bind(this.scrollthumbareaFx));
+			// init tumbObjs
+			this.tumbObjs = $(this.options.thumbarea).getElements('img');
+			$each(this.tumbObjs, function(imgObjekt, index){
+				imgObjekt.addEvent('click', function(index){	
+					this.scrollimageareaFx.toElement(this.imgObjs[index]);
+				}.bind(this,index));
+
 				if(index==this.options.start){
-					this.scrollthumbareaFx.toElement(imgObjekt);
-                    this.aktuellePositionX = imgObjekt.getPosition().x;
                     imgObjekt.fireEvent('click',this,10);//delay for safari
                 }
 			}.bind(this));
-            //Thumb-Events
-           $(this.options.thumbarea).addEvent('mouseenter', function(event){ 
-				event.stop(); 
-				if(this.aktivesEvent==false){
-					this.aktivesScrollEvent = event;
-					this.aktivesEvent = true;
-					$clear(this.interval);//zur Sicherheit
-					this.interval = this.scrollME.periodical(5,this);
-				}
-			}.bind(this));
-			$(this.options.thumbarea).addEvent('mousemove', function(event){ 
-				event.stop(); 
-				this.aktivesScrollEvent = event; //update
-				if(this.aktivesEvent==false){// falls gestopt wieder starten
-					this.aktivesEvent = true;
-					$clear(this.interval);//zur Sicherheit
-					this.interval = this.scrollME.periodical(5,this);
-				}
-			}.bind(this));
-			$(this.options.thumbarea).addEvent('mouseleave', function(event){ 
-				event.stop(); 
-				$clear(this.interval);
-				this.aktivesEvent = false;
-				this.aktivesScrollEvent = null;
-			}.bind(this));
-            $(this.options.thumbarea).addEvent('mouseout', function(event){ 
-                 event.stop(); 
-                 $clear(this.interval);
-                this.aktivesScrollEvent = null;
-                this.aktivesEvent = false;
-            }.bind(this));
 		}else{
 			alert('Missing thumbarea');
 		}
 		//init Images
 		if($(this.options.imagearea)){
 			$(this.options.imagearea).setStyle('overflow', 'hidden');
 			$(this.options.imagearea).setStyle('overflow-x', 'hidden');
+			// init imgObjs
+			this.imgObjs=$(this.options.imagearea).getElements('img');
         }else{
 			alert('Missing imagearea');
 		}
-	},
-	//animation
-	scrollME:function(){
-
-        //$('text').set('html',$time()+" "+$(this.options.imagearea).getPosition().x+" "+this.aktuellePositionX+" "+$(this.options.imagearea).getSize().x);
-		if(this.aktivesScrollEvent){
-			if(this.aktivesScrollEvent.client.x>$(this.options.thumbarea).getPosition().x+this.aktuellePositionX+$(this.options.thumbarea).getSize().x/2+this.options.notScrollWidth/2){//rechts von Mitte des Bildschirms + nichts mach Zone 200px = 2*100px
-				this.aktuellePositionX+=this.options.speed;
-				if(this.aktuellePositionX>=$(this.options.thumbarea).getScrollSize().x-$(this.options.thumbarea).getSize().x){
-					this.aktuellePositionX=$(this.options.thumbarea).getScrollSize().x-$(this.options.thumbarea).getSize().x;
-				}
-				this.scrollthumbareaFx.set(this.aktuellePositionX, 0);
-			}
-			if(this.aktivesScrollEvent.client.x<$(this.options.thumbarea).getPosition().x+this.aktuellePositionX+$(this.options.thumbarea).getSize().x/2-this.options.notScrollWidth/2){//links von Mitte des Bildschirms  - nichts mach Zone 200px = 2*100px
-				this.aktuellePositionX-=this.options.speed;
-				if(this.aktuellePositionX<=0){
-					this.aktuellePositionX=0;
-				}
-				this.scrollthumbareaFx.set(this.aktuellePositionX, 0);
-			}
-
-		}
+
+
+		//check
+		if(this.imgObjs.length!=this.tumbObjs.length) alert("Error: The number of images do not match!");
 	}
 
 });

package.yml

@@ -3,4 +3,4 @@ category: Widgets
 tags: [scroll, image, effect, gallery, book]
 author: BMo
 demo: http://software.BMo-design.de/scrollGallery.html
-current: 1.3
+current: 1.4