You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Thumbnail postions
Hi,
I want to position my thumbnails to the side of my main image in a large browser (1200px) - but when the browser is under 700px, I want the thumbnails to reposition themselves under the image. Is this possible?
Seb
There are no configuration options that could be used to achieve this but it could be done with JavaScript as follows.
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var a, b, c;
var thresholdWidth = 700;
var tracker = false;
function loadGallery(a, b, c) {
new juicebox({
containerId: "juicebox-container",
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
tracker = true;
}
function thumbsStatus() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
if (windowWidth < thresholdWidth && (c === 'LEFT' || tracker === false)) {
a = '10'; // maxThumbRows
b = '1'; // maxThumbColumns
c = 'BOTTOM'; // thumbsPosition
loadGallery(a, b, c);
}
if (windowWidth >= thresholdWidth && (c === 'BOTTOM' || tracker === false)) {
a = '3'; // maxThumbRows
b = '3'; // maxThumbColumns
c = 'LEFT'; // thumbsPosition
loadGallery(a, b, c);
}
}
$(document).ready(function() {
thumbsStatus();
$(window).resize(thumbsStatus);
});
</script>I hope this helps.
Hi Steven,
Thanks for taking the time to write this script. Unfortunately, I can't read JavaScript. How exactly would I implement this in my page? This is the test page: http://www.artwebs.co.uk/colStonewareBrick.asp
Seb
You are already using a JavaScript function to load a specific gallery (depending on which HTML button is clicked) passing parameters for the baseUrl and galleryHeight.
If you were using just the regular embedding code (found here), then you could simply swap the entire embedding code for my extended version above.
However, incorporating my suggested solution into your existing web page will be a little more complicated as you will need to keep track of which gallery should be reloaded (and its height) when the threshold width is crossed.
Try replacing:
<script>
$(document).ready(function() {
//load gallery 1
loadGallery('colStonewareBrickSets/', '650px');
//initialize top buttons
$("#button-1").on("click", function(){loadGallery('colStonewareBrick/', '500px');});
$("#button-2").on("click", function(){loadGallery('colStonewareBrickSets/', '650px');});
});
function loadGallery(base, height) {
new juicebox({
baseUrl: base,
containerId: 'juicebox-container',
backgroundColor: 'fff',
galleryWidth: '100%',
galleryHeight: height
});
}
</script>... with:
<script type="text/javascript">
var a, b, c;
var y = 'colStonewareBrickSets/'; // Initial baseUrl
var z = '650'; // Initial galleryHeight
var thresholdWidth = 700;
var tracker = false;
function loadGallery(a, b, c, y, z) {
new juicebox({
containerId: "juicebox-container",
baseUrl: y,
galleryHeight: z,
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
tracker = true;
}
function thumbsStatus() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
if (windowWidth < thresholdWidth && (c === 'LEFT' || tracker === false)) {
a = '10'; // maxThumbRows
b = '1'; // maxThumbColumns
c = 'BOTTOM'; // thumbsPosition
loadGallery(a, b, c, y, z);
}
if (windowWidth >= thresholdWidth && (c === 'BOTTOM' || tracker === false)) {
a = '3'; // maxThumbRows
b = '3'; // maxThumbColumns
c = 'LEFT'; // thumbsPosition
loadGallery(a, b, c, y, z);
}
}
$(document).ready(function() {
thumbsStatus();
$(window).resize(thumbsStatus);
$("#button-1").click(function() {
y = 'colStonewareBrick/';
z = '500';
loadGallery(a, b, c, y, z);
});
$("#button-2").click(function() {
y = 'colStonewareBrickSets/';
z = '650';
loadGallery(a, b, c, y, z);
});
});
</script>Hopefully this will help.
Hi Steven,
Thanks so much for your help with this JavaScript. I finally have got round to implementing the new script you wrote in my test page:
http://www.artwebs.co.uk/colCatwalk.asp
and it works really well.
The only thing is that on gallery swap, there is a brief (sometimes longer depending on connection) black background. I understand that there's a delay in the gallery change, but is it possible to make this background white - or even have gif of a timer as a background image?
I've tried to do this by putting a background colour on the containing DIVS by to no avail.
Thanks,
Seb
Try setting your gallery's background color in the JavaScript embedding code instead of just in the 'config.xml' files.
Try changing:
function loadGallery(a, b, c, y, z) {
new juicebox({
containerId: "juicebox-container",
baseUrl: y,
galleryHeight: z,
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
tracker = true;
}... to:
function loadGallery(a, b, c, y, z) {
new juicebox({
backgroundColor: "rgba(255,255,255,1)",
containerId: "juicebox-container",
baseUrl: y,
galleryHeight: z,
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
tracker = true;
}This should hopefully help.
Hi Steven,
Works a treat! Thank you.
The last thing I need to be able to do now is be able to keep the buttons - which select the galleries - lit, when scrolling through the images. The pseudo-class a:active doesn't seem to keep them lit when clicking on anything in the gallery.
Any ideas?
Really appreciate your help with this one. I think it's made a fantastic and user-friendly gallery for most browser sizes.
Cheers,
Seb
Works a treat! Thank you.
You're welcome.
The last thing I need to be able to do now is be able to keep the buttons - which select the galleries - lit, when scrolling through the images.
I notice that the highlighted button loses its highlighting not only when browsing through gallery images but also when clicking anywhere else on your page so it looks like the problem is with the CSS styling of your buttons rather than directly with the gallery itself.
Try adding the following CSS to your 'maincss.css' file (at the end of the 'slideNav' section):
#slideNav li a.selected {outline: none; border-color: #FFF; border-color: rgba(255,255,255,0.65); color: #FFFFFF; box-shadow: inset 0px 12px 8px rgba(255,255,255,.2); background-color: #487799;}... and add the following jQuery JavaScript to your web page (at the end of your existing $(document).ready(function() { ... }); section):
$('#slideNav li a').click(function() {
$('#slideNav li a').removeClass('selected');
$(this).addClass('selected');
});This jQuery JavaScript code adds a CSS class to the button which was most recently clicked (removing the class from all other buttons) and styles it accordingly (with the new CSS rule added to your 'maincss.css' file).
Again - works a treat....Thank you!
How would I now get one of the buttons to show as selected on page load?
Seb
Initially, none of your buttons have the class 'selected'.
All you need to do is give a button the class 'selected' either directly via CSS, e.g.:
<li><a href="javascript:;" id="button-1" class="selected">Catwalk Vibrant Colours</a></li>... or via (jQuery) JavaScript:
$('#slideNav li a:eq(0)').addClass('selected');... where 'eq(0)' represents the first button, 'eq(1)' represents the second, etc.
Thanks again Steven for your invaluable support. Really pleased with this slide gallery, and now have a good template for future use.
I've promised myself to sit down and learn some fundamentals of JavaScript - and brush up on my CSS knowledge too!
Seb
Incidentally, I've just noticed that while viewing on a phone, I'm getting a rectangular shadow under the image captions. This only seems to show on mobile devices. I've tried to put in white backgrounds in the embedded code, but the shadow persists. Any ideas?
Cheers
Thanks again Steven for your invaluable support. Really pleased with this slide gallery, and now have a good template for future use.
You're welcome.
I'm glad your getting on well with Juicebox and your web site.
I've promised myself to sit down and learn some fundamentals of JavaScript - and brush up on my CSS knowledge too!
In case you're interested, I find the Mozilla Developer Network is a good reference for all things HTML, CSS and JavaScript.
You might also like to check out W3Schools. It's maybe not as comprehensive as the Moz Dev Network but it's often easier to navigate through their web pages (less information to trawl through) and find something quickly.
I also use the jQuery JavaScript Library a lot. It can simplify the code required for complex JavaScript tasks.
Incidentally, I've just noticed that while viewing on a phone, I'm getting a rectangular shadow under the image captions.
This is due to captionBackTopColor having different default values for Small Screen Mode and Large Screen Mode.
Please see my posts in this forum thread for more information.
The solution is to ensure that a captionBackTopColor value is explicitly set in your gallery's configuration options (and this value will be used in both Small and Large Screen Modes).
Just set captionBackTopColor="rgba(0,0,0,0)" (in JuiceboxBuilder-Pro's 'Customize -> Color' section) and all should be well.
Juicebox Support Forum → Juicebox-Pro Support → Thumbnail postions
Powered by PunBB, supported by Informer Technologies, Inc.