I’ve been using an iFrame for years on my website and having switched away from Flash am now using Juicebox for my image galleries. There are some advantages for using an embedded gallery (as Juicebox recommend) so I’m trying to recreate what I had with my iFrame, however, I cannot get the html item to fit or resize in the window. It resizes for width but not height. Also, it extends off the page to right and bottom. I have a piece of Javascript that someone did for me many years ago, but it doesn’t work on the html item.
Not sure how you have put your embed page together but there is something far wrong as you have ended up with two Divs with the same ID of ‘juicebox-container’
This may well have bearing on why it doesn’t work correctly but as I have never tried Juicebox I am not sure what to advise you.
I am assuming that from what code I can see that you get Juicebox embed output like this
What you have done is add this code into Page>Html Markup in the After section when I am pretty sure you should be adding it via Insert>Markup Item in the Body of your page
While I can get it to work locally when I publish to a server I get a missing Xml file error which may be because of cross domain issues.
There is definitely only one div with the ID ; ‘juicebox-container’. So that is really strange.
Yes, the code is in the After section because it didn’t work directly in the HTML Markup area, however I’ve just tried again and this time it worked, so it may have been a cache or path problem. This is the same page but with the code in the HTML Markup box : http://www.qr-presse.eu/e/ritz-html-embed2.html. As you can see, it makes no difference to the behaviour of the gallery etc.
The page is pretty simple, so I can only guess that the doubled up IDs are an FWP 6 issue. I can see nothing in my page anywhere that could lead to this happening.
You will see that if you squish the page far enough to the left, the gallery will resize vertically, but it won’t resize vertically by squishing the page up to the top.
You have named the Markup item that you have put the code into as ‘juicebox-container’ when just before the end of the code there is another Div called ‘juicebox-container’
Call your Markup Div ‘Gallery’ or something else.
The code is designed to display the juicebox Div at 100% width or 100% height but these have to be 100% of something flexible.
Also your extra javascript scroll code is throwing an error and you should remove it meantime.
If you are using FW6 then you could try setting the width and height of your Markup item as Flexible but I am not sure how this will work with your layout.
I’ve tried every permutation I can think of, including ‘Flexible’.
One thing that I don’t understand at all, is in the Inspector for the page itself, in the Measurements area, I can set width and height. I can choose the Align settings from None, Left, Centre, Right. For Width I can choose Fixed, Flexible, Minimum, Maximum and Min/Max … BUT, there is no setting for Height. I wonder if there should be and if not is it something I can set differently.
The Juicebox support says that the gallery will resize if there are no ‘absolute’ values affecting the HTML Item. Everything must be a percentage. I’ve looked everywhere I can think of and tried everything I can find to ensure this to be the case.
I’ve been trying to get this working for 2 days now. At least I’ve learned quite a lot … but I’m sure there are bugs at play :
2 test pages. Both in FWP6.0.3
1st test page has a single HTML Markup Item for embedding a Juicebox gallery. It is now resizing, but there are 2 problems. 1st : The HTML item goes all the way to the right-edge and bottom of the page. How can I keep it padded? 2nd : When resizing horizontally it very quickly starts to eat into the image.
2nd test page has what I hope is an inline item. It is an HTML Markup Item inside an HTML box. WHATEVER I DO, HOURS OF TRYING EVERY PERMUTATION, I cannot get the Juicebox gallery to resize vertically. The container div resizes, but the Juicebox HTML Markup Item, only resizes horizontally. Sigh.
The pages only have these items on them, so cannot be any simpler. Can anyone tell me why this isn’t working?
(Juicebox support say that if everything on the page is in percentages, then Juicebox will resize correctly. I am wondering if there is a bug in FW6 that is not setting percentages correctly for my container div.
Works fine Dave, but this is just a gallery filling the whole page right? I have no problem doing that.
It’s trying to position the gallery somewhere specific on page that is causing a problem. It works fine in an iFrame, but with slightly limited functionality, which is why I want to switch to embedded html.
This is what Juicebox support said about my 2 test pages :
This is because part of your gallery (to the right and bottom) spills over beyond the bounds of the browser window and is no longer visible.
Your gallery (and container div) both have a height of 100% so, under normal circumstances, the gallery should fill the height of the browser window. However, you have introduced margins which push the gallery down (truncating the gallery at the bottom).