Topic: Gallery won't show

I created a gallery in SV Builder Pro and placed the folder contaning the gallery in the wp content folder on my server, then copied the embed code which I added to the html page on my website. I have tried different combinations of code to display the gallery, but with no success. I seem to be having a problem making sense of the base url method that is needed to show the gallery, as it is not at all straightforward.
Could you please give me an idea of what I'm not getting, and point me in the right direction?

Re: Gallery won't show

For reference, the baseURL method of embedding is documented here.

Essentially, once you have created a gallery with svBuilder-Pro, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseURL embedding code into the body of your WordPress page or post (ensuring that the method of entry is 'Text' rather than 'Visual'). It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'simpleviewer.js' file and the baseURL itself, pointing towards the gallery folder) are correct.

For example, if your gallery folder is named 'gallery' and you upload the complete gallery folder to the root directory on your web server, then the embedding code you would use would look something like the following.

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

(The leading slashes in the paths above denote your root directory.)

Please note that the 'simpleviewer.js' file should be loaded only once per page (rather than once per gallery) and if you plan to embed multiple galleries throughout your WordPress site and there may be more than one gallery displayed on a single page, then I would recommend loading the 'simpleviewer.js' file in the <head> section of your active theme (usually in a file named 'header.php') rather than at the beginning of each gallery's embedding code.

Alternatively, you might like to try WP-SimpleViewer, the dedicated SimpleViewer plugin for WordPress which allows you to create and embed galleries in your pages and posts directly within the WordPress Dashboard without the need for any manual coding. Please see the plugin's support page for details.

If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.

Steven Speirs
SimpleViewer Support Team

Re: Gallery won't show

Thanks for your reply.

I have followed your instructions but the gallery still won't show. I would be grateful if you could have a look at my gallery page, which is http://www.libraimages.co.uk/test-2

Re: Gallery won't show

There are a couple of problems:

(1) In your embedding code, you use the following line:

<script type="text/javascript" src="http://www.libraimages.co.uk/libra_gallery/svcore/js/simpleviewer.js"></script>

However, the 'simpleviewer.js' file is not in that location on your web server. If I go directly to that location in a browser, I get an error 404 (file not found).
Please check that you have uploaded your gallery files to the correct location on your web server.

(2) You need to include the 'flashvars' variable as a parameter in the 'simpleviewer.load()' line so that the baseURL is used.
Change:

simpleviewer.load("sv-container", "100%", "100%", "000000", true);

... to:

simpleviewer.load("sv-container", "100%", "100%", "000000", true, flashvars);

More information about embed code parameters can be found here.

Also, in a WordPress environment where you may not have complete control over the gallery's parent containers (and do not know what heights, if any, they have been assigned via CSS), I would recommend that you use a fixed height for the gallery rather than a percentage. (You might run into problems if you have a gallery with 100% height in a parent container with no height specified.)
Try:

simpleviewer.load("sv-container", "100%", "600", "000000", true, flashvars);
Steven Speirs
SimpleViewer Support Team

Re: Gallery won't show

I have checked on my web server and I have simpleviewer.js and swfobject.js inside my js file. Shall I delete the latter?

I have corrected the gallery parameters.

Re: Gallery won't show

I have checked on my web server and I have simpleviewer.js and swfobject.js inside my js file. Shall I delete the latter?

No. There is no need to change the contents of the 'svcore' folder (and the 'swfobject.js' file is required to embed the Flash version of the gallery).

The problem is that your embedding code uses the following line of code:

<script type="text/javascript" src="http://www.libraimages.co.uk/libra_gallery/svcore/js/simpleviewer.js"></script>

However, try going to that location (http://www.libraimages.co.uk/libra_gall … eviewer.js) directly in a browser. You should see the 'simpleviewer.js' file's code. Instead, an error 404 page (file not found) is displayed.
I do not know where on your web server your 'simpleviewer.js' file is but it is not where this line of code is pointing towards.
Check the location of your 'svcore' folder and adjust the paths in your embedding code if necessary.

Maybe if you could upload a screenshot (to a file sharing site such as Dropbox) showing your web site's file structure and the location of your gallery files, I might be able to determine the correct paths for your embedding code.

Steven Speirs
SimpleViewer Support Team

Re: Gallery won't show

Thanks Steven. I placed the gallery folder outside the wp content and I can now see it. There are still a couple of problems however:-

I set the background as transparent, but it doesn't show as transparent - how can I correct this please?

The slideshow only works properly on my desktop - even reducing the size of my main image doesn't work on my tablet or my android phone. My site is mobile friendly but the image won't fit on the screen full sized. Is there something I can do to make the gallery friendly on all devices?

Re: Gallery won't show

I set the background as transparent, but it doesn't show as transparent - how can I correct this please?

Your gallery's background is currently set as black (#000000).
Please see this FAQ for details:
How do I give SimpleViewer a transparent background?

Change:

simpleviewer.load("sv-container", "100%", "650", "000000", true, flashvars);

... to:

simpleviewer.load("sv-container", "100%", "650", "transparent", true, flashvars);

My site is mobile friendly but the image won't fit on the screen full sized.

Your page layout reduces the width of your gallery significantly. A couple of the gallery's parent containers have a margin or padding which take up quite a lot of the viewport's width on a mobile device such as an iPhone. (It looks to be about a third of the total available width). This, along with your gallery's fixed height of 650px means that your gallery is long and thin.
Your images are actually being displayed as large as they can be within your gallery's image area (if they were displayed any larger, they would be cropped on their left and right sides) but a landscape-style image in a long thin gallery results in space to the top and bottom of the image.
Changing the resolution size of your images will not make a difference. SimpleViewer will dynamically scale the images to fit so just make sure they are large enough that they need to be scaled down a bit (small images will not be scaled up unless you set imageScaleMode="SCALE_UP").
Two possible workarounds would be:
(1) Reduce the height of your gallery so that there is less space at the top and bottom of your images.
... or:
(2) Change your page layout so that your gallery can occupy more horizontal space (and there is less space to the left and right of the gallery).

Steven Speirs
SimpleViewer Support Team

Re: Gallery won't show

I have re-scaled my gallery as you suggested, but with no luck. It looks OK on the desktop, but just looks weird on my tablet and phone.
Is there something else I can do to make it presentable on these devices?

Re: Gallery won't show

I notice that you have tried setting your gallery's width to a fixed value (which is a reasonable thing to try).
However, this means that the gallery will have this fixed width in all browsers and on all devices and the gallery's width will be greater than the width of an iPhone screen.
I would normally recommend that you set your gallery's width to 100% so that it fills the parent container's width (no matter what it is). The problem with your page layout/template is that on a narrow screen, there is very little width available for the page's content (whether it is a SimpleViewer gallery or anything else).

Maybe you would have better luck using another one of our products - Juicebox.
Juicebox is an HTML 5 image viewer which does not use or rely on Adobe Flash Player at all. Juicebox supports many more configuration options than the Mobile Player within SimpleViewer.

When a Juicebox gallery is embedded in a page and displayed on a mobile device, a Splash Page is displayed instead of the gallery. The Splash Page is a placeholder for the gallery and is essentially an image link to the gallery itself. When the Splash Page is tapped or clicked, the gallery opens in a new page of its own which maximizes the amount of space available for it on a small device. This might be better for your current web page (to display just the Splash Page image link in the narrow content container than to try to squeeze the entire gallery in there instead).
More information about the Juicebox Splash Page can be found here.

You can try Juicebox-Lite free. (You can download it from the download page here.)

More information on the differences between SimpleViewer and Juicebox (and about a discount off the price of Juicebox-Pro for existing SimpleViewer-Pro users) can be found in this SimpleViewer blog entry.

Steven Speirs
SimpleViewer Support Team