• koe
  • Member
  • Offline
  • Registered: 2014-08-06
  • Posts: 4

Topic: JuiceBox Slideshow in Firefox

Hi,

since a few days i´ve got a problem by displaying Juice or SimpleViewer Slideshows in Firefox 31.0
Juicebox is 1.4.2 and using Windows 7 , IE 11


page is www.yachting-society.com

Therein for testing reasons there is the slideshow via iframe within "Aktuelles" directly embedded. Therein the slideshow works.

At "Blog" you find a blue colored sqare as PopUp link but whenever i press the button a rotated sqare appears(this is ok) but not the slideshow. To make the slideshow work i´ve the rightclick and reload the frame. Then the show appears

The same at Gallerie where it should appear at the end. Therein with the Foto Kuba 2003 the iframe is linked but the frame appears invisible (this is e.g you can´t PopUp several fotos like Griechenland2005 unless you click somewhere in the homepage to close up the iframe or right click and reload frame within Firefox)

For Internet explorer 11 everything works out fine for me.


Any ideas how to solve this issue with Firefox or where the problem could be located ?? I´ve tried now already some things (emptying cache etc. and configured some tests within the homepage but no sucess)

Hope there is anybody out there who can help me out here
thx a lot in advance
br
ernst

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

Re: JuiceBox Slideshow in Firefox

The div that your iframe is in has a misplaced double quote character (to close the class attribute). This might be preventing the browser from rendering the gallery's parent container as expected.
Try changing line 141 of your http://www.yachting-society.com/blog.htm page from:

<div  class="xr_noreset "style="position: absolute; left: 62px; top: 489px; width: 812px; height: 425px;">

... to:

<div class="xr_noreset" style="position: absolute; left: 62px; top: 489px; width: 812px; height: 425px;">

Also, the iframe itself has an attribute align=aus. The align attribute should have a value of "top", "middle", "bottom", "left" or "right" and the value should be surrounded by quotes.

If this does not help, then try giving your iframe a fixed height (for example 800px) rather than a height of 100% to see if this makes a difference.

3 Reply by koe (edited by koe 2014-08-07 07:45:58)

  • koe
  • Member
  • Offline
  • Registered: 2014-08-06
  • Posts: 4

Re: JuiceBox Slideshow in Firefox

<div class="xr_ap" id="xr_xp4" style="left:0; top:0; visibility: hidden; display: none;">
<div class="xr_ap" onmousemove="xr_mpc(4)">
<div  class="xr_noreset"style="position: absolute; left: 62px; top: 489px; width: 812px; height: 425px;">
<iframe src="index_htm_files/SV01/index.html" style="border:0px #FFFFFF none;" name="SimpleViewer" scrolling="auto" frameborder="0" align="right" marginheight="0px" marginwidth="0px" height="350px" width="500px"></iframe>

Hi Steven,
i followed your advice and exchanged the values directly on the server(see html above) So far no improvement.
Basically for all 3 tabs the same iframe html code got used. Obviously somehow linked iframes with embedded slide shows show up with troubles.

Situation is quite weird for different types of browsers. On my mobile(Android) everything works out.

For Firefox its the same for FF30 and FF31. Still need to reload the frame within BLOG and Gallerie and PopUpSlide show will appear. At Aktuelles Slideshow is there with no further actions.


Internet explorer 9 is displaying page "Aktuelles" ok, for BLOG i´ve to STRG+F5 the page and then the POP UP Slideshow appears and at "Gallerie" IE is doing nothing.
At my homeplace with IE11 everything was ok so far.



For the moment i´ve no idea anymore where to check. If you need any other information please let me know. Don´t know if it would be helpful you to access directly the page server.

br
ernst

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

Re: JuiceBox Slideshow in Firefox

There should still be a space between the closing " of the class attribute and the start of the style attribute.

<div  class="xr_noreset"style="position: absolute; left: 62px; top: 489px; width: 812px; height: 425px;">

... should be:

<div  class="xr_noreset" style="position: absolute; left: 62px; top: 489px; width: 812px; height: 425px;">

... although my own tests indicate that this will probably not solve your problem.

Different behavior in different browsers can often be attributed to HTML errors on a web page. (Different browsers handle errors differently.)
Try fixing all the HTML errors on your web page. There are not many but the ones that exist may be non-trivial.
There are a couple of "Opening and ending tag mismatch" errors (for a </div> tag and the </body>).
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors reported. Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers. This may help but even if it does not, we can then eliminate HTML errors as being a contributing factor to your problem (and having valid code on your web page would be advisable anyway).

Try loading a different web page (other than your gallery) into your iframe (such as http://www.google.com/) to determine whether or not your problem is directly related to Juicebox or is with the code on your embedding page which displays the iframe on demand. If you find the same problem is still happening when you take Juicebox out of the equation, then if you use a third-party solution to display the iframe on demand, try checking in with their own support to see if they have had any other users experience problems with recent versions of Firefox.

Another thing to try would be to set your gallery's dimensions (in the embedding code on your http://www.yachting-society.com/index_h … index.html page) to be the same as your iframe's dimensions.
Try changing:

<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222'
    });
</script>

... to:

<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '500',
        galleryHeight: '350',
        backgroundColor: '#222222'
    });
</script>

Hopefully one of the suggestions above will help or at least point you in the right direction towards a solution.

5 Reply by koe (edited by koe 2014-08-07 19:13:08)

  • koe
  • Member
  • Offline
  • Registered: 2014-08-06
  • Posts: 4

Re: JuiceBox Slideshow in Firefox

Hi Steven
Many thanks so far for your support

In the meantime i´ve done some tests according to your suggestions. Still the same result but anyway
There is a complete new test page on new webspace
See here
http://koppere.magix.net/

If i check the side there are no faults so far. When open the page you should see one slide show immediatly. This ist direct linked JB slide show.
Top left icon is linked to placeholder level where iframe to JBslideshow is configured. After i was changing variable sizing (100%) to fixed one now after click the icon the placeholder rectangle appears but still need to reload frame once before slide show starts.(rightclick into frame and reload)

If i try top right icon the link to google appears immediatly when pressing the button unless the pop up gets finished agian by 2nd click(bottom of the side)
Within IE11 everything works fine.

If there is some help could send you PW to acess webspace which is just for testing reasons.

best regards
ernst

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

Re: JuiceBox Slideshow in Firefox

I meant for you to try loading Google into an iframe (in a similar manner to how you are currently loading your Juicebox gallery) rather than just display 'http://www.google.com/' on your web page as plain text to see if the problem occurs with any content in an iframe and not just with a Juicebox gallery (to determine whether or not the problem is directly related to Juicebox or the iframe).
Try replacing:

http://www.google.com/

... with:

<iframe src="http://www.google.com/" style="border:0px #FFFFFF none;" name="SimpleViewer" scrolling="auto" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe>

... to see what happens.

No matter what happens with the test above, a possible solution should be to just embed your gallery directly into your web page (using the baseUrl method of embedding) rather than using an iframe.
Try replacing:

<iframe src="index_htm_files/JUC01test/index.html" style="border:0px #FFFFFF none;" name="SimpleViewer" scrolling="auto" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe>

... with:

<!--START JUICEBOX EMBED-->
<script src="index_htm_files/JUC01test/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl : 'index_htm_files/JUC01test/',
    containerId : 'juicebox-container',
    galleryWidth : '540',
    galleryHeight : '291',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

If this still does not work, then you may need to delay the loading of your Juicebox gallery until the container into which your gallery is embedded is visible on your web page. You could put the embedding code into a JavaScript function and run it when your icon is clicked, using code such as the following:

<!--START JUICEBOX EMBED-->
<script src="index_htm_files/JUC01test/jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            baseUrl: 'index_htm_files/JUC01test/',
            containerId: 'juicebox-container',
            galleryWidth: '540',
            galleryHeight: '291',
            backgroundColor: '#222222'
        });
    }
</script>
<div id="juicebox-container"></div>
<a href="#" onclick="javascript: loadGallery(); return false;">Click here to load gallery.</a>
<!--END JUICEBOX EMBED-->

7 Reply by koe (edited by koe 2014-08-10 08:43:18)

  • koe
  • Member
  • Offline
  • Registered: 2014-08-06
  • Posts: 4

Re: JuiceBox Slideshow in Firefox

Don´t know what to say actually. Anyway the slideshows started to work but don´t know the detailed reason so far for it

One thing could be related to the latest update of my homepage design software. Other option is the order i´ve to upload the shows. Or filezilla is interacting somehow during upload with another software.Or a other small bug which i didn´t recognised.

For the moment i´m fine. Actually there is just a small problem left when selecting/clicking the popup with the related slideshow during the initial loading/refreshing of the the main gallery page. The when loading is finished the slideshow starts but the popup window is blocked and is not closing up anymore. Need to go along with the main navigation bar but this is just only related during loading process. Maybe i´ll go for this issue later on but it´s no high priority if there is a solution at all since this is related to the i-net connection speed only.

Nevertheless i´ve carried out all the test above you recommended.

There was the fact that i couldn´t make two slide shows work with BaseUrl method within one page. I´ve uploaded 3 slideshows and exchanged the links in the baseURL html code but it didn´t worked out. No clue so far what is going wrong there. If i understood some FAQ´s on this topic right using different slide shows this should work.

The other thing i don´t understand is so far the dimensioning and positioning of the slide show for baseURL.
Where exactly the show is gathering this information from?
When creating a rectangle somewhere does those dimensions affect something? To me only the position of this rectangle is used for the slideshow. But then i also did´nt found the place for the H/W parameters the slide show will be displayed with


Ok . Anyway thanks a lot anyway for your time Steven.
See you in showkase forum.........

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

Re: JuiceBox Slideshow in Firefox

Actually there is just a small problem left when selecting/clicking the popup with the related slideshow during the initial loading/refreshing of the the main gallery page. The when loading is finished the slideshow starts but the popup window is blocked and is not closing up anymore.

I am not sure which test you are referring to on your web page but make sure that the z-index value of the close button on your pop-up window is high enough (try a very high value such as 99999) to be stacked on top of all gallery components.

There was the fact that i couldn´t make two slide shows work with BaseUrl method within one page.

It is possible to embed an unlimited number of galleries into a single web page using the baseUrl method.
Just make sure that each gallery is in its own folder, than you load the 'juicebox.js' file only once per page (not once per gallery) and that the baseUrl paths (the paths to the gallery folders) are correct.
The other thing i don´t understand is so far the dimensioning and positioning of the slide show for baseURL.
The dimensions of the gallery are determined by the galleryWidth and galleryHeight parameters within the embedding code. (If these values are expressed as percentages, then the gallery's actual size will be the specified percentage of the gallery's parent container.)
The position of the gallery is entirely dependent on where you place the containerId div (<div id="juicebox-container"></div>) on your web page.