API Home       Error Codes       Your API Keys
Back to JavaScript

imageloop API - JavaScript Demo 4





Notes:
  1. Select a looop to display.
  2. Images will appear.
  3. Click on the right thumbnails to move one image to the right or click on the left thumbnails to move one image to the left.


Click on a looop to view it... (you need to have at least one looop created by yourself)




Codes


var elMyLooops = document.getElementById("myLooops");
var elImageViewer = document.getElementById("imageViewer");
var elImageBig = document.getElementById("imageBig");
var elImagesLeft = document.getElementById("imagesLeft");
var elImagesRight = document.getElementById("imagesRight");

var imageCount=0;
var images;
var imagesSmall;
var imagesLarge;
var imageIndex;

var startEffect=null;

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

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

	elImagesLeft.onclick=moveLeft;
	elImagesRight.onclick=moveRight;
}

function moveLeft() {
	if (imageIndex>0)
		imageIndex--;
	moveToCurrentImage();
}

function moveRight() {
	if (imageIndex<imageCount-1)
		imageIndex++;
	moveToCurrentImage();
}

function addLooop(looop) {
	try {
        var ccnt = looop.getContentCount();
		if (ccnt==0) // no images in looop - skip
			return;
	
		var elCh = document.createElement("a");
		elCh.href="#";
		elCh.appendChild( document.createTextNode(looop.getDescriptiveName()+" ("+ccnt+")") );
		elCh.onclick = looopSelected.bind(looop);
		elCh.appendChild( document.createElement("br") );

		elMyLooops.appendChild(elCh);
	}
	catch (x) {
		alert("addLooop: "+x+" "+x.message);
	}
}

function looopSelected() {
	try {
		images = this.getImagesEx();
		imageCount = images.length;

		imageIndex = 0;

		imagesSmall = new Array();
		imagesLarge = new Array();

		for (var n=0 ; n<imageCount ; n++) {
			var img = images[n];
			var is = new Image();
			is.src = img.getFastImageLink("rw133h98f");
			imagesSmall.push( is );
			var il = new Image();
			il.src = img.getFastImageLink("rw133h98f");
			imagesLarge.push( il );
		}

		startEffect = new Effect.Opacity(elImageViewer, { } );
		startEffect.update(0);
		moveToCurrentImage();
		elImageViewer.style.visibility="visible";
	}
	catch (x) {
		alert("looopSelected: "+x+" "+x.message);
	}
	return false;
}

function moveToCurrentImage() {
	var eli = imagesLarge[imageIndex];
	if (eli.complete)
		imageLoadComplete();
	else
		eli.onload = imageLoadComplete;

	var limg = document.createElement("nobr");
	for (var io = imageIndex-10; io<imageIndex;io++) {
		if (io>=0 && io<imageCount)
			limg.appendChild(imagesSmall[io]);
	}

	var rimg = document.createElement("nobr");
	for (var io = imageIndex+1; io<imageIndex+10;io++) {
		if (io>=0 && io<imageCount) 
			rimg.appendChild(imagesSmall[io]);
	}

	while (elImagesLeft.firstChild) {
		elImagesLeft.removeChild(elImagesLeft.firstChild);
	}
	elImagesLeft.appendChild(limg);
	limg.style.marginLeft = elImagesLeft.clientWidth-elImagesLeft.scrollWidth;

	while (elImagesRight.firstChild) {
		elImagesRight.removeChild(elImagesRight.firstChild);
	}
	elImagesRight.appendChild(rimg);
}

function imageLoadComplete() {
	while (elImageBig.firstChild)
		elImageBig.removeChild(elImageBig.firstChild);
	var el = imagesLarge[imageIndex];
	elImageBig.appendChild(el);
	el.style.marginTop = (elImageBig.clientHeight-el.scrollHeight)/2;

	if (startEffect!=null) {
		startEffect.start();
		startEffect=null;
	}
}

loadLooops();