YUI Shoveler

The shoveler is a carousel like module that allows you to shovel back and forth between content.

Code

Build: gallery-shoveler.zip

Source and Test: gallery-shoveler-src.zip

Examples

Basic example of a shoveler where the data already exist in the HTML. This one is made to look like a shoveler seen on the Amazon.com page There are 3 visible cells and it will be cyclical. Also I want the cells to be animaged when I scroll so I'm setting the renderFunctionName to "renderCellsWithPop" 

	shoveler1 = new Y.Shoveler( {
		contentBox: "#shoveler1",
		numberOfVisibleCells: 3,
		cyclical: true,
		renderFunctionName: "renderCellsWithPop"
	});
 
	shoveler1.render();

Shoveler 1 Test

This shoveler has dynamic content. By setting dynamic to true and setting numberOfCells to 20 I'm telling it to load cells dynamic but only to expect 20 cells. This one has 4 visible cells is cyclical and renders with a pop like the one above. In order for the call to be dynamic I need to has a function to create a url to do the data fetching. In this example I just have a yql query that will fetch my most recent flicker photos. I also have a function to handle the data when it returns. This one just shows the image and title and replaces it in the shoveler. Lastly prefetch is set to true. This means the shoveler will try to prefetch data to show. Prefetch occurs as soon as you scroll, so try it out. Scroll once(a normal load) and then do it again(with prefetched data) 

	shoveler2 = new Y.Shoveler( {
		contentBox: "#shoveler2",
		numberOfVisibleCells: 4,
		cyclical: true,
		numberOfCells: 20,
		dynamic: true,
		renderFunctionName: "renderCellsWithPop",
		prefetch: true,
		contructDataSrc: function(start, numberOfVisibleCells) {
			var url = "http://query.yahooapis.com/v1/public/yql?"+
				"q=select%20*%20from%20flickr.photos.search("+
				start+"%2C"+numberOfVisibleCells+
				")%20where%20user_id%20%3D%20%2217004938%40N00%22&format=json&callback=shoveler2.handleDataRetrieval";
			return url;
		},
		
		handleData: function(data) {
			var photos = data.query.results.photo, imageUrl, photo, i, len;
			for(i = 0, len = photos.length; i < len; i++) {
				photo = photos[i];

				imageUrl = "http://farm"+photo.farm+
					".static.flickr.com/"+photo.server+
					"/"+photo.id+"_"+photo.secret+"_t.jpg";
				
				this.replaceCell("<img src='"+imageUrl+"'/>"+photo.title, this.get("fetchStart")+i);
				
			}
		}
    });
 
    shoveler2.render();

Shoveler 2 Test

Very basic shoveler to show adding and removing cells with some cells loading in the html 

	shoveler3 = new Y.Shoveler( {
		contentBox: "#shoveler3",
		numberOfVisibleCells: 3,
		cyclical: true
    });
 
    shoveler3.render();
	
	Y.get("#shoveler3AddCell").on("click", function() {
		shoveler3.addCell(shoveler3.get("numberOfCells"));
	});
	
	Y.get("#shoveler3RemoveCell").on("click", function() {
		shoveler3.removeCell(shoveler3.get("numberOfCells")-1);
	});
	
	Y.get("#shoveler3AddCell5").on("click", function() {
		shoveler3.addCell(shoveler3.get("numberOfCells"), 5);
	});

Shoveler 3 Test

Very basic shoveler is set up to look like a Netflix shoveler. This one is not cyclical so you can notice of the buttons change when a user reaches the end. 

	shoveler4 = new Y.Shoveler( {
        contentBox: "#shoveler4",
		numberOfVisibleCells: 3
    });
 
    shoveler4.render();

Shoveler 4 Test

  • Robin Hood: Prince of Thieves
  • Change of Habit
  • The Great Race
  • Jerry Maguire
  • The Seven Year Itch
  • Gentlemen Prefer Blondes
  • Dirty Dancing
  • Buck and the Preacher

This shoveler is also dynamic and similar to the earlier dynamic example. The extra differnce here is this shoveler is infinite. The shoveler will continue to grab data according to the contructDataSrc function 

	shoveler5 = new Y.Shoveler( {
		contentBox: "#shoveler5",
		numberOfVisibleCells: 5,
		infinite: true,
		dynamic: true,
		contructDataSrc: function(start, numberOfVisibleCells) {
			var url = "http://query.yahooapis.com/v1/public/yql?"+
				"q=select%20*%20from%20flickr.photos.search("+
				start+"%2C"+numberOfVisibleCells+
				")%20where%20tags%20%3D%20%22monkey%22&format=json&callback=shoveler5.handleDataRetrieval";
			return url;
		},
		
		handleData: function(data) {
			var photos = data.query.results.photo, imageUrl, photo, i, len;
			for(i = 0, len = photos.length; i < len; i++) {
				photo = photos[i];

				imageUrl = "http://farm"+photo.farm+
					".static.flickr.com/"+photo.server+
					"/"+photo.id+"_"+photo.secret+"_t.jpg";
				
				this.replaceCell("<img src='"+imageUrl+"'/>"+photo.title, this.get("fetchStart")+i);
				
			}
		}
    });
 
    shoveler5.render();

Shoveler 5 Test