How to embed an svManager/SimpleViewer 2 gallery in your home page

Home | Instructions | Source code

NOTE: SimpleViewer has been upgraded to version 2.0. This document applies to SimpleViewer 2.0.

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 – log into svManager, create a new gallery and add some images

You can also use an existing gallery

Step 3 – 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 4 – 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>
  swfobject.embedSWF("simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);

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>
  swfobject.embedSWF("/svmanager/g1/simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);

Find the following line:

  var flashvars = {};

Do not change this line but add an additional line below it:

  var flashvars = {};
  flashvars.baseURL="/svmanager/g1/";

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 5 – set the gallery to a fixed size

Find the following line in the index.php code and delete it.

  html, body	{ height:100%; }

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

  swfobject.embedSWF("/svmanager/g1/simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);

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.

  swfobject.embedSWF("/svmanager/g1/simpleviewer.swf", "flashContent", "800", "600", "9.0.124", false, flashvars, params);

Step 6 – 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">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.adobe.com/go/getflashplayer/">Get Flash.</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.