Marvin JS Examples - Display More Images Immediately

Back to index

A molecule table should be displayed as the loading of the page is finished. See below the commented code

Preparation of the page is in progress ...

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"}));
	}
Back to index