API Home       Error Codes       Your API Keys
Back to JavaScript

imageloop API - JavaScript Demo 2





Notes:

  • Click on the title image of a looop you would like to display in the bottom box. (you need to have at least one looop created by yourself)
  • You can scroll through the looop list (upper box) and image list (lower box) by clicking on the left and right buttons
  • You can move the lists by dragging them (just press the left mouse button on gray piece and move the mouse).

Loading looops...
<<
>>
Select looop...
<<
>>




Codes


var scrollerLooops = new DivScroller(
	document.getElementById("myLooopsLeft"),
	document.getElementById("myLooopsRight"),
	document.getElementById("myLooopsContent"));
var scrollerImages = new DivScroller(
	document.getElementById("myImagesLeft"),
	document.getElementById("myImagesRight"),
	document.getElementById("myImagesContent"));

var elLooopInfo = document.getElementById("looopInfo");
var elMyLooops = document.getElementById("mylooops");
var elMyLooopsRow = document.getElementById("mylooopsRow");
var elSelectLooop = document.getElementById("selectLooop");
var elLooopimages = document.getElementById("looopimages");
var elMyImagesRow = document.getElementById("myImagesRow");

function looopUpdate(response) {
	var looops = il.getLooopsFromResult(response.looops);
	looops = il.sortList(looops,"name");
	var l = looops.length;
	elLooopInfo.innerHTML = ""+l+" looops";
	elMyLooops.removeChild( document.getElementById("loadingLooopsMsg") );
	for (var n=0 ; n<l ; n++) {
		var looop = looops[n];
		addLooop(looop);
	}
}

function loadLooops() {
	il.getMyLooopsExAsync(looopUpdate);
}

function addLooop(looop) {
	var elCh = document.createElement("td");

	var img = looop.getTeaserImage();
	var elImg;
	if (img!=null) {
		elImg = document.createElement("img");
		elImg.src = img.getFastImageLink("rw133h98f");
	}
	else {
		elImg = document.createElement("span");
		elImg.setAttribute("class","emptyLooopImage");
	}

	elCh.appendChild( elImg );
	elCh.appendChild( document.createElement("br") );
	elCh.appendChild( document.createTextNode(looop.getName()) );
	
	elCh.onclick = looopSelected.bind(looop);

	elMyLooopsRow.appendChild(elCh);
}

function looopSelected() {
	var images = this.getImagesEx();
	var l = images.length;

	try {
	elLooopimages.removeChild(elSelectLooop);
	} catch (x) {}
	scrollerImages.reset();

	while (elMyImagesRow.firstChild!=null) {
		var ch = elMyImagesRow.firstChild;
		elMyImagesRow.removeChild(ch);
	}

	for (var n=0 ; n<l ; n++) {
		var img = images[n];
		addImage(img);
	}
}

function addImage(img) {
	var elCh = document.createElement("td");

	var elImg = document.createElement("img");
	elImg.src = img.getFastImageLink("rw133h98f");
	elCh.appendChild( elImg );
	elCh.appendChild( document.createElement("br") );
	elCh.appendChild( document.createTextNode(img.getName()) );

	elMyImagesRow.appendChild(elCh);
}

loadLooops();