Making a Jmol Pop-in Page
This tutorial steps you through making this web page, which displays two images of ethane that convert to live Jmol images at the user's request.  If you started on the main tutorial page you have probably completed the preparation steps.

Preparation:
  1. Download the data file ethane-staggered-3-21G.log.
  2. Open this file in the Jmol application.
  3. Open the Jmol Web Page Maker dialog by clicking on the "Export to Web Page..." icon export to web page icon or by selecting "Export to Web Page..." within the "Export" submenu of the "File" menu.
  4. Select the Pop-in template by clicking on the Pop-in tab.
  5. Enter the necessary information into the fields on the left hand side of the dialog(see general set up)
 
Jmol0 will appear here.


CLICK IMAGE TO ACTIVATE 3D
Insert a caption for Ethane Bond Lengths here.
Make the first view:
  1. Open the scripting console (right mouse button, control-click on one button mouse, > Console).
  2. Navigate to the last frame of the file. Use either the command "frame 1.9" or the pop-up menu (right mouse button > model > 1.9).
  3. Display the measurements using the command: "measure allconnected (*)(*)".
  4. Save this view by clicking on the "Add Present Jmol State as Instance..." button near the bottom right of the dialog.
  5. Enter the text you want to appear in the button in the small dialog that pops up.  I suggest "Ethane Bond Lengths".  Click "OK".  This will add this instance to the list in the large window on the right side of the dialog box.
 
Jmol1 will appear here.


CLICK IMAGE TO ACTIVATE 3D
Insert a caption for Ethane HOMO b here.
Make the second view:

1. Remove the measurements using the command: "measure off".
2. Display the molecular orbital using the command: "mo 9".
3. Turn on spinning using the command: "spin on".
4. Save this view by clicking on the "Add Present Jmol State as Instance..." button near the bottom right of the dialog.
5. Enter the text you want to appear in the button in the small dialog that pops up.  I suggest "Ethane HOMO b".  Click "OK".  This will add this instance to the list in the large window on the right side of the dialog box.
6. Note this view could also be created using the menus.
 Create the web page:
  1. Double check your entries in the text boxes on the left side of the dialog box (you may not have reset them since making a different web page).
  2. Click on the "Save .html as ..." button near the bottom left.  Choose a location and name for the page.  A directory of that name will be created in the location you choose.  It will contain many files.
  3. Check that your page is OK. If necessary move a copy of the whole directory just created to your test directory (see instructions on testing locally).  Open the .html file.  It should look like thisExternal Website, Opens in New Window.
  4. Add the descriptive text, change the background color and things like that.  You only need to edit the .html document.  
    • Open the .html document in your favorite WYSIWYG Web page editor.  Some suggestions are: 
      • KompoZerExternal Website, Opens in New Window (open source, not recommended as of version 0.8 because bugs damage javascript),
      • SeaMonkeyExternal Website, Opens in New Window (Open source.  You must check "Preserve original source formatting" in Preferences > Composer.  This is the author's favorite editor),
      • AmayaExternal Website, Opens in New Window (open source, complete, but harder to use).
      • Be careful when editing not to do anything to the picture of Jmol.  It is possible to damage the javascript so that the page will not work.
Once the page is the way you want it copy everything in the directory containing this file to your web server except for the jsmol directory.  Make sure to put it in the appropriate directory on your server.

You're done!
Based on template by A. Herráez as modified by J. Gutow
Page skeleton and JavaScript generated by export to web function using Jmol 14.1.7 2014-01-22 20:25: on Jan 24, 2014.