You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
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.
The Juicebox-Pro Single Licence allows you to have an unlimited number of galleries on a single domain (and subdomains).
For example, if you own the domain example.com, then you can upload your galleries to example.com, www.example.com, sub1.example.com, sub2.example.com, etc.
The Juicebox-Pro Multi Licence would be required if you wish to upload Juicebox-Pro galleries to up to 5 different domains, such as example1.com, example2.com, etc.
If all of your 20 web pages are on the same domain, then a Juicebox-Pro Single Licence will be fine for you.
If i use that code in caption section doesn't work.
This is probably due to the fact that your code relies on JavaScript which is stored in a different document.
One possible way to feature a Facebook Like button for individual images would be to:
(1) Use the <iframe> implementation of the Facebook Like button.
(2) Place the button on your gallery's HTML index page (not in the captions for each image).
(3) Set enableDirectLinks="TRUE" so that each image has a unique URL.
(4) Use the Juicebox-Pro API (specifically the onImageChange() event) to change the 'src' attribure of the <iframe> (which is essentially the URL for the Facebook Like button) each time the user selects a different image.
Try using the following as your gallery's 'index.html' file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="This is a Juicebox-Pro Gallery. Get yours at www.juicebox.net" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb;
$(document).ready(function () {
jb = new juicebox({
containerId : 'juicebox-container',
enableDirectLinks : 'TRUE'
});
jb.onImageChange = function(e) {
var original=document.getElementById("fb").src;
var modified=original.replace(/\?href=(.*?)&/, "?href=" + encodeURIComponent(document.location) +"&");
document.getElementById("fb").src=modified;
}
});
</script>
</head>
<body>
<div id="juicebox-container"></div>
<div id="overlay" style="position: absolute; top: 50px; left: 10px; z-index: 999;">
<iframe id="fb" src="//www.facebook.com/plugins/like.php?href=#&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
</div>
</body>
</html>Please note that use of the Juicebox-Pro API requires Juicebox-Pro and will not work with Juicbeox-Lite.
Yes. You can use <html> code within your captions.
If using JuiceboxBuilder-Pro to create or edit your gallery, you can enter the code directly into the caption text fields on the 'Images' tab, such as:
<a href="http://www.example.com/">Link</a><br><img src="images/image.jpg">If editing your gallery's XML file manually in a plain text editor, you will need to enclose your caption within CDATA tags so it will look like this:
<caption><![CDATA[<a href="http://www.example.com/">Link</a><br><img src="images/image.jpg">]]></caption>I do not know exactly what or how much code you intend to use so the best thing to do would be to simply try it and see if it works.
To answer your initial question:
Is it possible to generate the file data into the html file that the gallery is embedded in rather than access the external file?
You can set the options in the embedding code such as:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : 'juicebox-container',
screenMode : 'LARGE',
stagePadding : '100'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->... but you will still need to list the images in an XML (or PHP) file.
I was actually wondering about that - sharing and pointing.
When creating a multi-gallery album with the Juicebox skin for jAlbum, the album contains only one 'jbcore' folder (shared across all galleries).
Of course, when creating multiple albums, there will be a 'jbcore' folder per album.
In my case, however, I've been using jAlbum to generate and upload all these galleries, so this automation certainly helps me out.
Hopefully, others will find your script useful, too.
I'm not sure this is the proper spot to post this, so move it if you like.
This is as good a place as any. Thank you for sharing.
However, I should perhaps point out that multiple galleries on the same domain can share a single 'jbcore' folder (simply by pointing towards it in the embedding code of each gallery). Please see here for details.
Then, when it comes to upgrading all the galleries, only the single 'jbcore' folder needs to be replaced.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.