How to embed an svManager/TiltViewer gallery in your home page

Home | Instructions | Source code

When svManager creates a new gallery it puts everything into a gallery folder called in this case svmanager/g1. This is fine for most purposes – your site navigation can simply link to svmanager/g1/index.php.

Sometimes, your gallery is your home page – you want the gallery to appear as soon as visitors browse to your web site. The best way to do this is to leave the gallery folder and its contents untouched so svManager has no problem in managing the gallery and to copy the index.php file from the gallery into your home page. However, it’s not quite that simple – you need to make sure that all the links inside the index.php file are still working after you move it.

Another issue is that a home page will not usually be just a gallery – there will be other content such as logos, headers, navigation etc and the gallery needs to be embedded into this content.

Step 1 – backup

Before making any significant change to your web site you should back-up the whole thing

Step 2 – set up svManager for absolute rather than relative links

The default setting in svManager is to create image paths relative to the gallery folder. This will cause problems when the index file is outside the gallery folder. So it’s necessary to change one of the settings in svManager. In the settings file svmanager/plugins/tiltviewer/settings.php, change one line from:

  define('TV_PATH_SCHEME', '');
      

to the svmanager url on your site. For this example site it is:

  define('TV_PATH_SCHEME', 'http://tv1.jhardie.com/svmanager/');
      

Step 3 – log into svManager, create a new gallery and add some images

You can use an existing gallery but you must log into svManager, move to one of the edit screens and press the update button for the changes you made in Step 2 to take effect.

Step 4 – Copy the index.php file

Copy the index.php file from your gallery into the root directory of your web site. Be careful not to overwrite any index.php file that may be there already - rename the old one to index.bak in case you need it again.

Step 5 – edit the paths in the index.php file

Find the following lines in the code of the index.php file:

      $preferences = file_get_contents('preferences.txt');
      <script type="text/javascript" src="swfobject.js"></script>
      var fo = new SWFObject("TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#000000");
      fo.addVariable("xmlURL", "gallery.xml");

Change these to the appropriate paths for your web site. For this example site, the paths are:

      $preferences = file_get_contents('svmanager/g1/preferences.txt');
      <script type="text/javascript" src="svmanager/g1/swfobject.js"></script>
      var fo = new SWFObject("svmanager/g1/TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#000000");
      fo.addVariable("xmlURL", "svmanager/g1/gallery.xml");

At this stage, you should have a working gallery in your home page but it occupies the whole screen which may not be what you want.

Step 6 – set the gallery to a fixed size

Find the following lines in the index.php code and delete them.

      /* hide from ie on mac \*/
    	html {
    		height: 100%;
    		overflow: hidden;
    	}
    	
    	#flashcontent {
    		height: 100%;
    	}
      /* end hide */

Find the following line (you have already edited it once)

var fo = new SWFObject("svmanager/g1/TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#000000");

Change the percent sizes to fixed sizes in pixels. This example uses 800px wide by 600px high. Choose a size to fit your page design.

var fo = new SWFObject("svmanager/g1/TiltViewer.swf", "viewer", "800", "600", "9.0.28", "#000000");

Step 7 – add more content to customize your page

You can add html content above or below the div that contains the gallery:

      <h1>Some stuff here</h1>
      <div id="flashcontent">TiltViewer requires JavaScript and the latest Flash player.
         <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a>
      </div>
      <p>More stuff here</p>

You can also add your own css – from the point of view of the browser it’s just a normal web page – just don’t make any more changes to the php or javascript unless you are familiar with these technologies.