JSMol

Enter ChemSpider ID and click Load button:
Bond Width: Multiple Bond Spacing:
Zoom Scaling: Pinch Scaling:
Spin Rate X: Spin Rate Y:
Spin FPS:

Code examples how to put JSmol widget to the page to view molecule structures Molecule specified by mol with advanced jsmol parameters set...
		var jsmol = $('#jsmolContainer').jsmol({
                width: 300,
                height: 300,
				smiles: "c1ccccc1",
				color: "white",
				bondWidth: 4,
				zoomScaling: 1.5,
				pinchScaling: 2.0,
				multipleBondSpacing: 4,
				spinRateX: 0.2,
				spinRateY: 0.5,
				spinFPS: 20,
				spin:true
            }).data('jsmol');
	
... and how to change structure shown by csid dynamically...
        $('#loadBtn').click(function () {
			$('#jsmolContainer').jsmol("setCSID", $('input').val());
		});
    
... and how to toggle the molecule spinning on and off...
		$('#toggleSpinBtn').click(function () {
			$('#jsmolContainer').jsmol("toggleSpin");
		});
	
... and how to change any of the other options for this jsmol widget...
        $('#refreshBtn').click(function () {
		    $("#jsmolContainer").jsmol("option", "bondWidth", bondWidthSpinner.spinner("value"));
			$("#jsmolContainer").jsmol("option", "multipleBondSpacing", multipleBondSpacingSpinner.spinner("value"));
			$("#jsmolContainer").jsmol("option", "zoomScaling", $('#zoomScalingInput').val());
			$("#jsmolContainer").jsmol("option", "pinchScaling", $('#pinchScalingInput').val());
			$("#jsmolContainer").jsmol("option", "spinRateX", $('#spinRateXInput').val());
			$("#jsmolContainer").jsmol("option", "spinRateY", $('#spinRateYInput').val());
			$("#jsmolContainer").jsmol("option", "spinFPS", spinFPSSpinner.spinner("value"));
			$("#jsmolContainer").jsmol("refresh");
		});