JavaScript Embed

Use this method to embed SimpleViewer in an existing HTML document. The JavaScript embed will automatically handle Flash player detection and provides an easy way to assign parameters to the SWF. JavaScript embeds use SWFObject. This examples load the SWFObject JavaScript file directly from Google's servers. If you would rather load SWFObject locally, check the examples/local.html file which does just that.

To use the JavaScript Embed do the following:

  1. Create your SimpleViewer gallery as normal.
  2. Copy the entire contents of your SimpleViewer gallery folder into the folder that contains your HTML page. If you want to embed to a separate external gallery folder, check here.
  3. Edit your HTML document using a HTML or text editor. Copy and paste this code block into the head of the HTML page:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script type="text/javascript">
    var flashvars = {};
    flashvars.galleryURL = "gallery.xml";
    var params = {};
    params.bgcolor = "222222";
    params.allowfullscreen = true;
    params.allowscriptaccess = "always";
    swfobject.embedSWF("simpleviewer.swf", "flashContent", "800", "600", "9.0.124", false, flashvars, params);
    </script>


  4. Paste this into the body of the HTML page where you want to the gallery to appear:

    <div id="flashContent">SimpleViewer requires JavaScript and the Flash Player.
    <a href="http://www.adobe.com/go/getflashplayer/">Get Flash.</a></div>


  5. Change the "800" from step 3 to be the width of your gallery. It can be a pixel value ("800") or a percentage ("50%").
  6. Change the "600" to be the height of your gallery. It can be a pixel value ("600") or a percentage ("50%").
  7. Change the "222222" to any to be the hexadecimal background color of your gallery.

Object Embed

If the HTML page you are embedding into does not allow JavaScript (for example MySpace), you can use the Object Embed method. This method does not handle Flash detection and may not work for some older browsers. For this reason we reccomend the JavaScript Embed method where possible. There is an example of the object embed in the examples/basic_embed.html file.

To use object embed do the following:

  1. Create your SimpleViewer gallery as normal.
  2. Copy the entire contents of your SimpleViewer gallery folder into the folder that contains your HTML page.
  3. Edit your HTML document using a HTML or text editor. Copy and paste this code block into the body of the HTML page where you want the gallery to appear.

    <object width="800" height="600"><param name="movie" value="simpleviewer.swf?galleryURL=gallery.xml"></param>
    <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always">
    </param><param name="bgcolor" value="222222"></param><embed src="simpleviewer.swf?galleryURL=gallery.xml"
    type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="600"
    bgcolor="222222"></embed></object>


  4. Change the 2x "800" to be the width of your gallery. It can be a pixel value ("800") or a percentage ("50%").
  5. Change the 2x "600" to be the height of your gallery. It can be a pixel value ("600") or a percentage ("50%").
  6. Change the 2x "222222" to be the hexadecimal background color of your gallery.

Using an External Gallery Folder

We recommend that you keep the embedding HTML page in the same folder as the rest of the gallery assets (the gallery folder). This avoids many common pathing issues. If for some reason this you need the HTML page in a different folder than the assets, you need to tell SimpleViewer where the gallery folder assets are located using the baseURL option. You can also use this method to embed a gallery that is hosted on a different server than the embedding file.

To embed a SimpleViewer gallery that is located in a different folder than the embedding HTML page do the following:

  1. Create your SimpleViewer gallery as normal.
  2. Copy the SimpleViewer gallery folder to the location you require relative to the embedding HTML page. In this example the gallery folder is in a sub-folder of the embedding HTML page folder called "svgallery"
  3. Edit your HTML document using a HTML or text editor. Copy and paste this code block into the head of the HTML page:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script type="text/javascript">
    var flashvars = {};
    flashvars.baseURL="svgallery/";
    flashvars.galleryURL = "gallery.xml";
    var params = {};
    params.bgcolor = "222222";
    params.allowfullscreen = true;
    params.allowscriptaccess = "always";
    swfobject.embedSWF("svgallery/simpleviewer.swf", "flashContent", "800", "600", "9.0.124", false, flashvars, params);
    </script>

  4. Paste this into the body of the HTML page where you want to the gallery to appear:

    <div id="flashContent">SimpleViewer requires JavaScript and the Flash Player.
    <a href="http://www.adobe.com/go/getflashplayer/">Get Flash.</a></div>


  5. Change the "800" from step 3 to be the width of your gallery. It can be a pixel value ("800") or a percentage ("50%").
  6. Change the "600" to be the height of your gallery. It can be a pixel value ("600") or a percentage ("50%").
  7. Change the "222222" to any to be the hexadecimal background color of your gallery.
  8. Change the "svgallery" to match the path to the gallery folder relative to the embedding page URL or the absolute URL of the gallery folder. Do this twice: once for the baseURL parameter and once for the path to the SWF in the embedSWF() line.

Multiple Galleries

To add multiple SimpleViewer galleries to your site, create a separate gallery folder for each gallery you require.

Multiple Galleries on Separate HTML Pages

To create multiple SimpleViewer galleries, create a separate gallery folder for each gallery. Create your individual galleries as normal. You can now create a menu page that links to the index.html page in each gallery folder. We recommend that you keep the embedding HTML page in the same folder as the rest of the gallery assets (the gallery folder). This avoids many common pathing issues.

Multiple Galleries on One HTML Page

You can also embed 2 galleries on one HTML page. For each gallery in the page, you need to add the JavaScript Embed Code block in the document head and an associated uniquely named HTML Div in the document body. Ensure the second parameter in each swfobject.embedSWF() line matches the Div name you want the gallery to appear in.

Using a Resizable Gallery with a Header

To add a HTML header or footer and have SimpleViewer resize to fill the remaining browser window, we need to use JavaScript to dynamically resize the SWF when the browser window resizes. In the examples below we use the jQuery JavaScript library to do this.

Embedding Using Dreamweaver

You can use Adobe Dreamweaver to embed a SimpleViewer gallery in any HTML page by doing the following:

  1. Create your SimpleViewer gallery as normal.
  2. Import your SimpleViewer gallery folder into your Dreamweaver project.
  3. Using Dreamweaver, open an existing HTML document or create a new one. Click where you want the gallery to appear and do Insert -> Media -> SWF. Browse to the SimpleViewer gallery folder you imported in step 2. You will now see a gray box where your gallery will appear.
  4. Select the gray box and do Window -> Properties to open the properties panel.
    • Set the gallery width (W), height (H) and background color (bg) in the properties panel.
    • Click the '+' (plus sign) to add a new parameter. Enter flashVars for the name and baseURL=svgallery/ for the value, replacing svgallery/ with the path to the gallery folder relative to the current document.
    • Click the '+' (plus sign) to add a second new parameter. Enter allowFullscreen for the name and true for the value.

      Dreamweaver Parameters
  5. Click the 'Play' button in the Properties panel to see the gallery preview in Dreamweaver. The gallery will not be fully function in Preview mode. To test it fully, open the HTML document in a browser.

Embedding in WordPress

Here are the steps to embed SimpleViewer into a WordPress blog post:

  1. Install the Kimili Flash Embed Plugin.
  2. Create a SimpleViewer gallery as normal. Upload it to any folder on your website. In this example we will upload the gallery to http://www.mysite.com/mygallery
  3. In WordPress, create a new blog post. Click the 'Insert Kimili Flash Embed' button to bring up the 'Kimili Flash Embed Tag Generator' dialog box.
  4. In the 'SWFObject Configuration' panel, set the 'Flash Version' to 9.0.124.
  5. In the 'SWF definition' panel, enter the absolute URL to the gallery SWF in the 'Flash (.swf)' text box. (e.g. http://www.mysite.com/mygallery/simpleviewer.swf )
  6. Set the dimensions of the gallery as pixels or percentage.
  7. In the 'SWF definition' panel, click 'more'. In the 'fvars' text box enter the URL of the gallery folder preceeded by 'baseURL=' (e.g. baseURL=http://www.mysite.com/mygallery)
  8. Enter the 'bgcolor' of your gallery.
  9. Set 'allowfullscreen' to true.
  10. Click 'Generate' to embed the gallery in your post.
Kimili Flash Embed

Troubleshooting Pathing Problems

Most errors when embedding SimpleViewer arise from incorrectly specified paths to the assets required by SimpleViewer (either the XML file or the images and thumbnails).

  • Check your image paths and filenames exactly match the names specified in the XML file.
  • Most web servers are Case Sensitive. This means the letter cases in the filename must exactly match those in the XML document (for example ".jpg" is not the same as ".JPG").
  • Relative paths are relative to the HTML document that embeds the SimpleViewer gallery.
  • Use forward slashes (/) not back slashes when specifying paths.
  • When specifying folder paths, use a trailing slash rather than leading slash
  • To embed a gallery that is in a different folder than the embedding HTML page, check here.