SimpleViewer Embedding Guide

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:

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


<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>
Paste the provided code into the body of the HTML page where you want to the gallery to appear.
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:

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:

<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>

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.

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:

<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>

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:

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

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 the Joomla CMS, do the following:

Create a gallery using svBuilder or svBuilder-Pro.
Upload the entire gallery folder to the Joomla root directory via FTP.
Go to the 'Content' menu and select 'Article Manager'.
Click on the 'New' icon.
Give the article a title and use the following code to embed the gallery:

<iframe src="gallery_folder_name/index_page_name.html" width="600" height="400" frameborder="0" scrolling="no"></iframe>

You may need to do the following to allow <iframe> tags to be used:

Go to the 'Site' menu and select 'User Manager'.
Click on your user name.
In the 'Parameters' control panel, for the 'User Editor' select 'Editor - No Editor'.
'Apply' or 'Save' this change.

Embedding in a Drupal Site

To embed a SimpleViewer gallery into a site built with the Drupal CMS, do the following:

Create a gallery using svBuilder or svBuilder-Pro.
Upload the entire gallery folder to the Drupal root directory via FTP.
From the 'Admin' menu, click 'Create content' and select either 'Page' or 'Story'.
Give the page/story a title and use the following code in the 'Body' section to embed the gallery:

<iframe src="/drupal_folder_path_from_root/gallery_folder_name/index_page_name.html" width="600" height="400" frameborder="0" scrolling="no"></iframe>
Under the 'Body' section, click 'Input format' and select 'Full HTML'.
At the foot of the page, click the 'Save' button.

Embedding in a Web Template Site

If you use a Web Template Site which does not allow you to upload your gallery folder to the web space that they provide (such as Website Baker, Website Builder, Weebly, Wix or Yola), then an alternative solution would be to host your gallery with Dropbox and embed your gallery using an iframe following these instructions:

Create a gallery using svBuilder or svBuilder-Pro.
Download and install the Dropbox client program from here.
Run the install program and sign up for a free Dropbox account.
Drag and drop the entire gallery folder (not just the contents) into the 'Public' folder within the newly created Dropbox folder on your computer.
Navigate towards your gallery's 'index.html' file (within 'username/Dropbox/Public/gallery_folder/'), right-click it and select 'Dropbox -> Copy public link'.
Embed the gallery by inserting an iframe into your web page whose 'src' attribute points towards the 'index.html' page within the gallery folder (the URL you copied in Step #5 above). The iframe would look like the following:
<iframe src="Dropbox_URL_Goes_Here" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Please note that if your Dropbox account was created after 4 October 2012, you will need to manually create a 'Public' folder on your account by following the 'Creating a Public folder' instructions on this web page.

Embedding with iWeb

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

Create a gallery using svBuilder or svBuilder-Pro.
Upload the entire gallery folder to your webserver using an FTP program.
In iWeb create a new page. From the Widgets menu, select 'HTML Snippet'.
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>
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:

Create a gallery with svBuilder or svBuilder-Pro.
In Muse, select the page you wish to embed the SimpleViewer gallery into and go to the Design tab.
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.
To set the width and height of the gallery, change the width and height of the HTML frame within Muse as appropriate.
Upload your Muse site using the 'File -> Upload to FTP Host...' option.
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

SimpleViewer.net