You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Know nothing about code [SOLVED]
Hello
I bought the pro version because I want my webpage galleries like in this sample
http://www.juicebox.net/demos/support/r … index.html
Now I have the software but no idea on how to make it
Can someone please give me some help?
Thanks in advance
You can create individual galleries using JuiceboxBuilder-Pro.
An overview of JuiceboxBuilder-Pro can be found here and the User Guide can be found here.
Once you have built your galleries, you can view the source of the View Resizable Gallery with Top Menu Example web page in a browser and copy or modify it to suit your own needs (swapping the sample galleries for your own).
Alternatively, you might like to try the following.
Create as many individual galleries as you like and name the gallery folders 'gallery1', 'gallery2', etc.
Use the following code as an HTML file, place the file in the same directory as all your gallery folders and open the file in a browser. Each of your galleries will be represented by a link at the top of the page (using the Gallery Title as the link text) and you can switch between galleries using the links. The Gallery Description is used as the footer. You can edit the HTML file to change the 'Multiple Galleries' page title or the style of the page (e.g. colors) if you like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
margin: 0px;
}
#header {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
padding: 10px 0px;
text-align: center;
width: 100%;
}
#page {
font-size: 30px;
}
#menu {
padding: 10px 40px 0px 40px;
}
#footer {
background-color: #222222;
bottom: 0px;
color: #666666;
font-family: sans-serif;
font-size: 20px;
left: 0px;
position: relative;
text-align: center;
width: 100%;
}
#wrap {
margin: 0 auto;
width: 80%;
}
.gallery {
cursor: pointer;
}
a.gallery:hover {
color: #888888;
}
</style>
<script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">
// Initialize Juicebox object variable name
var jb;
// Function to process all galleries
function doProcess(counter) {
$.get('gallery' + counter + '/config.xml', function(data) {
// Build gallery folder name
var name = 'gallery' + counter;
// Create space between links
if (counter > 1) {
$('#menu').append($('<span />').html(' '));
}
// Fetch Gallery Title from gallery XML file
var title = $.trim($(data).find('juiceboxgallery').attr('galleryTitle')) || 'Untitled';
// Fetch Gallery Description from gallery XML file
var description = $.trim($(data).find('juiceboxgallery').attr('galleryDescription')) || '';
// Add link to Document Object Model and register click handler to run loadGallery and doLayout functions when link is clicked
$('#menu').append($('<a />').attr('id', name).addClass('gallery').html(title).click(function() {
loadGallery(name, description);
doLayout();
}));
// Initially load first gallery
if (counter === 1) {
loadGallery(name, description);
}
}).done(function() {
// Process next gallery
doProcess(++counter);
}).fail(function() {
// Display message if no galleries found
if (counter === 1) {
$('#menu').append($('<span />').text('No galleries found.'));
}
// Show header and footer when all galleries have been processed
$('#header, #footer').show();
// Layout page and resize gallery
doLayout();
});
}
// Function to layout page and resize gallery
function doLayout() {
var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height());
var headerHeight = parseInt($('#header').outerHeight(true));
var footerHeight = parseInt($('#footer').outerHeight(true));
var galleryHeight = windowHeight - headerHeight - footerHeight;
$('#wrap').height(galleryHeight);
if (jb) {
var galleryWidth = parseInt($('#wrap').innerWidth());
jb.setGallerySize(galleryWidth, galleryHeight);
}
}
// Function to load gallery, underline selected link and display Gallery Description in page footer
function loadGallery(base, desc) {
// Load gallery
jb = new juicebox({
backgroundColor: "#222222",
baseUrl: base + "/",
containerId: "juicebox-container",
galleryHeight: "100%",
galleryWidth: "100%"
});
// Underline selected link
$('.gallery').css('text-decoration', 'none');
$('#' + base).css('text-decoration', 'underline');
// Display Gallery Description in page footer
$('#description').css('padding', desc ? '10px 40px' : '0px').html(desc);
}
// Run following when Document Object Model is complete
$(document).ready(function() {
// Enter Page Title here
var page = "Multiple Galleries";
// Display Page Title in browser tab
document.title = page;
// Display Page Title in page header
$('#page').html(page);
// Hide header and footer until all galleries have been processed
$('#header, #footer').hide();
// Process all galleries
doProcess(1);
// Register resize handler to run doLayout function when browser window is resized
$(window).resize(doLayout);
});
</script>
<title></title>
</head>
<body>
<div id="header">
<div id="page"></div>
<div id="menu"></div>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
<div id="footer">
<div id="description"></div>
</div>
</body>
</html>It works great!
Thank you very much! :)
You're welcome!
I have another question...
I am using the index page that is above. How can I place some text below the little 10 pics on this index page?
Here is one example:
http://www.juicebox.net/demos/pro/flat/
Thanks in advance!
The code I posted above is actually already set up to display the galleryDescription below each gallery.
You can enter a galleryDescription for each gallery in JuiceboxBuilder-Pro's 'Customize -> General' section.
Alternatively, if you want the same text to be displayed in the footer regardless of the gallery currently being displayed, then you can replace the #footer div with something like the following:
<div id="footer">
<div id="description" style="padding: 10px 40px;">Custom text goes here.</div>
</div>... and then remove (or comment out) the following line:
$('#description').css('padding', desc ? '10px 40px' : '0px').html(desc);Thank you so much, my friend! :)
No problem!
Juicebox Support Forum → Juicebox-Pro Support → Know nothing about code [SOLVED]
Powered by PunBB, supported by Informer Technologies, Inc.