API Home       Error Codes       Your API Keys
Back to JavaScript

imageloop API - JavaScript Demo 3





Notes:

  • Click on the title image of a looop. The looop images will appear in the lower box. (you need to have at least one looop created by yourself)
  • You can scroll through the looop list (upper box) by clicking on the left and right buttons
  • You can move the looop list by dragging it (just press the left mouse button on gray piece and move the mouse).
  • You can edit image meta data in the lower box by clicking on the text field you'd like to edit - modify the text value and the value will be updated when you leave the input field.

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




Codes


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

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 elMyImagesContent = document.getElementById("myImagesContent");

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) {}

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

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

function addImage(img) {
	try {
		var elCh = document.createElement("div");
		elMyImagesContent.appendChild(elCh);

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

		var elTblx = document.createElement("table");
		elCh.appendChild(elTblx);
		var elTbl = document.createElement("tbody");
		elTblx.appendChild(elTbl);

		addImageEdit(elTbl,"Name",img.getName(),imgNameChanged.bindAsEventListener(img));
		addImageEdit(elTbl,"Descr.",img.getDescription(),imgDescriptionChanged.bindAsEventListener(img));
		addImageEdit(elTbl,"Tags",img.getTags(),imgTagsChanged.bindAsEventListener(img));
		addImageEdit(elTbl,"Link",img.getContentLink(),imgLinkChanged.bindAsEventListener(img));
	}
	catch (x) {
		alert("addImage: "+x+" "+x.message);
	}
}

function addImageEdit(elTbl,title,val,handler) {
	try {
		var elTr = document.createElement("tr");
		elTbl.appendChild(elTr);
		var elTh = document.createElement("th");
		elTr.appendChild(elTh);
		elTh.appendChild(document.createTextNode(title));
		var elTd = document.createElement("td");
		elTr.appendChild(elTd);
		var elInp = document.createElement("input");
		elInp.type="text";
		if (val)
			elInp.value=val;
		elInp.attr_elInp = elInp;
		elInp.onchange=handler;
		elTd.appendChild(elInp);
	}
	catch (x) {
		alert("addImageEdit: "+x+" "+x.message);
	}
}

function imgNameChanged(event) {
	var tgt = event.target || event.srcElement;
	this.setName(tgt.value);
}

function imgDescriptionChanged(event) {
	var tgt = event.target || event.srcElement;
	this.setDescription(tgt.value);
}

function imgTagsChanged(event) {
	var tgt = event.target || event.srcElement;
	this.setTags(tgt.value);
}

function imgLinkChanged(event) {
	var tgt = event.target || event.srcElement;
	this.setContentLink(tgt.value);
}

loadLooops();