You are not logged in. Please login or register.
Juicebox Support Forum → Posts by herb875
Pages 1
Hi Steven,
is there a way to configure the expanded view to open in a different layout then the "normal" gallery?
To explain: The "normal" gallery on my site has a classic layout with captions below and thumbs on the right. Now, if the user clicks the expand-button, i want the gallery to open without thumbnails. Just the maximized Image with captions below.
Thanks for any suggestions, Kai
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
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 had already tried ... but unfortunately, it does not change anything :-(
sorry steven, but unfortunately this don´t change anything... Any other idea?
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/
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?
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
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
Hello to all,
with the Juicebox builder unfortunately you can not position the button bar below the main image.
I'm trying to create a layout (made with Simple Viewer Pro) in this example:
http://www.kai-abresch.de/01-portfolio/ … erieur.htm
Is there a way to do that with CSS?
Kind regards, Kai
steven,
perfect, thank you so much!
Button bar Option to put it direct below the main image (until now the options are only top, overlay and overlay image).
steven,
since i have a fixed layout, this works perfekt. Thank you so much!
One more litle thing: Is there a corresponding method to move the main-image-nav-buttons downwards?
Hello,
I'm trying to build with JB pro a layout like this: Main Image left, Thumbnails (2 columns, 4 rows) on right and verticaly centered next to the main picture (the classic simpleviewer layout).
I´ve put an example online here:
http://www.abresch-studio.de/0_test/test/test.html
The Problem: The thumbnails are indeed centered vertically ... But apparently in relation to the complete gallery height. But in relation to the main image, the thumbnails are positioned too low.
Is there the possibility to move the thumbnail area to (for example) 50 or 100 pixels up? I have been trying desperately to control that via CSS. But unfortunately in the theme.css I can´t find the corresponding rule :-(
Thank you for any advice
-kai
Pages 1
Juicebox Support Forum → Posts by herb875
Powered by PunBB, supported by Informer Technologies, Inc.