• KWA
  • Member
  • Offline
  • Registered: 2013-01-04
  • Posts: 4

Topic: How to embed code for Basekit for Host Gator?

I'm a complete newb in this area of trying to load flash onto a web page I created with Basekit on Host Gator. I've read instructions until my head was about to explode. I contacted Host Gator this morning and found that I can only embed an outside source...I believe that is what simpleviewer is, right? Again, I'm very confused...so, please be patient. Anyway, I'm working from a macbook pro osx 10.8.2 (Mountain Lion). I downloaded SVBUILDER which is sitting in my Application file as...SVBUILDER. I got my gallery looking how I want it to look and proceeded to PUBLISH. When I got to the Publish page, it asks where to save...so, I just used what was prefilled in the box...which was my desktop. I copied the embed code on that page and attempted to paste in the embed widget on Basekit...no go. So, I then looked up HELP on Basekit and found instructions for embedding .SWF. However, I don't see anything from SVBUILDER that contains a proper .SWF.
So, I did more searching and found info that said it's best to download into a service like "Dropbox". So, I opened an account with Dropbox and have attempted to find .SWF...no where to be found. Yes, there's SVCore or something like that...but, I'm at a loss as it doesn't give me a link in the format Basekit is suggesting.
The good news is that I can get my gallery up on Safari browser by clicking on the Index.html. However, I never could figure out how to get a proper link over to the embed widget. I don't even know if I saved my work properly and what I need to do to embed into Host Gator's Basekit.

I'm sorry in advance for the poor soul that answers this post! I promise I'll do my best to understand. I love the way the gallery functions on SVBuilder. I absolutely abhor the stock photo display widgets with Basekit on Host Gator. So, I'm desperate to get this functioning. Any help is greatly appreciated.

Ken

  • Registered: 2008-07-06
  • Posts: 6,329

Re: How to embed code for Basekit for Host Gator?

First of all, a SimpleViewer gallery is more than just a SWF file. There is a SWF file in the 'svcore/swf/' folder but in order for the gallery to feature Universal Playback (whereby a gallery will be displayed by the Mobile Player on mobile devices and in browsers which do not have Adobe Flash Player installed and activated), it is necessary to follow the embedding instructions here rather than extract the SWF file from the 'svcore/swf/' folder and embed that directly in your web page.

Essentially, to embed a SimpleViewer gallery in a web page, you will need to:
(1) Upload your gallery files (as created by svBuilder) to your web server using an FTP program such as Filezilla.
(2) Insert the recommended embedding code into your web page.

If your web host does not allow you to upload files and folders to your web space via FTP, then you would need to find an alternative host for your SimpleViewer gallery. One such host would be Dropbox.

In order to upload SimpleViewer gallery to Dropbox, follow these instructions:
(1) Download and install the Dropbox client program from this web page
(2) Run the install program and sign up for a free Dropbox account
(3) Create your SimpleViewer gallery with the method of your choice (such as svBuilder)
(4) Drag and drop the entire gallery folder (not just the contents) into the 'Public' folder within the newly created Dropbox folder on your computer
(5) Navigate towards your gallery's 'index.html' file (within 'username/Dropbox/Public/gallery_folder/'), right-click it and select 'Dropbox -> Copy public link'

Now, all you would need to do to embed the gallery in your web page is to insert a single line of HTML code, an <iframe> 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>
Steven Speirs
SimpleViewer Support Team
  • KWA
  • Member
  • Offline
  • Registered: 2013-01-04
  • Posts: 4

Re: How to embed code for Basekit for Host Gator?

Hi Steven,

Thanks so much for the assistance. I decided to go the Dropbox route and have done the following:

Created account with dropbox and applied for public folder...which I have.

Then I used SVbuilder to create my gallery.

I saved the gallery to my Documents folder on my desktop.

I then went into Dropbox and proceeded to import/download each file within my SVbuilder folder that is in my Documents. I made sure to breakdown each folder to copy each file. I put ALL of these into the PUBLIC file on Dropbox.

My next step was to right click on the Index.html file...which I did and got the link to share with the public. However, I pasted the link into the text you provided by removing the "Dropbox URL goes here".

I kept all the text as you had written it...and I'm not getting anything to show up on the website.

As a matter of fact, when I double click the Index.html file in Dropbox...it just shows me an empty page with this url "https://dl-web.dropbox.com/get/PUBLIC/i … w=b5e09d67"

I'm obviously doing something wrong. I did notice that in your text box...you have width="800"  and height="600" and frame border dimensions...

When I created my gallery, I think I had 100% for the above width and height...and I created a frame border. Could there be an issue with how I created my gallery and the text you wrote for me?

Ughh. I'm sorry again for being a dunce brain. But, I promise to sing your praises after you get me going! ;-)


BTW, this is the link that I pulled from the Index.html to share with the public:    "http://dl.dropbox.com/u/132625534/index.html" but, again is not displaying the gallery.



Ken

Last edited by KWA (2013-01-05 00:55:43)

  • Registered: 2008-07-06
  • Posts: 6,329

Re: How to embed code for Basekit for Host Gator?

I then went into Dropbox and proceeded to import/download each file within my SVbuilder folder that is in my Documents. I made sure to breakdown each folder to copy each file. I put ALL of these into the PUBLIC file on Dropbox.

As noted in Step #4 of my instructions above, you should drag and drop the entire gallery folder in a single action from your 'My Documents' folder on your desktop into your Dropbox 'Public' folder. You should not transfer the files and subfolders individually.

I did notice that in your text box...you have width="800"  and height="600" and frame border dimensions...

You can set your iframe's dimensions to whatever you like. 800 x 600 was just a suggestion. Likewise, you can choose to show or hide the iframe border using the 'frameborder' attribute.

BTW, this is the link that I pulled from the Index.html to share with the public:    "http://dl.dropbox.com/u/132625534/index.html" but, again is not displaying the gallery.

That link looks fine and is the one you should use in your iframe. However, the gallery does not display because the other gallery files do not seem to have been uploaded to the correct locations.
Try dragging and dropping the entire gallery folder, as I mentioned above, into your Dropbox 'Public' folder.

Steven Speirs
SimpleViewer Support Team
  • KWA
  • Member
  • Offline
  • Registered: 2013-01-04
  • Posts: 4

Re: How to embed code for Basekit for Host Gator?

Steven Speirs wrote:

I then went into Dropbox and proceeded to import/download each file within my SVbuilder folder that is in my Documents. I made sure to breakdown each folder to copy each file. I put ALL of these into the PUBLIC file on Dropbox.

As noted in Step #4 of my instructions above, you should drag and drop the entire gallery folder in a single action from your 'My Documents' folder on your desktop into your Dropbox 'Public' folder. You should not transfer the files and subfolders individually.

I did notice that in your text box...you have width="800"  and height="600" and frame border dimensions...

You can set your iframe's dimensions to whatever you like. 800 x 600 was just a suggestion. Likewise, you can choose to show or hide the iframe border using the 'frameborder' attribute.

BTW, this is the link that I pulled from the Index.html to share with the public:    "http://dl.dropbox.com/u/132625534/index.html" but, again is not displaying the gallery.

That link looks fine and is the one you should use in your iframe. However, the gallery does not display because the other gallery files do not seem to have been uploaded to the correct locations.
Try dragging and dropping the entire gallery folder, as I mentioned above, into your Dropbox 'Public' folder.



Hey Steven,

Got it!!!!

There's only one thing I don't like. When I go full screen...I chose a black background and the arrow buttons are also black/dark gray...do I need to go back and customize again and publish? Or, is there a slick way to change it without having to redo everything?

Thanks for your help!!!

Last edited by KWA (2013-01-05 05:42:42)

  • Registered: 2008-07-06
  • Posts: 6,329

Re: How to embed code for Basekit for Host Gator?

If you want to make any changes to the configuration options of a gallery, you can edit the gallery using svBuilder (or edit the 'gallery.xml' file manualy in a plain text editor) and then just upload the new 'gallery.xml' file to your Dropbox gallery folder overwriting the old one.
You may have to clear your browser's cache before reloading the gallery in order to see the changes.

When I go full screen...

When you go fullscreen, the fullscreen background color should be the same as the normal mode background color.
The only exception is when setting the gallery's background to be transparent.
It is not possible to have a transparent background in fullscreen mode (as the gallery covers more than just the browser window).
You could have a transparent background in normal mode and a colored background in fullscreen mode by selecting the 'Background Transparent' checkbox in svBuilder and then manually introducing the bgcolor Flash param as an Embed Code Parameter as follows:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var params={};
params.bgcolor="#123456";
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "transparent", true, null, params);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->
Steven Speirs
SimpleViewer Support Team
  • KWA
  • Member
  • Offline
  • Registered: 2013-01-04
  • Posts: 4

Re: How to embed code for Basekit for Host Gator?

Steven Speirs wrote:

If you want to make any changes to the configuration options of a gallery, you can edit the gallery using svBuilder (or edit the 'gallery.xml' file manualy in a plain text editor) and then just upload the new 'gallery.xml' file to your Dropbox gallery folder overwriting the old one.
You may have to clear your browser's cache before reloading the gallery in order to see the changes.

When I go full screen...

When you go fullscreen, the fullscreen background color should be the same as the normal mode background color.
The only exception is when setting the gallery's background to be transparent.
It is not possible to have a transparent background in fullscreen mode (as the gallery covers more than just the browser window).
You could have a transparent background in normal mode and a colored background in fullscreen mode by selecting the 'Background Transparent' checkbox in svBuilder and then manually introducing the bgcolor Flash param as an Embed Code Parameter as follows:

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

Steven, thank you so much for all of your help! I'm actually beginning to like the process! We love what SVbuilder has done for my wife's website. Can't thank you enough!

Best Wishes,

Ken