You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
I have not yet been able to implement the Facebook Like button into the caption area but I have been able to display a like button for individual images (whose URL changes each time a new image is selected within the gallery) rather than just for the entire gallery. Please see this post for details.
Try launching Lightroom, then go to 'Lightroom -> Preferences', select the 'Presets' tab and click the 'Show Lightroom Presets Folder' button.
The presets folder should open up in a new window. Now go into the 'Lightroom' folder and either go into or create the 'Web Galleries' folder there and then copy 'juicebox.lrwebengine' into the 'Web Galleries' folder.
Try validating the code on your web page with the W3C Markup Validation Service and fix the errors reported.
Once the code validates OK, your web page function correctly.
Your page loads the 'juicebox.js' file twice. Only one instance is required.
Try removing the <p> and </p> tags from around the embedding code. <p> </p> tags should not contain block-level elements such as the gallery's <div> container.
Also, try using folder names that do not contain spaces. As each folder forms part of a URL when it is uploaded to a web server, it would be wise to use only web-safe characters for files and folders.
Please see section 2.3 of this document for details.
Characters that are allowed in a URI but do not have a reserved purpose are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.
the location of the library folder seemed to be in a different location. i did find it, and had to create a 'Web Galleries'
What was the location where you created your 'Web Galleries' folder?
The instructions on this page should be accurate for Lightroom 4 (which is required for the plugin).
You can do the same as you currently do with SimpleViewer by using Juicebox's configUrl option to point to a specific XML file.
A description of the configUrl option can be found here.
The embedding code for your first gallery might look something like this:
<!--START JUICEBOX EMBED-->
<script src="./resources/jbcore/js/juicebox.js"></script>
<script>
new juicebox({
containerId : 'juicebox-container',
galleryWidth: '900',
galleryHeight: '900',
backgroundColor: '#222222',
configUrl : 'galleries/1-HAR2-12.xml'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Juicebox works fine alongside a Facebook Like button.
There are a couple of things to bear in mind, though.
(1) If you are trying to insert a Facebook Like button into the 'index.html' page of a 100% x 100% gallery, the gallery will take up the entire browser window so if you place the button after the embedding code, it will be pushed off the bottom of the browser window and will not be displayed. You would need to either reduce the size of your gallery to accommodate the button or position the button on the page via CSS and give it a high 'z-index' value (so that it is stacked above the gallery layer) in order for the button to be active.
For example, if using the HTML5 implementation of the button, you would change the line:
<div class="fb-like" data-href="http://www.example.com" data-send="false" data-width="450" data-show-faces="true"></div>... to:
<div class="fb-like" style="position: absolute; top: 50px; left: 10px; z-index: 999;" data-href="http://www.example.com" data-send="false" data-width="450" data-show-faces="true"></div>(2) The button will be displayed only when your web page has been uploaded to a web server. It will not be displayed when you preview your web page locally in a browser on your computer.
Setting enableTouchZoom="TRUE" will allow users to touch zoom within the bounds set by the values in the viewport <meta> tag.
If you set 'initial-scale=1' and 'maximum-scale=1', then the gallery will initially be displayed at the maximum zoom scale.
The user could zoom out but not in. You could, however, set 'initial-scale=1' and 'maximum-scale=2' to allow the user to zoom in beyond the default scale value.
For more information on the viewport <meta> tag, please see this web page.
On a regular web page, the 'maximum-scale' setting determines how far the user can zoom into the page.
In a 100% x 100% or expanded Juicebox gallery on a mobile device, this value is automatically set to 1 which is why you see no difference in removing it.
Thank you for the screenshots. I now see what you mean.
Try adding the following code to the <head> section of your web page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">What device and version of iOS are you using, and could you perhaps upload a screenshot somewhere? Thank you.
I have tried Chrome on my iPod Touch 4 iOS 5.1.1 and a standard gallery (such as this one) is truncated at the bottom due to the address bar at the top but it does not sound like the pixel density issue you are experiencing.
I generated the gallery simply enough, but wasn't sure why it uses the index.html filename if I want to put it in a secondary page.
If embedding the gallery in an existing web page alongside other content, then the gallery's own 'index.html' file is not required.
This can simply be used to display the gallery on its own page if you like.
Also, I am using Dreamweaver.
Please see the note for Dreamweaver users here.
First I copied and pasted just the code generated into my html document, but nothing happened.
As you have discovered, you also need to upload your gallery files to your web server.
Then I copied the entire folder with all the files generated, images, jbcore, thumbs, config & index to my script folder in the assets panel of DW, but knew that couldn't be right, and again, nothing happened.
Try the following. In this example, the gallery folder will be called 'my_gallery'.
(1) Upload your entire gallery folder (not just the contents) to your webserver via FTP.
It does not matter where on your web server you upload it to as long as you know where it is.
(2) Paste the following code into your page in Dreamweaver.
<!--START JUICEBOX EMBED-->
<script src="http://www.example.com/my_gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : 'juicebox-container',
baseUrl : 'http://www.example.com/my_gallery/'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->... changing the two URLs in the code above depending on the location of your gallery folder.
This baseUrl method of embedding (which allows you to upload complete gallery folders in their entirety) is documented here.
The gallery in your second URL works OK because no elements on the page have been assigned a 'z-index'.
When 'z-index' is assigned to containers on your page (such as the page in your first URL), the only way to ensure that the gallery displays on top of all elements in your gallery in fullscreen mode is to make the gallery's background opacity 1. If the background opacity is less than 1, the main image should still be displayed on top of all other elements but it is not.
I have been able to replicate this problem and have logged a bug report so hopefully it will be fixed in the next version.
This seems to be related to the opacity of the gallery and the use of 'z-index' (a CSS property used to specify the stack order of elements) on your web page.
If I remove all instances of 'z-index' from your web page, the expanded gallery displays on top of all elements.
(Leaving all instances of 'z-index' on your web page, positioning the gallery's <div> absolutely and giving it a 'z-index' greater than any other element on your page does not seem to help.)
Alternatively, if I change the opacity of the gallery from 0 to 1, the expanded gallery, once again, displays on top of all elements.
I will log a bug report but hopefully my findings above will allow you to find a suitable workaround in the meantime.
Then it switch to fullscreen and starts the music again an parallel to the playing music.
Thank you for reporting. I have now logged a bug report.
The other thing ist, by closing the fullscreenbutton other browserwindows which are opened and using the flash plugin crashes???
I use a OsX plattform and never had any problem with that.
This is a known bug (which seems to affect only Safari on OS X) which should hopefully be fixed in the next version.
The link to your web site does not seem to be correct. It results in an error 404 (file not found).
However, I have been able to replicate the first bug you reported and the second bug has already been logged.
So in summary, the MUSE application is generating the error in the app and in browser preview mode.
As suggested, this may be due to a security restriction similar to local previewing issues in Google Chrome and Opera browsers.
the main image doesn't scale down.
The main image does not scale down because the gallery is likely to be embedded in a parent container whose dimensions are expressed as absolute pixel values. Check the CSS of your page to confirm this theory.
Even if the gallery's own dimensions are 100% x 100%, if it is nested inside a <div> with dimensions of, for example, 1024px x 768px, then then gallery will always be displayed at 1024px x 768px regardless of the size of the browser window (as 100% of 1024px = 1024px and 100% of 768px = 768px).
For the gallery to dynamically scale with the size of the browser window, the dimensions of the gallery and all parent containers must be expressed as percentages. Any fixed size up the chain will result in just that - a fixed size.
The slideshow seems to operate but the thumbs don't display
...
The gallery configured to display thumbs is on the PEOPLE page.
The thumbnails are displayed when I view the gallery in browsers on my PC.
If you have made any changes to your gallery recently, you may need to clear your browser's cache before reloading the gallery. Your browser may be hanging onto (and using) an older version of your gallery's XML file.
Please post feature requests in this thread. It keeps them all together in one place and ensures that they are not overlooked.
Thank you.
Please post the URL to the web page into which you are embedding your gallery so that I can take a look.
Thank you, again, for sharing this new script with the Juicebox community.
Hopefully, someone will benefit from your time and effort.
Since your gallery folder is located here http://www.robertmunozphotography.net/Muse/Home/
... your embedding code should look like this:
<!--START JUICEBOX EMBED-->
<script src="http://www.robertmunozphotography.net/Muse/Home/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : 'http://www.robertmunozphotography.net/Muse/Home/',
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(224,224,224,1)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->For reference, the baseUrl method of embedding is documented here.
I'm actually getting the "XML Not Found" inside the MUSE application (it tests the source path), so this may be an app-specific problem.
This may well be an application-specific problem similar to not being able to preview galleries locally in Google Chrome or Opera.
Your gallery displays OK in browsers on my PC.
If you are still seeing the 'Config XML file not found' message, try clearing your browser's cache before reloading the gallery.
The code for the transition effects is embedded within the packed and obfuscated 'juicebox.js' file so it would not be possible to add an effect to the current list of those available.
However, if you like, you could post this as a feature request. If doing so, please post in this forum thread. It keeps all the feature requests together and ensures that none are overlooked. Thank you.
Thank you for the additional information.
However, we are able to replicate the issue in IE9 which should hopefully be enough to track down the problem.
Am I to understand that IE defaults to a white border when "none" is not specified, but that the other browsers default to ignoring a border if no mention is made of it?
Yes, but only when the image is part of the Back Button.
The white border is not displayed when the image is part of the Gallery Title or simply elsewhere on the web page.
I have logged a bug report. Thank you for reporting.
Add the following attribute to your Back Button's <img> tag:
style="border-style: none;"... to make it:
backButtonText=<a href="http://www.billanddot.com/index.htm" target="_top"><img src="http://www.billanddot.com/house_2.png" width="32" height="32" alt="Home (Bill & Dot's Excellent Pages)" style="border-style: none;"></a>Yes. If you want to upload Juicebox-Pro galleries to all 20 of your domains, then you would need to purchase 4 Multi Licences.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.