Topic: Juicebox and lightbox functionality
I would like to know If is possible, when I click on a image in gallery is possible to open a lightbox, or If juicebox supports to install other scripts to do this.
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Juicebox and lightbox functionality
I would like to know If is possible, when I click on a image in gallery is possible to open a lightbox, or If juicebox supports to install other scripts to do this.
Juicebox-Pro does not feature lightbox functionality but you could incorporate a lightbox into your gallery and have each image displayed in the lightbox when clicked by following the instructions below.
(1) This example uses Shadowbox so you would need to download and include the Shadowbox CSS and JavaScript files on your gallery's HTML page as documented here.
(2) This example also uses jQuery so would need to download and include the jQuery JavaScript file on your gallery's HTML page.
(3) Set imageClickMode="OPEN_URL" in your gallery's XML file (so that the corresponding linkURL is opened when a main image is clicked).
(4) Set every linkURL in your gallery's XML file to point to a JavaScript function (see Step #5 below) in your gallery's HTML page: linkURL="javascript: func();"
(5) Set every linkTarget in your gallery's XML file to '_self': linkTarget="_self"
(6) Set up the JavaScript function (in this example named func()) in the gallery's HTML page to use the Juicebox-Pro API (specifically the getImageIndex() and getImageInfo() methods) to determine the URL of the image to open in Shadowbox.
(7) Open the image in Shadowbox using the JavaScript method documented here.
Your gallery's HTML page would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="This is a Juicebox-Pro Gallery. Get yours at www.juicebox.net" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css">
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
var jb;
$(document).ready(function () {
jb = new juicebox({
containerId : 'juicebox-container'
});
});
function func() {
var index = jb.getImageIndex();
var info = jb.getImageInfo(index);
var url = info.imageURL;
var title = info.title;
Shadowbox.open({
content: url,
player: 'img',
title: title
});
}
</script>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>... and a single <image> entry in your gallery's XML file would look something like this:
<image imageURL="images/wide.jpeg"
thumbURL="thumbs/wide.jpeg"
linkURL="javascript: func();"
linkTarget="_self">
<title><![CDATA[Title text]]></title>
<caption><![CDATA[Caption text]]></caption>
</image>Is this also possible for the Juicebox-Pro Wordpress plugin? Thx for answer?
Implementing the above (to have a lightbox open to display an image when it is clicked) into galleries created by WP-Juicebox can be done but would require quite a bit of work as the plugin does not have any built-in lightbox-style functionality, does not have interface support for linkURL or linkTarget and the embedding code that the plugin provides would have to be modified to include the custom JavaScript code required.
(1) Install and activate WP-Juicebox.
(2) Upgrade WP-Juicebox to Juicebox-Pro following the instructions here (required for setting imageClickMode="OPEN_URL" and for using the Juicebox-Pro API).
(3) Install and activate the Shadowbox JS plugin (and download the Shadowbox source files from within the plugin's settings page).
(4) Open the 'wp-juicebox/config.php' file in a plain text editor and change all three instances (on lines 47, 74 and 98) of:
$image_element->setAttribute('linkURL', $image_url);... to:
$image_element->setAttribute('linkURL', 'javascript: func();');(5) Also, in the same file, change all three instances (on lines 48, 75 and 99) of:
$image_element->setAttribute('linkTarget', '_blank');... to:
$image_element->setAttribute('linkTarget', '_self');(6) Open the 'wp-juicebox/wp-juicebox.php' file in a plain text editor and change lines 240-251 (the $string_builder section) to the following:
$string_builder = '<!--START JUICEBOX EMBED-->' . PHP_EOL;
$string_builder .= '<script type="text/javascript">' . PHP_EOL;
$string_builder .= ' var jb;' . PHP_EOL;
$string_builder .= ' jQuery(document).ready(function () {' . PHP_EOL;
$string_builder .= ' jb = new juicebox({' . PHP_EOL;
$string_builder .= ' backgroundColor: "' . $background_color . '",' . PHP_EOL;
$string_builder .= ' configUrl: "' . $config_url . '",' . PHP_EOL;
$string_builder .= ' containerId: "juicebox-container-' . $gallery_id . '",' . PHP_EOL;
$string_builder .= ' galleryHeight: "' . $gallery_height . '",' . PHP_EOL;
$string_builder .= ' galleryWidth: "' . $gallery_width . '"' . PHP_EOL;
$string_builder .= ' });' . PHP_EOL;
$string_builder .= ' });' . PHP_EOL;
$string_builder .= ' function func() {' . PHP_EOL;
$string_builder .= ' var index = jb.getImageIndex();' . PHP_EOL;
$string_builder .= ' var info = jb.getImageInfo(index);' . PHP_EOL;
$string_builder .= ' var url = info.imageURL;' . PHP_EOL;
$string_builder .= ' var title = info.title;' . PHP_EOL;
$string_builder .= ' Shadowbox.open({' . PHP_EOL;
$string_builder .= ' content: url,' . PHP_EOL;
$string_builder .= ' player: "img",' . PHP_EOL;
$string_builder .= ' title: title' . PHP_EOL;
$string_builder .= ' });' . PHP_EOL;
$string_builder .= ' }' . PHP_EOL;
$string_builder .= '</script>' . PHP_EOL;
$string_builder .= '<div id="juicebox-container-' . $gallery_id . '"></div>' . PHP_EOL;
$string_builder .= '<!--END JUICEBOX EMBED-->' . PHP_EOL;(7) Enter imageClickMode="OPEN_URL" in the Pro Options text area of your gallery's settings window.
Please note that the procedure above has not been tested extensively and I cannot vouch for the robustness of the solution or the stability of WP-Juicebox itself after making these modifications.
However, I hope it help and at least points you in the right direction.
[The line numbers above refer to the current version of WP-Juicebox (v1.4.0.1).]
It should certainly be possible to load a Juicebox gallery into a lightbox as long as the lightbox script in question supports displaying HTML pages (rather than just images) as a Juicebox gallery needs to be embedded in an HTML web page.
As far as I am aware, Lightbox does not support displaying HTML pages.
An alternative to Shadowbox for this purpose would be SimpleModal.
To see an example in action, create a sample gallery with JuiceboxBuilder-Pro, use the following code for the gallery's 'index.html' file and include the jQuery and SimpleModal JavaScript files in your gallery folder.
Then, open the 'index.html' page in a browser and click the 'Gallery' button to open the gallery in a SimpleModal overlay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<style type="text/css">
body {
margin: 0px;
}
#juicebox-container {
display: none;
}
.simplemodal-wrap {
overflow: hidden !important;
}
#simplemodal-container {
background-color: #333333;
border: 8px solid #444444;
height: 400px;
padding: 12px;
width: 600px;
}
#simplemodal-container a.modalCloseImg {
background: url('simplemodal/x.png') no-repeat;
cursor: pointer;
display: inline;
height: 29px;
position: absolute;
right: -16px;
top: -15px;
width: 25px;
z-index: 3200;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.simplemodal.js"></script>
<script>
$(document).ready(function() {
$('#link').click(function() {
$('#juicebox-container').modal({
onClose: function (dialog) {
dialog.data.fadeOut('slow', function() {
dialog.container.hide('slow', function() {
dialog.overlay.fadeOut('slow', function() {
$.modal.close();
});
});
});
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function() {
dialog.data.hide();
dialog.container.show('slow', function() {
dialog.data.fadeIn('slow');
new juicebox({
containerId: "juicebox-container",
galleryHeight: "100%",
galleryWidth: "100%"
});
});
});
},
overlayCss: {
backgroundColor: "rgba(0,0,0,0.5)"
}
});
return false;
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="header">
<input type="button" id="link" value="Gallery" />
</div>
<div id="juicebox-container"></div>
<div id="footer">
<span>Other content</span>
</div>
</body>
</html>If you want to open an image from within a gallery in a lightbox script, then this would be more complex and I have only had success doing so with Shadowbox (as noted in my posts above).
Perhaps other users have tried this with other lightbox scripts and can help out further.
It may still be possible to open images with a lightbox script other than Shadowbox but Shadowbox made it easy by allowing its lightbox to be opened via a custom JavaScript call.
If you are still interested in using Shadowbox, then you should be able to download the files from the GitHub page here: https://github.com/mjackson/shadowbox
Juicebox Support Forum → Juicebox-Pro Support → Juicebox and lightbox functionality
Powered by PunBB, supported by Informer Technologies, Inc.