Embedding into a HTML Page

SimpleViewer uses a JavaScript code snippet to handle the Flash and Mobile players.

To embed your gallery in an existing HTML page:

  1. Use svBuilder to create your SimpleViewer gallery.
  2. Copy the entire contents of your SimpleViewer gallery folder into the folder that contains your HTML page.
  3. In svBuilder, go to the Publish panel and copy the provided Embed Code. The embed code will look something like this:

    <!--START SIMPLEVIEWER EMBED.-->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    simpleviewer.ready(function () {
    simpleviewer.load("sv-container", "100%", "100%", "222222", true);
    });
    </script>
    <div id="sv-container"></div>
    <!-- END SIMPLEVIEWER EMBED -->


  4. Paste the provided code into the body of the HTML page where you want to the gallery to appear.
  5. Load the HTML page in a browser to preview your gallery.

Using Percentage Heights

When setting SimpleViewer's height as a percentage, it may be necessary to set the parent div's size as inline CSS. This is due to inconsistencies in how different browsers report div sizes. For example: if you place the sv-container div inside a parent div called sv-parent and want the sv-parent div to have height of 50%, you should add the height as inline CSS like this:

<div id="sv-parent" style="height:50%">
    <div id="sv-container"></div>
</div>

Embed Code Parameters

The simpleviewer.load() function takes these parameters:

simpleviewer.load(divId, width, height, backgroundColor, useFlash, flashvars, params, attributes, useColorCorrection);

where:

  • divId - the id of the HTML div to replace with the gallery.
  • width - pixel or percentage width of gallery.
  • height - pixel or percentage height of gallery.
  • backgroundColor - gallery background color as a hexadecimal number. Set this to "transparent" to use a transparent background.
  • useFlash - If true, display the Flash player when supported and the mobile player when not. If false, always display the Mobile player. Defaults to true.
  • flashvars - flashVars to pass to the SWF (optional)
  • params - params to pass to the SWF (optional)
  • attributes - attributes to pass to the SWF (optional)
  • useColorCorrection - If true, use Flash 10's color correction when possible. Pro only, defaults to true. Check here for details.

To specify flashvars, params or attributes and pass them into the load function do something like this:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.galleryURL = "gallery.xml";
var params = {};
params.wmode = "transparent";
var attributes = {};
attributes.id = "svInstance";
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "222222", true, flashvars, params, attributes);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

Using an External svCore Folder

The svcore folder contains all the core files required by the SimpleViewer gallery. Usually it is placed inside each gallery folder. If you would like to share the svcore folder between multiple galleries, you can move it to an external folder. To do this, update the SimpleViewer JavaScript import src path to point to the simpleviewer.js file in the new svcore folder location. Note that the svcore folder must remain intact and the simpleviewer.js file must remain in the svcore/js folder.

<script type="text/javascript" src="my_gallery_folder/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', '222222', true);
});
</script>
<div id="sv-container"></div>

Using an External Gallery Folder

Typically the HTML page that embeds the gallery is placed inside the gallery folder as described above. This avoids many common pathing errors. If you would like the embedding HTML page to be in a different folder than the gallery folder, there are 2 methods we recommend:

1) Using BaseURL (Recommended)

You can use the baseURL flashVar option to point to the external gallery folder location.

To embed using baseURL, paste this code into the embedding HTML page:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="http://www.example.com/mygallery/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.baseURL = "http://www.example.com/mygallery/";

simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "222222", true, flashvars);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

  • Set the simpleviewer.js import src path to the relative or absolute URL of the simpleviewer.js file in the gallery folder svcore/js folder
  • Set the baseURL value to the relative or absolute URL of the gallery folder.

2) Using an iFrame

You can also use an iframe to embed a gallery in a different folder. Please note that this method will limit the functionality of the Mobile Player. When embedding the Mobile Player in an iframe, the 'fullscreen' and 'open image' buttons are disabled.

To embed using an iframe, paste this code into the embedding HTML page:

<iframe src="mygalleryfolder/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>

  • Replace the src parameter with the relative or absolute URL to the gallery folder index page.
  • Replace the width and height parameters with the width and height of your gallery.

Multiple Galleries

SimpleViewer allows you to add an unlimited number of galleries to your website. Navigation between multiple galleries is handled by the embedding website. Another option is to use Showkase, our complete portfolio website creation tool which supports creating multiple SimpleViewer galleries.

To add multiple SimpleViewer galleries to your site, first 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. To do this we recommend you create a separate gallery folder for each gallery, then use the baseURL embedding method described above to embed your galleries in the target page. Make sure the first parameter of each SV.simpleviewer.load() call matches the id of the div you want to load the gallery into.

Using a Resizable Gallery with a Header

Sometimes it is useful to have a HTML header or footer and have SimpleViewer resize to fill the remaining browser window. In this case we can use JavaScript to dynamically resize the gallery when the browser is resized. 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 using the same method as described above. Note that the SimpleViewer gallery will not show in Dreamweaver's design preview. To view your gallery, view the HTML page in a browser. Do not use Dreamweaver's Insert -> Media menu action to embed the gallery as this will not insert the required JavaScript embed code.

Embedding in a Joomla Site

To embed a SimpleViewer gallery into a site built with Joomla v3.3, do the following:

  1. Create a gallery using svBuilder.
  2. Upload the entire gallery folder to your web server via FTP.
  3. Create a new Article and click the 'HTML' button on the toolbar.
  4. Paste the embed code generated by svBuilder.
  5. Use the baseURL option to point to the absolute URL of the gallery folder you uploaded in step 2, as described above.
  6. Click the 'Save' button.

You may need to do the following (once only) in order to allow <script> tags to be accepted.

  1. Go to 'Administration -> Extensions -> Plugin Manager'.
  2. Select 'Editor - TinyMCE'.
  3. In the 'Basic Options' panel, remove 'script' from the list of 'Prohibited Elements' and click the 'Save' button.

Embedding in a Drupal Site

To embed a SimpleViewer gallery into a site built with Drupal v7.31, do the following:

  1. Create a gallery using svBuilder.
  2. Upload the entire gallery folder to your web server via FTP.
  3. Create a new Article and select 'Full HTML' from the 'Text Format' drop-down menu.
  4. Paste the embed code generated by svBuilder.
  5. Use the baseURL option within the embed code to point to the absolute URL of the gallery folder you uploaded in step 2, as described above.
  6. Click the 'Save' button.

Embedding in a Web Template Site

If you use a Web Template Site (such as Moonfruit, Website Baker, Website Builder, Weebly, Wix or Yola) which does not allow you to upload your gallery folder to the web space that they provide, then you will need to host your gallery elsewhere and load it into an iframe on your web page. As it is no longer possible to host web pages with file sharing services Dropbox and Google Drive, it would be best to use a regular web host with FTP support.

  1. Sign up for some web space with a regular web host. SimpleViewer galleries do not require any special server requirements so a free hosting account may be suitable (although a paid account should give greater stability and better support).
  2. Create a SimpleViewer gallery using svBuilder or svBuilder-Pro.
  3. Upload the complete gallery folder to your web space using an FTP program such as Filezilla. Your web host should be able to help you with this if necessary.
  4. Add an iframe to the web page in your Web Template Site, loading the gallery's 'index.html' file. For example:

    <iframe src="https://www.example.com/gallery/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Embedding with iWeb

To embed a SimpleViewer gallery into a website built with Apple's iWeb, do the following:

  1. Create a gallery using svBuilder or svBuilder-Pro.
  2. Upload the entire gallery folder to your webserver using an FTP program.
  3. In iWeb create a new page. From the Widgets menu, select 'HTML Snippet'.
  4. In the HTM Snippet popup window, paste the following code. Switch the src URL to point to the gallery folder you uploaded in step 2.

    <iframe src="http://www.example.com/mygallery/" width="800" height="600" frameborder="0" scrolling="no"></iframe>

  5. Save and Publish your new page.

Embedding with Adobe Muse

To embed a SimpleViewer gallery into a website built with Adobe Muse, do the following:

  1. Create a gallery with svBuilder or svBuilder-Pro.
  2. In Muse, select the page you wish to embed the SimpleViewer gallery into and go to the Design tab.
  3. Go to 'Object -> Insert HTML...' and paste the baseURL embedding code found here, changing the 2 instances of 'http://www.example.com/mygallery/' to the name of your own gallery folder.
  4. To set the width and height of the gallery, change the width and height of the HTML frame within Muse as appropriate.
  5. Upload your Muse site using the 'File -> Upload to FTP Host...' option.
  6. Upload your Juicebox gallery folder (using a separate FTP program) to your root Muse website directory.

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