You are not logged in. Please login or register.
Active topics Unanswered topics
Juicebox v1.5.1 Released!
Search options (Page 176 of 233)
Once I add any other content to the page (another div) the gallery pushes off to the side at 100%.
Where the gallery is positioned on your web page will be dependent on the layout of your page (and the CSS you use).
For example, if you float certain elements on your page, you may need to either float the 'juicebox-container' div left or right or clear the floats before the 'juicebox-container' div on your page.
So it isn't possible to have a embedded gallery at all if I have another div with content? This seems odd.
This is not correct. You can embed a gallery in an existing web page alongside other content (e.g. other divs) by following the Embedding in a HTML Page instructions.
Take a look at the Resizable Gallery demo pages I linked to in my last post.
The View Resizable Gallery with Top Menu Example has a gallery which is embedded alongside a header div and a footer div (on the same page) and the gallery resizes dynamically depending on the size of the user's browser window. Take a look at the source of the web page in your browser to see how this can be achieved. You should hopefully be able to copy and modify the code to suit your own needs.
Is my custom theme a good location or must it be a separate CSS file after the juicebox scripts?
Your custom theme file can be in any location you wish (whatever works best for you). It is loaded via the themeUrl configuration option and should not be included manually (in a <link> tag) in your web page.
The code I posted can be included in either your custom theme CSS file or in the HTML page containing the gallery. It should not make any difference.
I prefer a black background color. It is working fine in Chrome and Firefox. Fullscreen is working in Opera Next but background-color : #000000; has no effect. Safari is making a mess of the gallery presentation.
I have created a test gallery using the following as a gallery's 'index.html' file and I do not see the problems you are describing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
#jb-glry-dlg:fullscreen {
background-color: #000000;
}
#jb-glry-dlg:-moz-full-screen {
background-color: #000000;
}
#jb-glry-dlg:-webkit-full-screen {
background-color: #000000;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth:' 400',
galleryHeight: '400',
backgroundColor: 'rgba(0,0,0,0)',
useFullscreenexpand: 'true'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>
I have uploaded the gallery here. [Gallery removed.]
The fullscreen functionality works fine in all browsers I have tested it in (Firefox 23.0.1, Chrome 29, Opera 16, Opera Next 16 and Safari 5.1.7) and the background is black in every case. Additionally, the layout of the gallery is fine in all browsers including Safari.
Entering 'Stephen Wood' into Flickr's flickr.people.findByUsername page brings up a different Flickr User Id than the one you quoted above.
Please check with Flickr that the User Name you should be using is actually 'Stephen Wood'. It looks like this might be taken by a different person with the same name.
Keep a copy of the gallery on your computer and you can edit it using JuiceboxBuilder-Pro.
You can add or remove images on the 'Images' tab and then re-upload the gallery to your web server when finished.
If you make no other changes to the gallery than adding or removing images, then you need only re-upload the gallery's 'config.xml' file and the new images and thumbnails.
If you simply upload your entire gallery to your web server, most FTP programs should be smart enough to upload only new or changed files (though you may want to manually delete images and thumbnails that are no longer included in your gallery).
This is due to your gallery's backgroundColor being 'transparent' and each browser having a different deafult background color when the Fullscreen API is used. Firefox uses a black background whereas Chrome uses a white background. See the 'Styling it all' section on this web page.
Firefox applies this by default along with background-color: black
To set the default background color to white for Fullscreen API mode in all browsers, use the following CSS in the web page containing your gallery:
#jb-glry-dlg:fullscreen {
background-color: #ffffff;
}
#jb-glry-dlg:-moz-full-screen {
background-color: #ffffff;
}
#jb-glry-dlg:-webkit-full-screen {
background-color: #ffffff;
}
Please note that the code above does not set a new gallery background color for Fullscreen API mode. (The gallery's own background color will still be used.) It simply sets a default background color which will show through if the gallery's own background color uses transparency.
I have notified the developers of this inconsistency.
If the captions are positioned on the image overlay (OVERLAY or OVERLAY_IMAGE), then set showOverlayOnLoad="FALSE" in your gallery's XML file (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).
If showExpandButton is set to 'TRUE, the Expand Button will be displayed on the Button Bar.
When a gallery is expanded (via the Expand Button), the gallery will (by default) fill the user's browser window.
However, if useFullscreenExpand is set to true, the gallery will fill the user's entire screen (not just the browser window) but only in browsers which support the Fullscreen API.
Please see these pages for more information on the Fullscreen API:
http://www.w3.org/TR/fullscreen/
https://developer.mozilla.org/en-US/doc … creen_mode
For a list of browsers which currently support the Fullscreen API, please see here.
Is it possible to configure the look-and-feel of the useFullScreenExpand page?
An expanded gallery (whether useFullscreenExpand is used or not) uses the same configuration options as the gallery in normal (unexpanded) mode.
No problem.
I'm glad everything is working as expected just now.
Perhaps it has something to do with the fact that your Flickr User Name has a space in it.
as I can't see any way to create a gallery with the builder using Id instead of User name
Juicebox-Pro allows you to enter your Flickr User Id instead of your Flickr User Name and I can confirm that entering your Flickr User Id in JuiceboxBuilder-Pro displays your images as expected.
For reference, the Juicebox-Pro Flickr Options can be found here.
I will investigate how to create a Juicebox gallery manually.
You can create a Juicebox gallery manually by following the instructions here.
Then I've tried setting
flickrUserId="83516242@N03"
in the config,
but that just comes up with a general selection of Flickr photos.
The flickrUserId is a Juicebox-Pro configurtation option only which is not supported by Juicebox-Lite.
Configuration options supported by Juicebox-Lite can be found here.
According to the 'Inspect Element (Q) -> Style Editor' list in Firefox 23.0.1, the 'jbcore/classic/theme.css' file is not being loaded on your web page (only the 'jbcore/delosgaia/theme.css' file).
Likewise with 'F12 -> Resources -> Stylesheets' in Chrome 29.
The 'jbcore/delosgaia/theme.css' file is listed but the 'jbcore/classic/theme.css' file is not.
Can you provide some steps that I can reproduce to find out where you are seeing that the 'jbcore/classic/theme.css' file is being loaded?
If the 'jbcore/classic/theme.css' file is being loaded in your web page (though it should not be and my checks above seem to confirm this) and it is somehow conflicting with your modified theme, then a quick fix might be to simply delete the file.
Otherwise, if you need to use the original 'jbcore/classic/theme.css' file in other Juicebox galleries in other web pages, then try renaming the file and point to it using a themeUrl in the galleries which require it. In doing so, the Juicebox gallery on the page you quoted will no longer be able to load the original 'theme.css' file (as there will be nothing in the default themeUrl path and the gallery will not know of any themeUrl used in other galleries in other web pages).
Try changing:
<div id="juicebox-container" style="margin: 180px;"></div>
.. to:
<div id="juicebox-container" style="float: right; margin: 180px;"></div>
If you are looking to have a resizable gallery with a side menu, there is an online example here.
You can view the source of the sample web page in your browser and copy/modify it to suit your needs.
Try entering your Flickr settings into Flickr's own API Explorer to see how many (if any) images are returned. (You will need to use the Flickr User Id instead of the Flickr User Name for this.)
Also, please also see this Flickr FAQ for a few suggestions which may help:
Why aren't my photos appearing in searches or groups?
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.
I am glad that you have been able to resolve your problem.
Thank you for posting back to let me know.
This has already been noted and logged as a bug which should be fixed in the next version.
Thank you for reporting, though.
A custom theme CSS file should be a modified version of the original 'web/jbcore/theme.css' file, pointed towards within the gallery's embedding code using the themeUrl configuration option (as documented in the Theming Guide).
If a themeUrl is used, then Juicebox will use the CSS file that the themeUrl points towards, instead of the original 'theme.css' file (which will not be read or used at all.)
Try setting up a test gallery with a themeUrl which points towards a blank CSS file.
The gallery will not be displayed at all, indicating that the original 'theme.css' file is not being loaded in the web page.
Please check your email. I have sent you a message.
Your gallery will resize dynamically with the size of the user's browser window as long as the gallery's own dimensions and the dimensions of all parent containers are expressed as percentages.
Otherwise, you can listen for a change in the size of the user's browser window, get the new window size from the browser and set a new appropriate size for the gallery dynamically using JavaScript as is done in the Resizable Gallery pages here.
It is certainly possible that the Expose theme is using some general CSS (for example, applying CSS rules to all instances of certain HTML elements rather than just to specific instances of them through use of classes or ids) which the gallery is inheriting and which is causing the problem.
However, I do not see any CSS in your web page which looks likely to be causing the problem with your Juicebox gallery's thumbnails.
Unfortunately, the Genesis Framework and Expose theme is not free so I am unable to download it and try it out for myself.
Make sure that your Genesis Framework and Expose theme are both up to date in case any bugs which were present in previous versions but which have since been fixed are not contributing to the problem.
You may need to edit the theme and use some trial and error to selectively load each external CSS and JavaScript file one at a time in your gallery's web page until you can narrow down the code which is causing the problem.
I am glad your icons are displaying OK now.
Thank you for posting back to let me know.
(1) Try temporarily disabling all plugins (other than WP-Juicebox) to see if this makes a difference. If your thumbnails display OK, then there may be a conflict between WP-Juicebox and another one of your plugins. Reinstate each plugin one by one (and check your gallery's thumbnails after each one) to see if you can find the cause of the problem.
Also, try temporarily reverting to the default WordPress theme to see if there is a possible conflict between WP-Juicebox and your current theme.
(2) Juicebox-Pro uses only one backgroundColor configuration option for both normal and fullscreen modes.
However, it is possible to have different color backgrounds for normal and fullscreen modes through use of the Juicebox-Pro API, JavaScript and CSS. Please see this forum post for details. Please note, however, that this would be difficult to implement within WP-Juicebox.
Here are a few things to check:
Make sure that your gallery uses the latest version of Juicebox-Pro (v1.3.2). Please see the Upgrading Juicebox page if necessary.
Try re-uploading your gallery's 'jbcore' folder to ensure that all files on your web server are present and correct.
Make sure that your web page uses a valid Doctype Declaration. Please see here for details.
Validate the code on your web page with the W3C Markup Validation Service and fix any HTML errors reported.
Make sure that your IE10 browser is not in Compatibility Mode.
Temporarily disable any extensions that you may have in your IE10 browser to see if this makes a difference.
Clear your browser's cache to ensure that your browser is fetching the most recent gallery files from your web server.
If none of the above helps, then the problem may be due to incorrect or missing MIME types on your web server (for the .eot and .woff icon font files in the 'jbcore/classic/fonts/' folder).
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.
In my own tests, the adjustment I posted above (to reduce the number of lines displayed below each Gallery Index Page thumbnail) should work OK without any adverse side affects regarding thumbnail placement (though I have not tried every possible permutation of all options so cannot guarantee 100% success) and you are free to tweak your Showkase installation as desired.
As long as any CSS modifications you make are entered in your theme's 'custom.css' file (and you do not directly modify the source code of the program itself), then if you find any problems with the changes you make, you can easily change them back.
I notice that your gallery uses Juicebox-Lite v1.1.1.
Try upgrading your gallery to the latest version of Juicebox-Lite (v1.3.2) as many bugs have been fixed since v1.1.1 and upgrading might fix your problem without any further action.
For a full list of changes, please see the Version History.
For instructions on how to get the latest version of Juicebox-Lite and how to upgrade existing galleries, please see the Upgrading Juicebox page.
Also, try fixing the HTML errors on your gallery's web page.
You can validate the code on your page with the W3C Markup Validation Service and then fix any errors reported.
As you are specifying your gallery's dimensions as percentages, the aspect ratio of the gallery will depend on the dimensions of the user's browser window.
For the imageScaleMode configuration option, Juicebox-Lite uses the default value of SCALE_DOWN, which (as long as the main images are larger than the image area within the gallery) will display the images as large as possible within the image area in the gallery whilst maintaining their aspect ratio and without cropping.
If the aspect ratio of your images does not match that of the image area in the gallery, gaps above and below (or to the left and right) of the images may be seen.
Solutions would be to either:
(1) Define your gallery's dimensions using fixed pixel values rather than percentages to ensure that the aspect ratio of the image area in the gallery matches that of your images (no matter what the dimensions of the user's browser window are).
... or:
(2) Purchase Juicebox-Pro and change the imageScaleMode to FILL , STRETCH or NONE so that the images fill the image area (though in order to do so, images may be cropped).
Descriptions of the imageScaleMode configuration option values can be found in the Main Image section of the Config Options page.
Unfortunately all content of welcome and about pages disappeared and the upper half of contact too:(
If you want to remove the body text area from Juicebox gallery pages only, then use the following code in the '_themes/kosel/css/custom.css' file:
body.type-juicebox section.page-body {
display: none;
}
Moreover the gap on the gallery index page is still to big.
The gap beneath the thumbnails on the Gallery Index Page is to accommodate long gallery titles (which can wrap onto three separate lines before truncating). If you want only one line of text to be visible beneath each gallery thumbnail, try using the following code in the '_themes/kosel/css/custom.css' file. However, please note that I do not know what knock-on effects (if any) this may have.
body.type-galleryindex .content figcaption {
height: 1.25em;
}
Is there a way to control this individually for every page?
Each page has its own separate layout and the spacing on each page may be due to different elements (with different CSS classes).
If you want to customize your Showkase pages beyond what can be achieved in the interface, then I would recommend using your browser's developer tools to determine the element that you wish to change and then add custom CSS to the theme's 'custom.css' file.
Posts found: 4,376 to 4,400 of 5,812