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?