it would be nice to have the hashtag url's be configurable.
so instead of getting site.com/#1 , site.com/#2 etc.
if can be site.com/#name-of-some-picture
perhaps the hashtag url can be set in the xml config file.
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by dlydiard
Pages 1
it would be nice to have the hashtag url's be configurable.
so instead of getting site.com/#1 , site.com/#2 etc.
if can be site.com/#name-of-some-picture
perhaps the hashtag url can be set in the xml config file.
any chance of figuring out why there's a conflict? downgrading libraries doesn't seem like the right solution, especially downgrading jquery.
i'm using ie10 and the nav bar is showing on the bottom, where in chrome it doesn't show for the full page gallery.
i narrowed it down to bootstrap.min.js, simply including the file and not using any of its functionality caused the flickering.
not sure what is causing the conflict within the file. perhaps a conflicting data- attribute that's getting binded?
since bootstrap is pretty popular, hopefully this can get fixed.
this was my test file: http://danlydiard.com/index2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html, body
{
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #eaeaea;
}
#header {
width: 100%;
height: 75px;
}
#footer {
width: 100%;
height: 25px;
z-index: 10;
}
#header, #footer {
background-color: #222222;
color: #ffffff;
font-size: 20px;
padding: 10px 0;
text-align: center;
}
#juicebox-content {
width: 100%;
height: 600px;
position: relative;
padding-top: 75px;
}
@media (max-width: 979px) {
#juicebox-content {
padding-top: 0;
}
.footer {
display: none;
}
}
</style>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jbcore/juicebox-1.3.1.js"></script>
<script type="text/javascript">
function doLayout() {
var headerOffset = 75;
var footerMargin = 3;
var winHeight, headerHeight, footerHeight;
var mobileMenu = $('#navbar-mobile-menu');
winHeight = window.innerHeight || $(window).height();
headerHeight = $('#header').outerHeight();
footerHeight = $('#footer').outerHeight();
// adjust for responsive layout
if (mobileMenu.is(':visible')) {
headerOffset = 0;
footerMargin = -(footerHeight - footerMargin) + footerMargin;
}
var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight) - footerMargin;
$('#juicebox-content').height(newH - headerOffset); // see style.css padding for #juicebox-content for offset.
}
$(document).ready(function () {
doLayout();
$(window).on('resize', doLayout);
new juicebox({
baseUrl: '/fashion/',
themeUrl: '/js/jbcore/classic/theme-1.1.5.css',
containerid: 'juicebox-container',
galleryTitle: 'test test',
galleryDescription: 'test test test',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: '#eaeaea',
configUrl: '/fashion/jbconfig-1.1.5.xml'
});
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Gallery</title>
</head>
<body>
<div id="header">This is the header.</div>
<section id="main-content">
<div id="juicebox-content">
<div id="juicebox-container">
</div>
</div>
</section>
<footer id="footer">This is the footer.
</footer>
</body>
</html>all i did was simply remove boostrap.min.js and the flickering stopped.
i narrowed it down to my doLayout() js code. if i comment it out, it does not flicker.
function doLayout() {
var headerOffset = 75;
var footerMargin = 3;
var winHeight, headerHeight, footerHeight;
var mobileMenu = $('#navbar-mobile-menu');
winHeight = window.innerHeight || $(window).height();
headerHeight = $('#header').outerHeight();
footerHeight = $('#footer').outerHeight();
// adjust for responsive layout
if (mobileMenu.is(':visible')) {
headerOffset = 0;
footerMargin = -(footerHeight - footerMargin) + footerMargin;
}
var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight) - footerMargin;
$('#juicebox-content').height(newH - headerOffset); // see style.css padding for #juicebox-content for offset.
}i believe i got the initial code from these forums and modified it so it worked with my fixed navbar and footer.
this flickering still happens even if i don't use the window.onresize event to call doLayout().
any ideas why the resizing the content div would cause the flickering?
the textShadowColor option would be in your galleries XML file not the CSS file.
thanks steven i think with the combination of events and api calls i can get what i want.
using ios 6.1.3 on both devices.
http://danlydiard.com (just tap right half of screen to toggle the overlay)
yes 1.3.1
you can use https://github.com/ten1seven/jRespond and create different galleries, that's how i plan to do this unless Juicebox beats me to it...
the hardest part to deal with would be device rotation or screen resizing and reloading the same page the user was on before the resize event.
on iphone & ipad safari, i noticed that if you touch the image to toggle the imageNav/buttonBar a halfscreen div (pretty sure it's used for onclick navigation) will flicker really quickly (a black box). this does not happen on the desktop when moving the mouse in/out of the nav area. anyone else experience this?
showOverlayOnLoad="FALSE" fixed the problem. is this also settable via the API?
i actually want this to be set to TRUE for mobile and FALSE otherwise, but i don't really want to make a new mobile jbconfig.xml to maintain.
more specifically if could control the buttonBar and imageNav independently, that would be best. for instance i only want the buttonBar to show on mouseover and not onLoad, but i do want the imageNav to show on both onLoad and mouseover.
is it possible that the resize is stripping out any ICC profiles embedded in the image? web images should be saved as srgb and no embedded ICC profile.
this only happens in chrome and if showImageOverlay in my XML config is set to AUTO.
i'm using the latest version of chrome and my mouse is at the top of my LCD (it never enters the webpage area). i click new tab, and type in http://danlydiard.com
i see the Ajax spinner spin and NO image, however the toolbar and next icons are displayed even though my mouse is not over any images. if i move my mouse to the image area and back up to the top (effectively triggering the imageOverlay events) the image will suddenly appear. this bug doesn't happen in Firefox/safari/IE10. it also does not happen if i set showImageOverlay to NEVER.
this problem also seems intermittent, but happens the majority of the time for me. also, it doesn't do it unless the browser is fetching from cache... if i clear my cache and load the page, it works just fine... so to reproduce it you might have to view the url one time, close the tab, then launch a new tab...
i believe this problem didn't start happening until i upgraded to v1.3 and starting using the buttonBarPosition="OVERLAY" option for the social media icons.
btw the button bar and navigation icons (set to auto) automatically appear when i first load up the page on any browser, even if my mouse has never entered the juicebox content area... not sure if this was intended or not, but doesn't seem right to me.
screenshot
https://www.dropbox.com/s/gj70sxy33ayfp … -10-35.png
php solution here
solved: support told me, seo content is only generated with the builder program.
hi i downloaded 1.1.3 but cannot get the noscript tags to show up on my site.
http://danlydiard.com/print/ is currently converted to use 1.1.3
config is here: http://danlydiard.com/print/jbconfig-1.1.3.xml
initialization is like so:
new juicebox({
baseUrl: '/print/',
themeUrl: '/js/jbcore/classic/theme.css',
containerId: 'juicebox-container',
galleryTitle: 'print - Dan Lydiard Photographer',
galleryDescription: 'Seattle print photography',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: '#eaeaea',
configUrl: '/print/jbconfig-1.1.3.xml'
});
any ideas why the SEO info is not showing in noscript tags for my site?
i think this is a reasonable approach for now, thanks!
Juicebox does not support such functionality out-of-the-box but if you wanted to, you could created your own conditional statements (based on platform or resolution) within your gallery's JavaScript embedding code and then direct the gallery towards an appropriate XML file (listing the images you wish to display) using the configUrl configuration option.
is there a way to have jb load smaller image files based on platform or resolution.
for example,
breakpoints : {
"_small":360,
"_medium":780,
"_large":900
},
something along those lines, where the appropriate image would be loaded based on screen width.
never mind, figured out how to do what i want via the API.
hi i have a page setup with a fixed top bar and a 100% height body, and a footer at that's always at the bottom..
as soon as i use juicebox, the plugin does not take into account the height of the topbar (not expecting it to) and basically pushes the footer down thus creating a scrollbar.
is there anyway to tell juicebox i want X amount of pixels subtracted from the height it calculates for the juicebox container div? the height it's calculating seems to be the browser window size and not the size of the container i put the juicebox container inside of.
thanks.
Pages 1
Juicebox Support Forum → Posts by dlydiard
Powered by PunBB, supported by Informer Technologies, Inc.
