• Registered: 2013-02-11
  • Posts: 13

Topic: How to make a home page?

I'd like to make a home page using a "Basic" page, but I would like to include a collection of JuiceBox or SimpleViewer photos that just rotate (no nav, no thumbs, etc).  Once the pics are in place, I'd like to have text to the left of the photos.  I almost got it by setting up the pic view that I wanted with SimpleViewer, and then wrapping the pasted html in a "float:right" div.  But it didn't work because sometimes you reference the home page from the root of the web site.  Other times it's in the home directory.

I tried setting the home page to a Nav Link pointing to mysite/home/index.html, but the first access still comes from the root of the website.

Is there a way to have a fairly customized home page?

Regards, Jim

  • Registered: 2013-02-11
  • Posts: 13

Re: How to make a home page?

I hacked together http://www.lj3.com to show what I'd like to do.  Any help on how to do this the Showkase way would be very appreciated!

Regards, Jim

  • Registered: 2012-12-16
  • Posts: 940

Re: How to make a home page?

Showkase does not easily allow for such a layout on a Juicebox or SimpleViewer page.

What you could perhaps do is the following:
(1) Create a Juicebox-Pro gallery with JuiceboxBuilder-Pro (as an automated slideshow with no thumbnails or user controls).
(2) Upload the complete gallery folder (not just the contents) to your web server.
(3) Create a Basic page in your Showkase site with a 'Body text layout' of '1-column wide'.
(4) Configure the required containers in the Showkase editor and embed the gallery using the baseUrl method.

For example, if you created a gallery folder named 'gallery' and uploaded it to your web space's root directory, then the code you would enter into the Showkase editor (in 'Source' mode) would look something like the following:

<div id="wrap" style="width: 100%;">
    <div id="left" style="width: 60%; float: left;">
        <div><p>Text goes here.<p></div>
    </div>
    <div id="right" style="width: 40%; float: right;">
        <script src="/gallery/jbcore/juicebox.js"></script>
        <script>
            new juicebox({
                baseUrl: "/gallery/",
                containerId : "juicebox-container",
                galleryWidth: "100%",
                galleryHeight: "400",
                backgroundColor: "#222222"
            });
        </script>
        <div id="juicebox-container"></div>
    </div>
</div>

You may not be able to create or edit the gallery within Showkase but it might be the easiest method of achieving the layout you are looking for without trying to modify the default layout of a Showkase Juicebox page.

  • Registered: 2013-02-11
  • Posts: 13

Re: How to make a home page?

Thank you, Steven.  www.LJ3.com is getting better.  I have a couple of questions:

1.  How do I keep the right edge of the rotating images in line with the right edge of the separator and the nav items?

2.  The height of the JuiceBox area is too high.  How can I make the height be only what it needs to be?

3.  On a Windows Phone, the rotating images are vertically centered in a rather tall column.  The images should be at the top.  I think if I fix item 2, this will likely go away.

Thanks again for your advice.

Regards, Jim

  • Registered: 2013-02-11
  • Posts: 13

Re: How to make a home page?

Ok, I think I got it good enough in a browser.  It still looks a little weird on a Windows Phone.  If you have any suggestions, please let me know.  Thanks!

Regards, Jim

  • Registered: 2012-12-16
  • Posts: 940

Re: How to make a home page?

Ok, I think I got it good enough in a browser.

That's great!

In answer to your questions above (which may help):

1.  How do I keep the right edge of the rotating images in line with the right edge of the separator and the nav items?

Make sure that imagePadding="0", stagePadding="0" and imageHAlign="RIGHT".

2.  The height of the JuiceBox area is too high.  How can I make the height be only what it needs to be?

Reducing the gallery's height (in the embedding code) should help.

Unfortunately, I do not have a Windows Phone on which to test so I'm not sure what you're seeing.
Setting imageVAlign="TOP" may help (to at least ensure that the gallery image is always at the top of the page rather than being vertically centered within the container).

If you want your text to wrap around your gallery (floated to the right side of the page), then try something like the following code (again, with a 'Body text layout' of '1-column wide').

<script src="/gallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/gallery/",
        containerId : "juicebox-container",
        galleryWidth: "400",
        galleryHeight: "300",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container" style="width: 400px; height: 300px; float: right;"></div>
<p>Text goes here.</p>
  • Registered: 2013-02-11
  • Posts: 13

Re: How to make a home page?

I tried a few things, but I could never get the height to scale properly as the browser was made narrower or wider.  So I'm sticking with the two div sections for now.  Thanks for the help!

  • Registered: 2012-12-16
  • Posts: 940

Re: How to make a home page?

A HTML div (such as a Juicebox gallery container) will not normally have its height changed when the browser window's width changes. If you want this to happen, then you will need to employ a solution such as that described in this forum post (which uses JavaScript to listen for a change in the browser window's size and then change the gallery container's width and height accordingly).