1 Topic by chrisk (edited by chrisk 2013-02-02 16:25:50)

  • Registered: 2013-02-02
  • Posts: 14

Topic: Trying to imbed gallery on multiple pages.

I have a site for a client who is a contractor and they wish to have 3 different galleries.  One for Interiors another for Exteriors and another for Projects.  I set up a main Gallery page and have three links in the center of the page to the three galleries.

I tried imbedding the jbcore folder into each individual gallery folder and it wasn't working.  I think this is a paths issue, so I wondering if someone could assist me with how to create the external folder that will allow all three galleries to pull (functionality) from the same jbcore folder yet display the individual photos contained in each gallery's folder.

Any help with this would be greatly appreciated.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Trying to imbed gallery on multiple pages.

I wondering if someone could assist me with how to create the external folder that will allow all three galleries to pull (functionality) from the same jbcore folder yet display the individual photos contained in each gallery's folder.

Instructions for allowing multiple galleries to share a single 'jbcore' folder can be found here: Using an External jbcore Folder

  • Registered: 2013-02-02
  • Posts: 14

Re: Trying to imbed gallery on multiple pages.

I made sure that I took the jbcore folder out of the individual galleries, but yet the projects gallery is still pulling the correct images where the interiors gallery is not (exteriors not built yet)

Can you explain it to me like you're explaining to a six year old as I am not sure if this is an issue as to how I name the gallery or a path issue within the imbed code

code for the projects url is here:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            body {
    margin: 0px;
    background-color: #666666;
            }
        * {
    margin: 0px;
    padding: 0px;
}
        #page-wrap {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
}
        #page-wrap #inner-content {
    background-image: url(projects_bg.jpg);
    background-repeat: no-repeat;
    float: left;
    height: 1172px;
    width: 960px;
}
        #page-wrap #inner-content #navigation {
    float: left;
    height: 25px;
    width: 320px;
    margin-top: 395px;
    margin-left: 85px;
}
        #page-wrap #inner-content #gallery {
    height: 700px;
    width: 930px;
    margin-top: 40px;
    margin-left: 15px;
    float: left;
}
        </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
    <body>
        <div id="page-wrap">
          <div id="inner-content">
            <div id="navigation">
              <ul id="MenuBar1" class="MenuBarHorizontal">
                <li><a href="index.html">HOME</a>                  </li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="gallery.html">GALLERY</a> </li>
                <li><a href="contact.html">CONTACT</a></li>
              </ul>
            </div>
            <div id="gallery">
            <!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : "juicebox-container",
galleryWidth: "930px",
galleryHeight: "700px",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
            
            </div><!--end gallery div-->
          </div><!--end inner content-->
        </div><!--end page wrap-->

    <script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
        </script>
</body>
</html>
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Trying to imbed gallery on multiple pages.

If you are trying to embed multiple galleries into a web site, I would recommend using the baseUrl method of embedding as documented here.
This would allow you to upload complete gallery folders (not just the contents) to anywhere on your web server (as long as you know where they are) without the need to rename or move any files within the gallery folders.
For example, if you had two complete gallery folders named 'gallery1' and 'gallery2' and you uploaded them to the root of your web space (in this example, a domain named 'www.example.com'), then the embedding code for the two galleries would be:

<script src="http://www.example.com/gallery1/jbcore/juicebox.js"></script>

<script>
  new juicebox({
    baseUrl : 'http://www.example.com/gallery1/',
    containerId : 'juicebox-container1',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container1"></div>

<script>
  new juicebox({
    baseUrl : 'http://www.example.com/gallery2/',
    containerId : 'juicebox-container2',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container2"></div>

(When embedding galleries as above, you can still have all your galleries share a single 'jbcore' folder.)

  • Registered: 2013-02-02
  • Posts: 14

Re: Trying to imbed gallery on multiple pages.

Steven- I renamed each gallery, calling them gallery1, gallery2 and gallery3.  Even the page containers I called containers 1,2,3.

I was before that only the "projects.html" page was displaying the gallery, but now none of the three pages diplay the gallery.

Please check out the page cource code at www.finecustombuilding.com  Then navigate to the main gallery page and you'll see the three gallery pages.  This site is done except for the fact that I cannot get these galleries to function.  I appreciate your help.

  • Registered: 2013-02-02
  • Posts: 14

Re: Trying to imbed gallery on multiple pages.

It also seems like the xml file for each gallery seems to be in the wrong gallery file.  What a nightmare!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Trying to imbed gallery on multiple pages.

Thank you for providing the URL to your web site.
As you are embedding only one gallery per web page, there is no need to name your container ids differently (although it will do no harm) as there will be only one gallery container per page and there will be no conflict with any others.

Currently, the problem with your 'Interiors' gallery is that your http://www.finecustombuilding.com/interiors.html page contains the line:

<script src="http://www.finecustombuilding.com/gallery1/jbcore/juicebox.js"></script>

... but the 'juicebox.js' file does not seem to have been uploaded to that location.

I would start by embedding the galleries first and only then, once everything is working as required, would I recommend having your galleries share a 'jbcore' folder.

Essentially, just follow the baseUrl embedding instructions here for one gallery and, once you have got one working, move onto the next.

Upload a complete gallery folder, named 'gallery1' to the root of your web space and that gallery should be displayed on your 'Interiors' page (as the embedding code itself on the http://www.finecustombuilding.com/interiors.html page looks OK).

  • Registered: 2013-02-02
  • Posts: 14

Re: Trying to imbed gallery on multiple pages.

Thanks Steve- I did everything you mentioned.  The interiors gallery displays fine.  The exteriors gallery shows with the thumbnails but won't display the large images even though the larger images are in the folder.  The projects (gallery3) doesn't display at all.  Ugh!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Trying to imbed gallery on multiple pages.

The exteriors gallery shows with the thumbnails but won't display the large images even though the larger images are in the folder.

Going to the first image in your Exteriors gallery (http://www.finecustombuilding.com/galle … erior1.jpg) directly in a browser does not display the image as expected.
Things to check:
(1) Double-check that the file actually exists in the correct location.
(2) Make sure that the file extension of the imageURL entry in your gallery's XML file matches that of the image itself. Your web server is likely to be case-sensitive and .jpg is not the same as .JPG.
(3) Check the permissions on the 'images' folder (and the images themselves) to ensure that they can be read.

The projects (gallery3) doesn't display at all.

It looks like the 'jbcore' folder is missing from your 'gallery3' directory on your web server.

  • Registered: 2013-02-02
  • Posts: 14

Re: Trying to imbed gallery on multiple pages.

It can't be this hard...it just can't!  I actually rebuilt galleries 2 and 3 and started fresh.  Why does uploading Juicebox automatically create an html file called exteriors.html or projects.html, etc. based on the index.html page (it asks for this info when you create the gallery)

I have checked and rechecked.  I cleared out the entire cashe on my web server and uploaded everything fresh and still only the interiors (gallery1) works.  I made sure the file structure is the same in all 3 galleries:  Gallery1-jbcore(folder) thumbs(folder) then the images themselves with the config.xml file

Juicebox atomatically created an image folder for galleries 2 &3 but I took everything out of it because the interiors gallery (gallery1) didn't have that folder and it works fine.

I am a week late in presenting this site to the client.  Something is not correct as th galleries just won't display.  If you want FTP access just let me know by contacting me off forum  chris@greatpointmediadesign.com

I appreciate your patience.

  • Registered: 2013-02-02
  • Posts: 14

Re: Trying to imbed gallery on multiple pages.

The code on the three HTML pages look similar except for the gallery designation of 1, 2 and 3

I cannot understand why, if all the jbcore folders are in place, the images are all in their correct folders and the XML file is in with the images, why this will not render correctly.

                      <div id="juicebox-container3">
            
            <script src="http://www.finecustombuilding.com/gallery3/jbcore/juicebox.js"></script>

<script>
  new juicebox({
    baseUrl : 'http://www.finecustombuilding.com/gallery3/',
    containerId : 'juicebox-container3',
    galleryWidth : '930px',
    galleryHeight : '700px',
    backgroundColor: '#222222'
  });
  </script>
            
            </div><!--end juicebox container div-->

12 Reply by chrisk (edited by chrisk 2013-02-06 17:15:33)

  • Registered: 2013-02-02
  • Posts: 14

Re: Trying to imbed gallery on multiple pages.

Now it is saying it can't find the Config XML file.  Where is that file placed when juicebox is uploaded to a site?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Trying to imbed gallery on multiple pages.

Why does uploading Juicebox automatically create an html file called exteriors.html or projects.html, etc. based on the index.html page

When creating a Juicebox gallery, you have the choice to name the Index Page Name on the Publish tab.
If you save each gallery to a different folder (which I would recommend) you can safely leave the Index Page Name as the default value of 'index.html'.
No new files are created whilst uploading your gallery. Uploading is simply a process of copying files and folders from one location( your computer) to another (your web server).
(As you are embedding your galleries in other web pages, you do not actually need any of the 'index.html' files. They are used only when you wish to view the galleries on pages of their own.)

Juicebox atomatically created an image folder for galleries 2 &3 but I took everything out of it because the interiors gallery (gallery1) didn't have that folder and it works fine.

That sounds like the reason that your galleries do not function correctly.
Just leave the gallery folders exactly as they are created by JuiceboxBuilder-Lite and upload them in their entirety.

If you upload a complete gallery folder named 'gallery2' to the root of your web space (exactly as it is created by JuiceboxBuilder-Lite) and use the following embedding code in your http://www.finecustombuilding.com/exteriors.html file, the gallery will display on the page.

<script src="http://www.finecustombuilding.com/gallery2/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl : 'http://www.finecustombuilding.com/gallery2/',
    containerId : 'juicebox-container2',
    galleryWidth : '930px',
    galleryHeight : '700px',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container2">

Now it is saying it can't find the Config XML file.  Where is that file placed when juicebox is uploaded to a site?

The 'config.xml' file is located inside each gallery folder (alongside the 'index.html' file and 'images', 'thumbs' and 'jbcore' folders).

Current problem with 'Exteriors' gallery:
The path to the 'juicebox.js' file is incorrect.
Change:

<script src="http://www.finecustombuilding.com/gallery2/images/jbcore/juicebox.js"></script>

... to:

<script src="http://www.finecustombuilding.com/gallery2/jbcore/juicebox.js"></script>
  • Registered: 2013-02-02
  • Posts: 14

Re: Trying to imbed gallery on multiple pages.

Thanks for hanging in there with me Steve- I actually deleted ALL the folders on the server (and locally), rebuilt the 3 galleries, uploaded them to the server fresh, made sure everything was named properly and IT WORKED!!!!  All three worked!!!

I will now purchase the PRO as I am convinced this is a good product with good support.

  • Registered: 2013-02-02
  • Posts: 14

Re: Trying to imbed gallery on multiple pages.

Steve-I galleries I created look fine on my computer and on my client's computer, but others who work in his office say the gallery is not displaying on their computers, saying "config XML file not found".

I checked this in both Firefox and IE and both were fine.  What could be causing this issue?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Trying to imbed gallery on multiple pages.

Perhaps some security restriction within their office network is preventing the gallery from displaying correctly.
Also, if the internet connection within the office takes too long to fetch the gallery files from your web server, the error message may be displayed.
If you have cleared your own browser's cache and can confirm that your gallery displays OK, then there is no problem with the gallery itself.