Topic: How to embed a gallery in your home page

We've had a sudden outbreak of interest in how to embed a gallery in a web site home page. I guess it's all getting a bit confusing so I've created a sub-domain on my web site with an example. You can find the example on http://svm1.jhardie.com.

Hope this helps.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

Jack, I am having a heck of a time trying to follow this. I just purchased SvManager to ease the task of updating a Simpleviewer gallery that I would like to embed in my website. The page in question's location is outdoornj.com/html/ which is where all the sites' pages are stored. When I place all the simpleviewer files in this /html directory, imbed the following:

<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div><script type="text/javascript">var fo = new SWFObject("viewer.swf", "viewer", "800", "600", "8", "#181818");fo.write("flashcontent");    </script>

onto the webpage I want the gallery to appear in (using Netobjects Fusion 10) and manually run the buildgallery.php script all works fine - the gallery shows up nicely placed within the desired page. But I cannot get these same results with SvManager, as it keeps creating the gallery within a /SvManager/G1 path. When I try to change the path in the "Path from web root" dialogue box,(to /html/)  I get an error message saying "notice:new folder is is not empty - no move". Looking at your example below, I gather I need to edit that settings.php file, but just not sure what the new path should be, and all the permutations I've tried have not worked.

here is the actual link to the page the way I would like it, created manually running the buildgallery.php meathod:

http://www.outdoornj.com/html/untitled28.html


Any help you could offer would be much appreicated. Really want this to work! Thanks in advance.

Last edited by dweitzman (2009-11-11 17:24:42)

Re: How to embed a gallery in your home page

Jack it will be of great help if you post the code in PHP. I am comfortable with this so please let me know how can it be done in PHP. One more thing, I tried with jsp but giving a bunch of error and finally nothing coming..not even without border. Can nybody help me out?

Re: How to embed a gallery in your home page

SvManager will not move a gallery into the web root or import a gallery from the web root. This is a deliberate safety feature to prevent svManager overwriting anything that it shouldn't.

However, your gallery is not in the web root, it's in /html/ so you should be able to import your existing gallery into svManager. Go to the import screen and enter /html/ as the import path.

One thing needs just a little caution in your case. You seem to have another gallery (not a SimpleViewer gallery) in the same /html/ folder. You should still be ok to do an import but I don't know anything about this other gallery or how it works so backup your site before you do the import.

I guess you won't want to change the structure of your site since it's all up and running but as a bit of general advice to anyone reading this, I'd always put each gallery in its own directory if possible. It's not essential but it's generally safer and less confusing in the long run.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

Edward – I'm not sure why you would want to use php in this case. There are two reasons why svManager normally creates an index.php file in each gallery rather than index.html. The first is so it can set the html page title and the second is so it can set the background color. In this case we are talking about a one-off customized page so why not just set the title and background in the html and javascript?

Of course, you could do this with php or if you need php for some other aspect of the page then you can give your index file a php suffix but it's not strictly necessary and it's arguably difficult enough already to get an svManager gallery working in the web root without bringing php into it.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

Thanks for the quick reply, Jack. Yes, that worked fine - so simple! There was no conflict with the other gallery, but the plan is to do away with that one once I get SimpleViewer working the way I would like.
So here's a twist on it for you - how would I go about using SvManager for multiple galleries within this structure. Each gallery could be embedded on a seperate page, but due to the structure of the site, all the pages are within the /html/ directory. So how would SvManager know which gallery to import? It seems to me that each import would just overwrite the other, leaving me with one gallery?
Thanks again!

Re: How to embed a gallery in your home page

You are correct, you can't use the import trick for that site structure.

I'd create new galleries with svManager and I'd accept the default and leave them inside the svmanager directory. You could use svManager to move each of them somewhere else on the server if you prefer. But wherever you put them, I'd keep each one in its own directory.

The question then is how do you link to them. Well, I'd just modify the site navigation. So if the gallery is in (say) /svmanager/g1/ then the site navigation points to /html/svmanager/g1/index.php

You can also add more html to each index.php file so it looks pretty and has navigation to get back to the rest of the site.

The alternative is to move the index.php files out of their galleries, give each of them a new name and put them under /html/. This is possible but since you are moving the index file relative to the gallery then you'll need to worry about paths. If you need to go this way then please come back to the forum and I'll post some instruction but it's just worth checking-out the other approach first.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

I guess I'm missing something here. If I modify the site navigation to point to the gallery within \html\svmanager, I just get the gallery outside of my own site, wheras I am trying to have it show up embedded in a page of the site itself. The problem seems to be that the web authoring software I am using requires the page files to be in the /html/ directory so that it can find the other assets the page requires (banner logo, typeface styles, etc.). I tried publishing the file for the page I want to contain the gallery to the svmanager/g3 directory and then set up a navigation bar link within the site to that page - the gallery shows up fine embedded into a site page, but the site page doesn't have any of the correct style assets - (no banner logo, etc) since the path to those files is now broken.
Here's the result: http://www.outdoornj.com/svmanager/g3/untitled30.html

So what am I doing wrong? Do I need to try the option of moving the index.php files you describe? If so, how would I go about that?
Thanks, Jack. I do appreciate your time on this.

Re: How to embed a gallery in your home page

Mmm, your web authoring software does seem a bit restrictive but I'm not familiar with the system that you use so I can't help much there. Let's try the other option – putting the gallery index file where you want it instead of inside the gallery folder where it normally lives.

The first thing you need to do is to tell svManager to use absolute paths inside the gallery.xml file. Normally it uses relative paths but they won't work if the gallery index file is not inside the gallery directory. Find the settings file for your gallery type. For SimpleViewer it's svmanager/plugins/simpleviewer/settings.php. Find the line:

define('SV_PATH_SCHEME', '');

and change this to the absolute path to svmanager on your site. I think this is /svmanager/ in your case:

define('SV_PATH_SCHEME', '/svmanager/');

You could also use 'http://www.outdoornj.com/svmanager/' instead. Either should work. Check that your existing gallery still works – it should!

Next create a new test gallery with svManager, say g4

Make a copy of your http://www.outdoornj.com/html/index.html file and park it in the /html/ directory. Let's say you call it test.html.  Find the following two lines inside test.html:

var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");

//fo.addVariable("xmlDataPath", "gallery.xml");

Remove the comments from the second line and change both the paths:

var fo = new SWFObject("../svmanager/g4/viewer.swf", "viewer", "100%", "100%", "8", "#181818");

fo.addVariable("xmlDataPath", "../svmanager/g4/gallery.xml");

You should then have two html pages with two different names inside your /html/ folder and each one showing a different gallery.

Edit these two pages so they look how you want. I  think you know how to do this – it's just a matter of combining the code that produces the gallery with the stuff that gives your header and navigation etc.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

I don't know, I guess I just don't get it, or know enough about html, or both. I followed your directions, and do end up with two gallery pages- index.html and test.html. Bedoth of which load fine as different galleries, albeit not within my web page. But it all falls apart when I try to place the html within my page. I left up the result for you to check out -
www.outdoornj.com/html/untitled30.html
Maybe if you check out the source you can tell me what is going wrong. It looks to me like the html from the "test.html" file is in there, but obviously not correctly. What's also odd is when I add the basic test.html code into my web page and publish it, the code within the original /html/test.html file, in the server's /html/ directory  changes. The software I am using (Netobjects Fusion 10) has all kinds of ways to add html to the site's pages such as to  insert within a text box, refrence external html, import an html page, but none of these work, leaving me with the same result you see. Man this is frustrating because I feel like the solution is so close - just outside of my grasp!
Thanks once again, for all your time with this.

Re: How to embed a gallery in your home page

Both of which load fine as different galleries, albeit not within my web page.

Well, we're making progress, you've done the hard stuff  smile

The code inside untitled30.html is pretty badly garbled. All the right stuff is in there but not in the right places!

What you are trying to achieve is to insert the following code into the <head> of your document:

<script type="text/javascript" src="swfobject.js"></script>

That first line of code is to load the swfobject javascript file which is needed to load the actual gallery.

Then in the <body> of your page, you need the code for loading the gallery:

<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>    
    <script type="text/javascript">
        var fo = new SWFObject("http://www.outdoornj.com/svmanager/g4/viewer.swf", "viewer", "100%", "100%", "8", "#181818"); 
        // SIMPLEVIEWER CONFIGURATION OPTIONS
        // To use an option, uncomment it by removing the "//" at the start of the line
        // For a description of config options, go to: 
        // http://www.airtightinteractive.com/simpleviewer/options.html
        fo.addVariable("xmlDataPath", "http://www.outdoornj.com/svmanager/g4/gallery.xml");
        //fo.addVariable("firstImageIndex", "5");    
        //fo.addVariable("langOpenImage", "Open Image in New Window");
        //fo.addVariable("langAbout", "About");    
        //fo.addVariable("preloaderColor", "0xFFFFFF");      
        fo.write("flashcontent");    
    </script>

This code needs to sit inside the <body> of your web page code at the point where you'd like the gallery to appear.

Could you create the page how you want it in Netobjects and then use a text editor to copy in these blocks of code? The first line can go anywhere in the <head>. To get the second block of code in the right place. You could put a placeholder image where you want the gallery – just any old image – and then you could replace the <img> tag with the second block of code above.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

It sounds so simple! But still no go. Here's a link to a page with the code placed in the header and body, as suggested, but still no gallery.
http://www.outdoornj.com/html/untitled34.html
There's not much else to the page, and if you check the source it seems pretty straight forward to me with not much else there. I have tried moving the body code you suggested all around the body, and tried the trick of placing an image tag in the body, uploading the file and then editing the file once on the server to replace the image with the simpleviewer code, but no luck. I did at one point have the gallery show up above the page banner, but couldn't get it into the body and don't remember how I got it up there in the first place!
The gallery exists,  http://www.outdoornj.com/svmanager/g4, so that's not the problem.
Any other thoughts?

Re: How to embed a gallery in your home page

Try setting the width and height of the Flash movie to fixed pixel values instead of percentages, e.g.

var fo = new SWFObject("http://www.outdoornj.com/svmanager/g4/viewer.swf", "viewer", "800", "600", "8", "#181818");

OR

Set a height on the containing element and leave width and height of the Flash movie at 100%.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

Yes! Jack, your a genius! Check out the results at http://www.outdoornj.com

So tell me, how did you know to make that simple size adjustment? Is that just a standard type fine tuning that anyone more familiar with html then the laymen (me) would have seen and figured out? Im just wondering how to take steps to solving this type of thing on my own next time.

Anyway, thanks a bunch. I really appreciate your sticking at it with me - you demonstrated the way support should be! Nice!
big_smile

Re: How to embed a gallery in your home page

And how did I know? You said it – genius of course  wink

Well, not reeeelly genius. This is what I did.

1. Eyeballed your code – everything looked ok
2. Ran your page through the W3C validator – still ok
3. Tried it in several different browsers and found it looked different in Safari and Firefox
4. Poked around with Firebug and found the problem

Great to see it working.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

Great tutorial, thanks. Now, is there a way to embed the .swf generated by svManager into a parent .swf? I'm building a Flash site for a client and I'd like him to be able to generate his own galleries with svManager, then publish them to his site. Is this possible? Thanks.

Re: How to embed a gallery in your home page

I'm probably not the best person to advise on the Flash end of this. SvManager doesn't generate a swf, it just copies the viewer swf from a master file into the gallery. It might be worth a look around in the SimpleViewer or SimpleViewer Pro forums to see if anyone else is doing what you want to do.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

jack

you seem to be the person to ask on embedding. I have just started using a managed hosting solution called business catalyst.com do you know if svmanager works with that as i cant seem to get it working?

Regards

steve

Re: How to embed a gallery in your home page

&hellip;as i cant seem to get it working

What symptoms are you seeing?

Most embedding problems are caused by broken paths. There's a more recent example for SimpleViewer 2 on http://sv2.jhardie.com and it's worth reviewing the section in the user manual on relative and absolute paths.

jack

Jack Hardie
SimpleViewer Support Team.

Re: How to embed a gallery in your home page

I have created a gallery named g1 with the standard svmanager product. To imbed it in a page of my web site, I have copied the g1 folder with its full content from the svmanager folder to the folder which contains both the index page and the page where I want to imbed the gallery, then pasted the following in the header of the page where I want to imbed the gallery:
<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="g1/";
            flashvars.galleryURL = "gallery.xml";
            var params = {};
            params.bgcolor = "00ac00";
            params.allowfullscreen = true;
            params.allowscriptaccess = "always";
            swfobject.embedSWF("g1/viewer.swf", "flashContent", "520", "600", "9.0.124", false, flashvars, params);
        </script>   
and pasted the following in the body of the page where I want to imbed the gallery:
<div id="flashContent">SimpleViewer requires JavaScript and the Flash Player.
            <a href="http://www.adobe.com/go/getflashplayer/">Get Flash.</a>
            </div>
I get in my page http://golf-rotary-louveciennes-foretdu … otos110410 an insertion of the right size, the right color, but with a message 'simpleviewer (white rectangle) gallery not found'.

When I try http://golf-rotary-louveciennes-foretdu … tegolf/g1/ I do get my gallery ok.    

There must be something wrong with my url's, but what?

Re: How to embed a gallery in your home page

I have copied the g1 folder with its full content from the svmanager folder to the folder which contains both the index page and the page where I want to imbed the gallery

Have you tried moving the gallery using svManager rather than moving it yourself? There is some information on this in the user manual under the Customize screen heading. This way, svManager will fix the paths for you.

There are some restrictions. You cannot move a gallery to the web root – but I think that's ok for you. The new gallery directory should be empty when you do the move but you can add other files later.

When you get the gallery working in its new home then you can edit the index.php file so it looks how you want it to.

jack

Jack Hardie
SimpleViewer Support Team.