Marvin JS Examples - Display More Images Immediately

First of all, you need the marvin object that encapsulates the whole Marvin JS API into a common namespace. The MarvinJSUtil loads it asynchronously with the help of an invisible iframe. After marvin is available, the exportImages function is called automatically.

	var marvin;
	$(document).ready(function handleDocumentReady (e) {
		// load marvin namespace in a separate frame to avoid css conflict
		// the display attribute of this iframe cannot be "none", but you can hide it somewhere	
		$('body').append($('<iframe>', { id: "marvinjs-iframe", src: "../marvinpack.html"}));
		// wait for the reference of marvin namespace from the iframe
		MarvinJSUtil.getPackage("#marvinjs-iframe").then(function (marvinNameSpace) {
			// the reference to the namespace is arrived but there is no guaranty that its initalization has been finished
			// because of it, wait till the ready state to be sure the whole API is available
			marvinNameSpace.onReady(function() {
				marvin = marvinNameSpace;
				exportImages();
			});
		},function (error) {
			alert("Cannot retrieve marvin instance from iframe:"+error);
		});
	});

The exportImages function converts predefined molecules into images and renders them into a table.

	function exportImages() {
		// initalize table
		$("#imageContainer").empty();
		// iterate the array of molecule sources to create images
		$.each(molecules, function(index, value) {
			var imgData = marvin.ImageExporter.molToDataUrl(value);
			// create a new cell with the new image and append to the table
			if(imgData != null) {
				var molCell = $('<div>', { class: "mol-cell"});
				$("#imageContainer").append(molCell);
				molCell.append($('<span>', { text: (index+1) }));
				var img = $('<img>');
				img.attr('src', imgData);
				img.attr('data-mol', escape(value));
				molCell.append(img);
			}
		});
		// close table
		$("#imageContainer").append($('<div>', { class: "table-bottom"}));
	}