You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Try looking within your web page's CSS files for generalized CSS rules which apply to HTML tags such as 'div' or img' rather than specific instances of containers which already use classes or ids.
As a start, try removing the 'Global' section of your theme's http://joachim.bozler.de/wp-content/the … /style.css file.
No, but if you would like to change the way that your gallery currently functions, you could change the position of the captions via the captionPosition configuration option and change when to show the overlay via the showImageOverlay configuration option.
Please see this FAQ:
How do I change the order of images in a Flickr Photo Set?
This happens because the link is generated dynamically and the user never leaves the http://www.picnicspot.it/portfolio/ page.
When selecting 'Crossroads' from the http://www.picnicspot.it/portfolio/ page, the user's browser is not redirected to the http://www.picnicspot.it/portfolio/crossroads/ page where the gallery opens via Shadowbox.
You could perhaps find out where, in your WordPress theme's code, the links are being generated and add the required rel="shadowbox" attribute to them.
Also, please see the Advanced section of the Shadowbox Usage support page. Take a look at the Shadowbox.setup section at the bottom of the web page.
You can also use Shadowbox.setup to manually set up link elements for use with Shadowbox. This can be useful, for example, if you have a page that is updated via Ajax with links being created and destroyed dynamically.
1/ Does gallery resizing work inside an iFrame?
Yes. As long as the dimensions of the iframe and all parent containers have heights expressed as percentages via CSS.
2/ How does a gallery appear on an iPad/iPhone if it is embedded inside an iFrame? (Do I need to build a second site to better suit iOS devices?)
A gallery will look the same when embedded in an iframe as it will when embedded using the recommended embedding code with the exceptions that the 'Expand Gallery' button is disabled and the 'Back Button' will not work. Please see here for details.
3/ Is there the possibility to use a top-location parameter, to ensure that an iFrame gallery cannot be viewed without its 'frame'. (This is really important to avoid anonymous galleries).
Yes. You could add JavaScript code (to check whether or not the gallery is displayed inside an iframe) to the 'index.html' page of a gallery. If the gallery is not displayed inside an iframe, then you could redirect the user's browser to the page you wish the user to see. Knowledge of JavaScript would be required.
4/ Can thumbnails be set to 'autohide'?
You can set showLargeThumbs="FALSE" to initially hide the thumbnails and set showthumbsButton="TRUE" to allow the user to display or hide the thumbnails via the Thumbnails Button on the Button Bar.
5/ Is IPTC data that is not used for display, but is embedded in the images, available to web-crawlers? (I'm thinking specifically of Keywords)
Google may be able to index the image data stored in the gallery's XML file (try a web search to find out more about Google's web-crawling algorithms) but it looks like it would not be able to crawl through the meta-data stored within the images themselves. Please see this Google forum thread.
6/ Can I place a copyright text anywhere in the stage?
You could use the Gallery Title text field to add copyright text to your gallery. The Gallery Title can be positioned OVERLAY, TOP, ABOVE_THUMBS (or NONE). Please see the General Options section of the Config Options page for details.
You could also add copyright text to either the Title or Caption text fields of each individual image.
Your first three queries apply equally to Juicebox-Lite (the free version) as they do to Juicebox-Pro so you could try using Juicebox-Lite (which can be downloaded from this web page) before purchasing Juicebox-Pro.
You might be able to achieve your goal by increasing the imagePadding and stagePadding configuration options from their default values of zero.
If you wish to find out which CSS classes are associated with specific elements within your gallery, you can use the developer tools in your browser. For example, in Firefox, right-click the element in question and select 'Inspect Element' from the menu displayed.
However, please note that the Juicebox layout is carefully configured and changing this by introducing padding manually may have unwanted knock-on effects.
@mustard
For a drop-shadow to the right and bottom of the main image in your gallery, try adding the following code to the end of your gallery's 'jbcore/classic/theme.css' file:
.jb-dt-main-frame .jb-dt-main-image {
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .4) !important;
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .4) !important;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .4) !important;
}You may also wish to increase the imagePadding configuration option in your gallery's XML file from the default value of 0 to something like 20 to accommodate the drop-shadow at the bottom of the main image.
@sylvia
Adding a cross-fade transition type is something which we are currently considering and this will hopefully be implemented in a future version of Juicebox-Pro (although I do not know when this may be).
Can I disable the responsive grid for the content block on this page?
It is unlikely that a WordPress theme would have a setting to selectively ignore a specific element on a web page.
are there any things you could tell me to look for that might be causing this?
Try looking for (and temporarily removing) generalized CSS rules which apply to entire tags such as 'div' or img' rather than specific instances of containers which already use classes or ids. There seems to be a lot of generalized CSS rules at the top of the following file: http://downtowngroup.com/test/wordpress … ;ver=3.4.2
@ty9flying
The gap between your the thumbnails and the main images in your gallery may be due to a combination of the aspect ratio of your images and the dimensions of your browser window. Try setting imageScaleMode="FILL" in your gallery's XML file (so that the main images fill the available image area) to see if the gap between the thumbnails and the main images is reduced.
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.
The ability for a user to enter custom text for the user interface tool tips (similar to the SimpleViewer languageList configuration option) is on the roadmap and will hopefully be introduced in a future version of Juicebox-Pro. However, I do not know when this may be.
Unfortunately, in the meantime, we are unable to provide customized versions of the 'juicebox.js' JavaScript file.
All the 'z-index' values for the Juicebox-Pro gallery are set in the 'juicebox.js' file which is obfuscated and cannot be modified so, rather than try to increase the 'z-index' values of the gallery components, try decreasing the 'z-index' values of your own web page components.
I notice the 'jquery.fancybox-1.3.4.css' file on your web page uses 'z-index' values starting at 1000 (and it seems to be the only CSS file to set 'z-index' values). Try decreasing these values (for example, from 1000 to 100 and from 1001 to 101, etc.).
There may be a conflict between the CSS of your current WordPress theme and the CSS of the Juicebox-Pro gallery itself.
If there are any generalized CSS rules within the theme which apply, for example, to all divs or all images on the web page, then they will also apply to all divs or all images within the Juicebox-Pro gallery on the web page.
If possible, ensure that CSS rules are applied to only those elements on your web page that require them through use of classes and ids.
Try temporarily reverting to the default WordPress theme to see if this makes a difference.
If there is a CSS conflict, one way to isolate a Juicebox gallery from the rest of your web page is to embed the gallery in an iframe, documented as Option #2 here.
Is it possible to pass in the config xml data instead of using the configurl and pointing it to a url?
No. It is possible to set configuration options in the embedding code (as documented here) but image data must be contained in an XML file.
Viewing the gallery on its own web page by visiting http://yoojin.star-bottle.net/juicebox_ … index.html in IE9 displays the captions OK so this implies that the problem may lie with the web page into which the gallery is being embedded.
There is no Doctype Declaration on the page into which the gallery is being embedded via an iframe: http://yoojin.star-bottle.net/art.html
Try adding a Doctype Declaration to this web page to see if it helps.
Also, you can validate your web pages using the W3C Markup Validation Service and fix any errors reported. There are several errors on the http://yoojin.star-bottle.net/art.html page, such as
Once the code on your web pages validates OK, your web pages should be rendered with greater predictability and consistency across different browsers.
Please see this FAQ: My gallery looks strange in Internet Explorer 9. Why?
is it possible to open the juicebox gallery clicking on a link or button, to a lighbox in the same page?
Juicebox-Pro does not feature any built-in lightbox functionality but it is possible to display a Juicebox gallery in a lightbox such as Shadowbox.
(1) Create a Juicebox gallery with the method of your choice (such as JuiceboxBuilder-Pro).
(2) Upload the complete gallery folder (not just the contents) to your web server.
(3) Include the required Shadowbox files and code on your web page:
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>(4) Create a link on your web page to point to your Juicebox gallery's 'index.html' page, setting the 'rel' attribute to 'shadowbox', such as the following:
<a href="http://www.example.com/gallery/index.html" rel="shadowbox">Open Gallery</a>does it work in a multi-language environment, eg. with qTranslate plugin for Wordpress? I need this feature especially to translate titles and captions.
As far as I am aware, no. Juicebox-Pro will display the titles and captions exactly as they are in the gallery's XML file.
However, WP-Juicebox and qTranslate are both free so you can try it for yourself to check before purchasing Juicebox-Pro.
WP-Juicebox can be downloaded from this web page.
If there are any generalized CSS rules within the theme which apply, for example, to all divs or all images on the web page, then they will also apply to all divs or all images within the Juicebox gallery on the web page.
If possible, ensure that CSS rules are applied to only those elements on your web page that require them through use of classes and ids.
One way to isolate a Juicebox gallery from the rest of your web page is to embed the gallery in an iframe, documented as Option #2 here.
If you found a plugin which conflicts with WP-Juicebox, please let me know what the plugin is so that I can investigate further and fix the problem for the next version of WP-Juicebox.
If the problem was the BulletProof Security plugin or a similar plugin, it may just need to be configured correctly to work with WP-Juicebox.
Is something like that possible?
The following settings would allow you to layout a Juicebox gallery like your image (with a maximum of three thumbnails in a single column to the right of the main image).
thumbsPosition="RIGHT"
maxThumbColumns="1"
maxThumbRows="3"However, please note that it would not be possible to vertically align the top of the thumbnails with the top of the main image.
The thumbnails would be vertically centered in the thumbnail area.
It looks like your WordPress installation is inserting <p> and <br /> tags in your embedding code which is adding extra space between the text 'Cakes' and the top of the gallery.
If you look at the source of your web page, your gallery's embedding code looks like this:
<p><!--START JUICEBOX EMBED--><br />
<script src="http://www.clairscakes.com/gallery2/cakes/jbcore/juicebox.js"></script><br />
<script>
new juicebox({
containerId : 'juicebox-container',
baseUrl : 'http://www.clairscakes.com/gallery2/cakes/',
});
</script></p>
<div id="juicebox-container"></div>
<p><!--END JUICEBOX EMBED--></p>... whereas, it should look like the code in your original post.
When entering the embedding code, make sure that the method of entry is 'HTML' rather than 'Visual'.
If that does not help, try temporarily reverting to the default WordPress theme to see if your current WordPress theme is the cause of the extra HTML tags.
You could hide the thumbnail navigation buttons by adding the following to your gallery's 'jbcore/classic/theme.css' file:
.jbn-nav-button { display: none !important; }However, this would not help as the logic behind the gallery's layout is contained within the 'juicebox.js' JavaScript file which is obfuscated and cannot be modified. Juicebox would still reserve space for the thumbnail navigation buttons depending on the value of the thumbNavPosition configuration option, regardless of whether or not you hide the buttons using CSS.
Also, if the user has a small browser window (in which Juicebox would display fewer thumbnails), then there would be no way to jump between thumbnail pages.
You should be able to embed a Juicebox gallery by using either the baseUrl or iframe method documented here.
If you are unsure as to what the relative paths should be within your gallery's embedding code (which can be difficult to figure out in a CMS environment), try using absolute paths instead, e.g.:
<!--START JUICEBOX EMBED-->
<script src="http://www.example.com/my_gallery_folder/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : 'juicebox-container',
baseUrl : 'http://www.example.com/my_gallery_folder/',
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->... or:
<iframe src="http://www.example.com/my_gallery_folder/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>Will I need to use the baseUrl type instructions for the Joomla example?Please see the Embedding in a Joomla Site section of the Juicebox Embedding Guide for instructions.
You could use either the baseUrl or iframe method of embedding but I would recommend using the baseUrl method as the iframe method has certain restrictions which the baseUrl method does not have. Please see here for details.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.