Posting 3D photos on the website. Placement of a player on a website

This method requires base experience in HTML-page structure and JavaScript. You also need to have enough knowledge about website structure and setting possibilities.

How to place a JavaScript-player on a website with page template editing possibility

CMS-based websites allow to edit page templates. We will take a look at it, using Joomla-based Fotomekhanika website as example (www.photomechanics.ru). The procedure is the same for other CMS.

  1. Save a 3D photo in HTML5+JavaScript format.
  2. Copy the catalog photo3d-HTML-files via FTP to the server. You need to copy this catalog only once. It contains JavaScript-player files. Further you will need to copy only folders with photos.
  3. Open the HTML-page, which was saved by photo saving and copy the code lines calling JavaScript scripts and connecting CSS-stylesheet.
 

Pic.9. Script and  CSS-file codes copying

  1. Proceed to the page template editing section on your site.

For example, for Joomla websites you have to proceed to Extensions->Template Manager, then click on the tab Template the required template and press Edit main page template.

In other CMS page template editing goes another way. For details see your CMS description or ask your website developers.

 

Рic. How to add JavaScript and CSS-files to the page template.

 

Pic. 11. How to copy pre-view files and catalog files with 3D animation on server

  1. Insert the copied script code (Pic. 10) to the page title (between <head> and </head> tags). Herewith you have to write the path to the required files from the website root. For example, if you have copied a photo3d-HTML-files catalog to the root, you have to add ‘/’ to the beginning of every path to file.

If you haven’t downloaded the folder photo3d-HTML-files in the root, then you have to write the corresponding path in the phm.js file.

  1. Save the template and open any website page, using this template. Click with the right mouse button on empty space. In the popup menu select “ HTML-code view ” (the exact name of this function depend on your browser version). If the required files appeared in the HTML-code in the page title, then the changes were done successfully.
  2. Create a catalog on server, where you will store your 3D animations.
  3. Copy preview files to this catalog, as well as the catalog with your 3D animation (Pic. 11).
  4. From HTML-file, which was saved by the software on your PC, copy the 3D animation code (Pic. 12). It has to look nearly following:

<img id='image' class="photo3d-preview-image {maxZoom:250, frames:36}" src='img3d_000087.jpg' border='0' width='450' height='300' />

 

Рис. 12. How to copy an HTML-code of a 3D animation.

  1. Add this code to the chosen page, exactly to the place, where this 3D animation should be placed. It is usually made by means of the embed HTML-editor in the website content editing panel (see Pic. 8 and section « FTP+iframe integration»).

Change the path in src parameter. It has to point at the preview file, which you have downloaded to the server together with the folder, which contains 3D photos.

Sometimes HTML-editors don’t allow changes in HTML-code or show them incorrectly. It can be usually corrected via corresponding website and editor settings (permit required tags, disable HTML-code pre-procession and post-procession by the editor).

If you can’t find correct settings for your editor, you may use your CMS description or ask a professional programmer.

  1. Save changings, then open the page in browser and check the result. If the 3D photo is not depicted, or is depicted incorrectly, see section “Trouble shooting by integration of 3D photo with website”.

How to place a JavaScript-player on a website without page template editing possibility

Information in this section is based on the previous paragraph. That’s why we kindly recommend you to read the previous section first, if you haven’t done it yet.

In case, your website doesn’t support page template editing possibility, but it still isn’t a static HTML-website, you need to find a place in the code, where the page title is formed. This place is usually the same for all website pages. You need to add to the title JavaScript-player and CSS-files tags (see previous section).

To check the result, open a website page in browser and look at its HTML-code. The corresponding file links must appear in the page title.

If you have a static HTML-website, you will have to all scripts to title of every page, containing a 3D photo.

In the required place of HTML-code insert via an embed editor or a simple text editor (for static sites) the HTML-code of your 3D photo (see previous section).

Save changings, then open the page in browser and check the result. If the 3D photo is not depicted, or is depicted incorrectly, see section “Trouble shooting by integration of 3D photo with website”.

.

 

Pic. 13 How to upload a 3D photo to website using Photo3D Studio software

 Flash-player installation (HTML+SWF format).

The installation of a Flash-player proceeds the same way it was with a Javascript-player. The only difference is in add-on files and 3D photo HTML-code. Sometimes usage of a Flash-player is prohibited on the website by default. In this case, see your CMS description or contact your website developers.

In some cases, a flash-player can be installed as a media content via HTML-editor on website. For details see your CMS description.


 [СЛ1]По-русски можно перефразировать так:

Скопируйте строки (lines) кода, вызывающие (call) скрипты проигрывателя JavaScript и подключающие CSS-стили.