• Registered: 2013-01-11
  • Posts: 7

Topic: Problems Setting Up Juicebox

Hey guys,

I'm having problems getting this set up. Here's the situation. Our app is created with asp.net mvc3. I have the config set up to be retrieved via a controller method. The config xml is retrieved by the browsers correctly. I have Juicebox set up to use an external jbcore folder since we don't need to duplicate that everywhere. I've tried calling 'new juicebox()' with baseUrl and without but it doesn't seem to make a difference. The gallery loads in IE but not Firefox, Chrome, or Opera. It just sits there with the spinner perpetually. There are no script errors in Firebug. Thanks for any help.

Example Config Xml Retrieved From Controller

<?xml version="1.0"?>
<juiceboxgallery title="">
         <image imageURL="/Content/images/articles/jessica chastain 24jan12 01.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/jessica chastain 24jan12 01.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/jessica chastain 24jan12 01.jpg" linkTarget="_blank"><title></title><caption> Jessica Chastain attendsthe Giorgio Armani Prive Haute-Couture Spring/Summer 2012 show</caption></image>
         <image imageURL="/Content/images/articles/jessica chastain 24jan12 02.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/jessica chastain 24jan12 02.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/jessica chastain 24jan12 02.jpg" linkTarget="_blank"><title></title><caption> Jessica Chastain attendsthe Giorgio Armani Prive Haute-Couture Spring/Summer 2012 show</caption></image>
         <image imageURL="/Content/images/articles/jessica chastain 24jan12 03.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/jessica chastain 24jan12 03.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/jessica chastain 24jan12 03.jpg" linkTarget="_blank"><title></title><caption> Jessica Chastain attendsthe Giorgio Armani Prive Haute-Couture Spring/Summer 2012 show</caption></image>
         <image imageURL="/Content/images/articles/jessica chastain 24jan12 04.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/jessica chastain 24jan12 04.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/jessica chastain 24jan12 04.jpg" linkTarget="_blank"><title></title><caption> Jessica Chastain attendsthe Giorgio Armani Prive Haute-Couture Spring/Summer 2012 show</caption></image>
         <image imageURL="/Content/images/articles/jessica chastain 24jan12 05.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/jessica chastain 24jan12 05.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/jessica chastain 24jan12 05.jpg" linkTarget="_blank"><title></title><caption> Jessica Chastain attendsthe Giorgio Armani Prive Haute-Couture Spring/Summer 2012 show</caption></image>
         <image imageURL="/Content/images/articles/jessica chastain 24jan12 06.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/jessica chastain 24jan12 06.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/jessica chastain 24jan12 06.jpg" linkTarget="_blank"><title></title><caption> Jessica Chastain attendsthe Giorgio Armani Prive Haute-Couture Spring/Summer 2012 show</caption></image>
         <image imageURL="/Content/images/articles/jessica chastain 24jan12 07.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/jessica chastain 24jan12 07.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/jessica chastain 24jan12 07.jpg" linkTarget="_blank"><title></title><caption> Jessica Chastain attendsthe Giorgio Armani Prive Haute-Couture Spring/Summer 2012 show</caption></image>
</juiceboxgallery>

Example Juicebox HTML container

<div class="juicebox-blackout" id="juicebox-blackout-22466">
    <div class="juicebox-gallery" id="juicebox-container-22466"></div>
</div>

Example Juicebox object creation

var juiceboxObj = new juicebox({
                containerId: "juicebox-container-22466",
                configUrl: "/Juicebox/articles/22466"
            });
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Problems Setting Up Juicebox

The gallery loads in IE but not Firefox, Chrome, or Opera.

Try validating your web page with the W3C Markup Validation Service to see if there are any HTML errors on the page which may be contributing to the problem.
Also, make sure that your web host does not have hotlink protection enabled on your hosting account and that all your gallery files are on the same domain.
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look at it live.

  • Registered: 2013-01-11
  • Posts: 7

Re: Problems Setting Up Juicebox

Here's a link to an example gallery.
http://staging.laineygossip.com/Gary-Ol … scar/22473

I'm in the process of cleaning up any validation errors that I can control. I don't believe there is any hotlink protection but I'm going to double check with the hosting guy.

  • Registered: 2013-01-11
  • Posts: 7

Re: Problems Setting Up Juicebox

Also, we now have galleries that are defined on our server but the images are hosted on AWS. How do I initialize Juicebox to support that?

An example.
http://staging.laineygossip.com/George- … oice/25636

  • Felix
  • Juicebox Support Team
  • Offline
  • Registered: 2012-04-24
  • Posts: 173

Re: Problems Setting Up Juicebox

I'm not entirely sure what you are trying to achieve here. There is a lot of custom code on that page that we are not able to assist with. I would suggest creating a stripped down test page with just the Juicebox gallery then add functionality one piece at a time.

  • Registered: 2013-01-11
  • Posts: 7

Re: Problems Setting Up Juicebox

I'm not expecting you to help me with my code. Juicebox is obfuscated, I can't easily go in and see what's going on so I need you to tell me whether I am setting it up right. I've read through the docs fairly extensively and have not found the source of the problem on my own.

Juicebox is included like so.

<script type="text/javascript" src="/Content/scripts/jbcore/juicebox.js"></script>

When the page is loaded the gallery is initialized like so in this particular case.
http://staging.laineygossip.com/Gary-Ol … scar/22473

var juiceboxObj = new juicebox({
    containerId: "juicebox-container-22473",
    configUrl: "/Juicebox/articles/22473",
    baseUrl: "/Content/Images/articles/",
    galleryWidth: "800px",
    galleryHeight: "600px"
});

Here's the response from the server for /Juicebox/articles/22473. I've done this similar to the description of the php method described here except using ASP.NET MVC.
http://juicebox.net/support/faq/#misc-5

Headers

Cache-Control:    private
Content-Encoding:    gzip
Content-Length:    509
Content-Type:    text/html; charset=utf-8
Date:    Wed, 16 Jan 2013 07:42:01 GMT
Server:    Microsoft-IIS/7.5
X-AspNet-Version:    4.0.30319
X-AspNetMvc-Version:    3.0
X-Powered-By:    ASP.NET

Response

<?xml version="1.0"?>
<juiceboxgallery title="">
    
         <image imageURL="/Content/images/articles/gary oldman 25jan12 01.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/gary oldman 25jan12 01.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/gary oldman 25jan12 01.jpg" linkTarget="_blank"><title></title><caption>Gary Oldman at the German premiere of Tinker Tailor Soldier Spy</caption></image>
         <image imageURL="/Content/images/articles/gary oldman 25jan12 02.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/gary oldman 25jan12 02.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/gary oldman 25jan12 02.jpg" linkTarget="_blank"><title></title><caption>Gary Oldman at the German premiere of Tinker Tailor Soldier Spy</caption></image>
         <image imageURL="/Content/images/articles/gary oldman 25jan12 03.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/gary oldman 25jan12 03.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/gary oldman 25jan12 03.jpg" linkTarget="_blank"><title></title><caption>Gary Oldman at the German premiere of Tinker Tailor Soldier Spy</caption></image>
         <image imageURL="/Content/images/articles/gary oldman 25jan12 04.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/gary oldman 25jan12 04.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/gary oldman 25jan12 04.jpg" linkTarget="_blank"><title></title><caption>Gary Oldman at the German premiere of Tinker Tailor Soldier Spy</caption></image>
         <image imageURL="/Content/images/articles/gary oldman 25jan12 05.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/gary oldman 25jan12 05.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/gary oldman 25jan12 05.jpg" linkTarget="_blank"><title></title><caption>Gary Oldman and Alexandra Edenborough at the German premiere of Tinker Tailor Soldier Spy</caption></image>
         <image imageURL="/Content/images/articles/gary oldman 25jan12 06.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/gary oldman 25jan12 06.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/gary oldman 25jan12 06.jpg" linkTarget="_blank"><title></title><caption>Gary Oldman and Alexandra Edenborough at the German premiere of Tinker Tailor Soldier Spy</caption></image>
         <image imageURL="/Content/images/articles/gary oldman 25jan12 07.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/gary oldman 25jan12 07.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/gary oldman 25jan12 07.jpg" linkTarget="_blank"><title></title><caption>Gary Oldman and Alexandra Edenborough at the German premiere of Tinker Tailor Soldier Spy</caption></image>
         <image imageURL="/Content/images/articles/gary oldman 25jan12 08.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/gary oldman 25jan12 08.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/gary oldman 25jan12 08.jpg" linkTarget="_blank"><title></title><caption>Gary Oldman and Alexandra Edenborough at the German premiere of Tinker Tailor Soldier Spy</caption></image>
         <image imageURL="/Content/images/articles/gary oldman 25jan12 09.jpg" thumbURL="/Thumbnail.axd?p=/Content/images/articles/gary oldman 25jan12 09.jpg&amp;w=82&amp;h=82" linkURL="/Content/images/articles/gary oldman 25jan12 09.jpg" linkTarget="_blank"><title></title><caption>Gary Oldman and Alexandra Edenborough at the German premiere of Tinker Tailor Soldier Spy</caption></image>
</juiceboxgallery>

Surrounding each Juicebox gallery is a div that I can use to show and hide the gallery at will. Fairly straightforward, shouldn't affect how Juicebox works. When the gallery is initialized I set up the scripts to show and hide the div containing the Juicebox gallery. Click a thumbnail on the page, show the div surrounding the gallery. Click off of the gallery when it's showing, hide the div surrounding the gallery.

  • Felix
  • Juicebox Support Team
  • Offline
  • Registered: 2012-04-24
  • Posts: 173

Re: Problems Setting Up Juicebox

Try setting the XML Content-Type to be: 'application/xml' rather than 'text/html'

  • Registered: 2013-01-11
  • Posts: 7

Re: Problems Setting Up Juicebox

That lead me to the rest of the fixes. Thanks.