You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Change thumbnail position dynamically (rotate screen)? [SOLVED]
Hello,
is possible to change the thumbnails-position, depending on the horizontal or vertical state of the screen?
My goal is a layout that changes dynamically (e.g. on a tablet) when the device turns from portrait to landscape mode (horizontal: Thumbnails right, portrait: Tumbnails below).
Kind regards
Kai
This is not possible using only the available configuration options.
In Large Screen Mode, the thumbsPosition value is consistent across all browsers and devices and cannot be changed depending on orientation or the aspect ratio of the viewport.
Here's a possible solution using JavaScript to detect the aspect ratio of the viewport (each time the viewport size changes) and reload the gallery with the required layout if necessary.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the 'index.hml' page with the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var a = '3';
var b = '3';
var c = 'RIGHT';
function loadGallery(a, b, c) {
new juicebox({
containerId: "juicebox-container",
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
}
function thumbsStatus() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
if (windowWidth < windowHeight && c === 'RIGHT') {
a = '10';
b = '1';
c = 'BOTTOM';
loadGallery(a, b, c);
}
if (windowWidth >= windowHeight && c === 'BOTTOM') {
a = '3';
b = '3';
c = 'RIGHT';
loadGallery(a, b, c);
}
}
$(document).ready(function() {
thumbsStatus();
$(window).resize(thumbsStatus);
loadGallery(a, b, c);
});
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>I hope this helps.
Hi Steven,
great! This works... Just a little bug in the last if-statement: i´ve changed "LEFT" to "Right" (in order to change the thumbs to the place they were before). If somebody wants to use this litle script, it looks like this:
<script type="text/javascript">
var a = '3';
var b = '3';
var c = 'RIGHT';
function loadGallery(a, b, c) {
new juicebox({
containerId: "juicebox-container",
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
}
function thumbsStatus() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
if (windowWidth < windowHeight && c === 'RIGHT') {
a = '10';
b = '1';
c = 'BOTTOM';
loadGallery(a, b, c);
}
if (windowWidth >= windowHeight && c === 'BOTTOM') {
a = '3';
b = '3';
c = 'RIGHT';
loadGallery(a, b, c);
}
}
$(document).ready(function() {
thumbsStatus();
$(window).resize(thumbsStatus);
loadGallery(a, b, c);
});
</script>Since my new website will be a wordpress site, i´m trying to integrate this into wordpress.
Thank you so much :-)
Regards, Kai
Hi Steven, please allow me another question to implement your "thumbnailpositionchange-onrotate-script-solution" in my wordpress site :-)
First of all, i´ve sucessfully done this: To make things easy in a testing stage, i´ve hardcoded your Script in the header.php like this:
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script src="http://s573216863.online.de/wordpressDevs/blankoTest/0_portfolio/test02/jbcore/juicebox.js"></script>
<script type="text/javascript">
var a = '3';
var b = '3';
var c = 'RIGHT';
function loadGallery(a, b, c) {
new juicebox({ baseUrl : 'http://s573216863.online.de/wordpressDevs/blankoTest/0_portfolio/test02/',
containerId: "juicebox-container",
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
}
function thumbsStatus() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
if (windowWidth < windowHeight && c === 'RIGHT') {
a = '10';
b = '1';
c = 'BOTTOM';
loadGallery(a, b, c);
}
if (windowWidth >= windowHeight && c === 'BOTTOM') {
a = '3';
b = '3';
c = 'RIGHT';
loadGallery(a, b, c);
}
}
$(document).ready(function() {
thumbsStatus();
$(window).resize(thumbsStatus);
loadGallery(a, b, c);
});
</script>Then i´ve just pastet in a page:
<div class="hidegaleryp"> <div id="juicebox-container"></div></div>This works so far...
However, now i can call the same gallery on multiple pages. But of course, that´s not what i intended to do. I want to distribute many different galleries on different pages. So, since it´s possible (as far as I know) to call javascript from the body-tag, I tried the following:
Reversed the changes in header.php.
Then, in the wordpress backend, i´ve inserted the following code in page :
<script src="http://s573216863.online.de/wordpressDevs/blankoTest/0_portfolio/test02/jbcore/juicebox.js"></script>
<script type="text/javascript">// <![CDATA[
var a = '3';
var b = '3';
var c = 'RIGHT';
function loadGallery(a, b, c) {
new juicebox({ baseUrl : 'http://s573216863.online.de/wordpressDevs/blankoTest/0_portfolio/test02/',
containerId: "juicebox-container", galleryWidth : '100%', galleryHeight : '100%',
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
}
function thumbsStatus() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
if (windowWidth < windowHeight && c === 'RIGHT') { a = '10'; b = '1'; c = 'BOTTOM'; loadGallery(a, b, c); } if (windowWidth >= windowHeight && c === 'BOTTOM') {
a = '3';
b = '3';
c = 'RIGHT';
loadGallery(a, b, c);
}
}
$(document).ready(function() {
thumbsStatus();
$(window).resize(thumbsStatus);
loadGallery(a, b, c);
});
// ]]></script>
<div id="juicebox-container"></div>This way, I thought, I can easily distribute different galleries by simply changing the folder-path on each page. But unfortunately it does not work. In the frontend, the <div id = "juicebox-container"> </ div> remains empty: - ((
Can you please give me a hint what I'm doing wrong here?
Ahh.. Sorry, I forgot to mention: You can see the site i´m working on here:
http://s573216863.online.de/wordpressDevs/blankoTest/
If you click on "home", theres the "normal" gallery (without srcript, just embedded).
The page in question is: http://s573216863.online.de/wordpressDe … cripttest/
Just a little bug in the last if-statement: i´ve changed "LEFT" to "Right" (in order to change the thumbs to the place they were before).
Thank you for pointing this out. I've now changed the error in my original post.
In the frontend, the <div id = "juicebox-container"> </ div> remains empty: - ((
The problem is likely to be that WordPress loads its own version of jQuery into your web page and you might have to change:
$(document).ready(function() {
thumbsStatus();
$(window).resize(thumbsStatus);
loadGallery(a, b, c);
});... to:
jQuery(document).ready(function() {
thumbsStatus();
jQuery(window).resize(thumbsStatus);
loadGallery(a, b, c);
});... in order to use this jQuery code in your WordPress web page.
sorry steven, but unfortunately this don´t change anything... Any other idea?
Sorry. I missed a $. I've corrected my post above. Try:
jQuery(document).ready(function() {
thumbsStatus();
jQuery(window).resize(thumbsStatus);
loadGallery(a, b, c);
});I had already tried ... but unfortunately, it does not change anything :-(
There are still $ characters which should be replaced with jQuery in the thumbsStatus() function. Apologies for missing them first time around.
Change:
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();... to:
var windowWidth = window.innerWidth ? window.innerWidth : jQuery(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : jQuery(window).height();I am still hopeful that this is the root of the problem and that changing all instances of $ to jQuery in the custom code will work.
Also, it might help to check your web page with the W3C Markup Validation Service and fix any errors reported.
(I notice that there is an opening <div> tag before the <head> tag on your web page which should not be there.)
Steven, thank you for your hints. I have polished the html a little bit ;-).
However, the replacement of all $ in jQuery has not helped... To be perfectly clear, I add the complete code, which is currently in the page:
<div class="hidegaleryp"><script src="http://s573216863.online.de/wordpressDevs/blankoTest/0_portfolio/test02/jbcore/juicebox.js"></script>
<script type="text/javascript">// <![CDATA[
var a = '3';
var b = '3';
var c = 'RIGHT';
function loadGallery(a, b, c) {
new juicebox({ baseUrl : 'http://s573216863.online.de/wordpressDevs/blankoTest/0_portfolio/test02/',
containerId: "juicebox-container", galleryWidth : '100%', galleryHeight : '100%',
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
}
function thumbsStatus() {
var windowWidth = window.innerWidth ? window.innerWidth : jQuery(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : jQuery(window).height();
if (windowWidth < windowHeight && c === 'RIGHT') { a = '10'; b = '1'; c = 'BOTTOM'; loadGallery(a, b, c); } if (windowWidth >= windowHeight && c === 'BOTTOM') {
a = '3';
b = '3';
c = 'RIGHT';
loadGallery(a, b, c);
}
}
jQuery(document).ready(function() {
thumbsStatus();
jQuery(window).resize(thumbsStatus);
loadGallery(a, b, c);
});
// ]]></script>
<div id="juicebox-container"></div>
</div>Sorry, i´m still a beginner with jQuery... Maybe i missed to replace some other jQuery-related expressions?
I've taken a fresh look at your web page and the problem seems to be that WordPress is escaping certain characters in the code resulting in broken JavaScript.
If you take a look at the source of your web page, you will see that:
if (windowWidth < windowHeight && c === 'RIGHT') {... is being entered as:
if (windowWidth < windowHeight && c === 'RIGHT') {... and your closing CDATA tag // ]]>; is being entered as // ]]>.
It looks like the WordPress editor is not respecting your code and leaving it unaltered.
Try installing the Raw HTML WordPress plugin and then wrap your code in [raw] ... [/raw] tags.
This should allow your custom HTML code to remain unmodified in your WordPress post.
Steven, i´m so happy... That does the trick. Huray :-))
Thanks to your script, i now can alter every gallary directly from the page where it´s embeded (with any option i want). For exemple: At first, i positioned the thumbNav in center with the Thumbnails in portraitmode. Endless possibilitys... That´s so great!
For anybody who want to use it, i suggest to turn on the "Raw HTML" under "Screen Options" on the Page or Post Backend. Then you can activate the RAW HTML settings in the sidebar on a per page basis. Till i discovered this, it not worked.
Grateful greetings, Kai
I'm glad you've got it working. Thank you for letting me know.
Juicebox Support Forum → Juicebox-Pro Support → Change thumbnail position dynamically (rotate screen)? [SOLVED]
Powered by PunBB, supported by Informer Technologies, Inc.