Skip to content

Instantly share code, notes, and snippets.

@edraizen

edraizen/grid.html

Created October 5, 2021 16:20
Show Gist options
  • Save edraizen/feeddd06867618a567df5673f9eb2758 to your computer and use it in GitHub Desktop.
Save edraizen/feeddd06867618a567df5673f9eb2758 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grid.html
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
<style type="text/css">
.mol-container {
width: 100%;
height: 800px;
position: relative;
display: inline-block;
}
</style>
</head>
<body>
<div id="gldiv" class="mol-container"></div>
<script type="text/javascript">
var viewers = null;
var viewer = null;
$(function() {
viewers = $3Dmol.createViewerGrid(
'gldiv', //id of div to create canvas in
{
rows: 2,
cols: 2,
control_all: true //mouse controls all viewers
},
{ backgroundColor: 'lightgrey' }
);
$.get('1jpy.cif', function(data) {
viewer = viewers[0][0];
viewer.addModel(data,'cif');
viewer.setStyle({sphere:{}});
viewer.zoomTo();
viewer.render( );
viewer = viewers[0][1];
viewer.addModel(data,'cif');
viewer.setStyle({stick:{}});
viewer.zoomTo();
viewer.render( );
viewer = viewers[1][0];
viewer.addModel(data,'cif');
viewer.setStyle({cartoon:{color:'spectrum'}});
viewer.zoomTo();
viewer.render( );
viewer = viewers[1][1];
viewer.addModel(data,'cif');
viewer.setStyle({cartoon:{colorscheme:'chain'}});
viewer.zoomTo();
viewer.render();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment