@fkelly12054
Many thanks for sharing your experiences and web site link.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
@fkelly12054
Many thanks for sharing your experiences and web site link.
The current version of WP-Juicebox (v1.4.4.2) should already support Google Photos.
Select 'Picasa Web Album' as the image source and enter your Google Account name in the 'Picasa User Id' input field (for example gallery123 from 'gallery123@gmail.com') and your Album Name in the 'Picasa Album Id/Name' input field.
Ideally, the fading in of a gallery should not affect other non-gallery elements on your web page.
Please post the URL to your web page so that I can take a look at the problem for myself and hopefully help further.
The solution might just be to change use or change some CSS selectors on your header but I should have a better idea of what the problem might be when I see your web page. Thank you.
The galleryTitle disapears when i move the mouse out of the juicebox area.
Is there a setting that i can set?
In Juicebox-Lite, the image overlay disappears after 4 seconds of inactivity or when the mouse hovers outside the gallery and, by default, the Gallery Title is positioned on the overlay.
There are certain configuration options you could use to change this behavior but they are all available to Juicebox-Pro only and are not supported by Juicebox-Lite.
(1) You could change inactivityTimeout to change the auto-hide time period (or set it to zero to disable the auto-hide functionality).
(2) You could change showImageOverlay from its default value of AUTO to ALWAYS (to always show the overlay).
(2) You could use galleryTitlePosition to place the gallery title in a non-overlay position (TOP or ABOVE_THUMBS).
Also i like to know if it is possible to put the juicebox area higher on the page,
of is this a restriction of the WP theme i use?
Whether you insert your gallery's embedding code manually or use the WP-Juicebox plugin to insert a Juicebox shortcode, the gallery will appear in the content section of your page or post.
However, the location of of the page or post content will be determined by your WordPress theme.
If you like, you could post the URL to your gallery's web page.
I'll be happy to take a look and see if there is anything that you can do to move the gallery up your page.
As far as I am aware, the Juicebox module for Drupal does not support Picasa/Google+ as a source of images.
Please note that we did not write the module ourselves and, as such, I am not familiar with its source code and do not know how easy or difficult it might be to add such functionality.
You might like to post in the Drupal forum where the author of the module might be able to help you further.
In the meantime, here are some notes which might help.
Below is some sample PHP code which can be used to fetch images from Picasa/Google+ and display them in a Juicebox gallery.
To see the example in action:
(1) Enter your own Picasa User Id and Picasa Album Name on lines 38 and 39 of the code below.
(2) Put the code in a file named 'config.php' and place the file in your gallery folder (in the same directory as the page containing the gallery's embedding code).
(3) Add configUrl: 'config.php', to your gallery's embedding code, for example:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
configUrl: 'config.php'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
Now just open the gallery's web page in your browser and your Picasa/Google+ images should be displayed.
(The code also uses the Picasa images's 'title' as the Juicebox image title and the Picasa image's 'summary' as the Juicebox image caption.)
You could use the baseUrl method to embed your galleries into your Drupal pages manually (please see the Embedding in a Drupal Site support section for details) and use the technique above to display your Picasa/Google+ images.
This might be easier than trying to modify the Drupal module to accept a new source of images.
Here is the 'config.php' file code:
<?php
header('Content-type: application/xml');
function get_attachments_picasa($picasa_user_id, $picasa_album_name) {
$attachments = array();
$name = remove_whitespace($picasa_album_name);
$term = preg_match('/^[0-9]{19}$/', $name) ? 'albumid' : 'album';
$picasa_feed = 'http://picasaweb.google.com/data/feed/api/user/' . remove_whitespace($picasa_user_id) . '/' . $term . '/' . $name . '?kind=photo&imgmax=1600';
$entries = @simplexml_load_file($picasa_feed);
if ($entries) {
foreach ($entries->entry as $entry) {
$attachments[] = $entry;
}
}
return $attachments;
}
function remove_whitespace($input) {
return preg_replace('/\\s+/', '', $input);
}
function line_break($input) {
return preg_replace('/\r\n|\r|\n/', '<br />', $input);
}
function strip_control_characters($input) {
$output = @preg_replace('/\p{Cc}+/u', '', $input);
return $output ? $output : $input;
}
$dom_doc = new DOMDocument('1.0', 'UTF-8');
$dom_doc->formatOutput = true;
$settings_tag = $dom_doc->createElement('juiceboxgallery');
$custom_values = array();
$custom_values['e_picasaUserId'] = 'PicasaTeam';
$custom_values['e_picasaAlbumName'] = 'VegasWeekend';
$attachments = get_attachments_picasa($custom_values['e_picasaUserId'], $custom_values['e_picasaAlbumName']);
foreach ($attachments as $attachment) {
$media = $attachment->children('http://search.yahoo.com/mrss/');
$media_group = $media->group;
$image_url = $media_group->content->attributes()->{'url'};
$thumb_url = $media_group->thumbnail[1]->attributes()->{'url'};
$image_element = $dom_doc->createElement('image');
$image_element->setAttribute('imageURL', $image_url);
$image_element->setAttribute('thumbURL', $thumb_url);
$image_element->setAttribute('linkURL', $image_url);
$image_element->setAttribute('linkTarget', '_blank');
$title_element = $dom_doc->createElement('title');
$image_title = $attachment->title;
$image_title = line_break($image_title);
$image_title = strip_control_characters($image_title);
$title_text = $dom_doc->createCDATASection($image_title);
$title_element->appendChild($title_text);
$image_element->appendChild($title_element);
$caption_element = $dom_doc->createElement('caption');
$image_caption = $attachment->summary;
$image_caption = line_break($image_caption);
$image_caption = strip_control_characters($image_caption);
$caption_text = $dom_doc->createCDATASection($image_caption);
$caption_element->appendChild($caption_text);
$image_element->appendChild($caption_element);
$settings_tag->appendChild($image_element);
}
$dom_doc->appendChild($settings_tag);
echo $dom_doc->saveXML();
?>
I hope this helps.
I'm glad you're getting on well with Juicebox-Pro!
The Splash Page's "View Gallery" text can be changed via Juicebox-Pro's splashButtonText configuration option (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
The "Images" text (in "X Images") can be changed via the languageList configuration option.
More information on languageList can be found here.
languageList is not featured in the JuiceboxBuilder-Pro interface but you can set the option manually in the gallery's XML file or JavaScript embedding code by following the instructions here.
Change the 6th entry in the list ("Images"):
languageList=""Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Images|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of""
If you wanted to, you could switch off the "X Images" text by setting showSplashImageCount="FALSE".
I'm glad you've got it working. Thank you for letting me know.
I'm glad you've been able to use the languageList configuration option to solve your problem.
Thank you for posting back to let me know.
Unfortunately, there is no configuration option that you can use to change the initial fade in of the gallery.
You could perhaps initially hide the 'juicebox-container' <div> using CSS and then show the gallery when Juicebox has completed initialization (when the Juicebox-Pro API onInitComplete event is fired).
Try something like the following. Create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
#juicebox-container {
display: none;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container'
});
jb.onInitComplete = function() {
$('#juicebox-container').show();
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>
I'm glad you've found the solution to your problem. Thank you for posting back to let me know.
For other Juicebox-Lite users who might be reading this, showOpenButton can be found in JuiceboxBuilder-Lite's 'Customize' section.
You can open and edit a gallery with JuiceboxBuilder-Lite (without having to rebuild the gallery from scratch) but if you want to set a configuration option manually, you can add it to the gallery's XML file or JavaScript embedding code by following the instructions here.
You can use the languageList configuration option to change the thumbnail paging text from of to /.
More information on languageList can be found here.
languageList is not featured in the JuiceboxBuilder-Pro interface but you can set the option manually in the gallery's XML file or JavaScript embedding code by following the instructions here.
Use the following:
languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Images|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|/"
Set enableLooping="TRUE" in JuiceboxBuilder-Pro's 'Customize -> General' section.
(This configuration option is in the General section as it applies to manual navigation as well as AutoPlay functionality.)
For reference, a list of all General Options can be found here.
You're welcome!
I'm glad you've got it working. Thank you for posting back to let me know.
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.
You're welcome!
You're welcome!
I'm glad you've found a suitable way to integrate the languageList into your workflow.
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.)
Rather than copy and paste the SEO content code generated by JuiceboxBuilder-Pro into your web page, you could do something like the following.
(1) Add the following code to your web page (inside the <div id="juicebox-container"></div> where you would ordinarily paste the SEO content code):
<?php include("juicebox-seo.php"); ?>
(2) Create a new file named 'juicebox-seo.php' which loads the gallery's 'config.xml' file, parses the file, dynamically generates the SEO content code from the XML file's content and outputs it to the web page.
This method was first used for SimpleViewer (which does not generate SEO content code) by Mikael Kjellstrom on this web page.
I modified his code for use in Juicebox (before JuiceboxBuilder-Pro featured SEO support). Here it is:
<?php
######################################################
# Project: SimpleViewer SEO Gallery Plugin #
# Version: 2.02 #
# Author: Mikael Kjellstrom #
# License: Copyright (c) 2010 Mikael Kjellstrom #
######################################################
######################################################
# Adapted for Juicebox by Steven Speirs, 2013 #
######################################################
$imgpath = 'http://www.yourdomain.com/pathtogallery/'; // The path to the gallery
$altmaxchars = "50"; // The maximum characters of the TITLE and ALT tags taken from the title and caption
$doc = new DOMDocument();
$doc->load( 'config.xml' );
$gallery = $doc->getElementsByTagName( "juiceboxgallery" );
foreach( $gallery as $gallery ) {
$gallerytitle = $gallery->getAttribute('galleryTitle');
}
print "<div id=\"jbseo\">";
print "<h1>$gallerytitle</h1>";
$images = $doc->getElementsByTagName( "image" );
print "<ul>";
foreach( $images as $image ) {
$largephoto = $image->getAttribute('imageURL');
$photo = $image->getAttribute('thumbURL');
$titles = $image->getElementsByTagName( "title" );
$title = $titles->item(0)->nodeValue;
$alttitle = substr($title, 0, $altmaxchars);
$pos = strrpos($alttitle, " ");
if ($pos>0) {
$alttitle = substr($alttitle, 0, $pos);
}
$title = htmlspecialchars($title);
$alttitle = htmlspecialchars($alttitle);
$captions = $image->getElementsByTagName( "caption" );
$caption = $captions->item(0)->nodeValue;
$altcaption = substr($caption, 0, $altmaxchars);
$pos = strrpos($altcaption, " ");
if ($pos>0) {
$altcaption = substr($altcaption, 0, $pos);
}
$caption = htmlspecialchars($caption);
$altcaption = htmlspecialchars($altcaption);
print "<li style=\"list-style-type: none;\"><p><a href=\"$imgpath$largephoto\" target=\"_blank\"><img src=\"$imgpath$photo\" alt=\"$altcaption\" title=\"$alttitle\"/></a><br />$title<br />$caption</p></li>";
}
print "</ul>";
print "<p style=\"font-size: 10px;\">© 2010 · <a href=\"http://www.mkwebdesign.ca/tutorials/making-simpleviewer-seo-friendly/\" target=\"_blank\">Powered by SimpleViewer SEO Gallery Plugin</a></p>";
print "</div>";
?>
You could modify this PHP script so that it can be used for different galleries by passing the path to each gallery as a query string. For example, for one gallery you could use something like the following (you may need to encode the 'path' variable):
<?php include("juicebox-seo.php?path=http://www.example.com/gallery1/"); ?>
... and then in the script, change:
$imgpath = 'http://www.yourdomain.com/pathtogallery/'; // The path to the gallery
... to:
$imgpath = $_GET['path'];
I hope this points you in the right direction.
Sorry. I missed a $. I've corrected my post above. Try:
jQuery(document).ready(function() {
thumbsStatus();
jQuery(window).resize(thumbsStatus);
loadGallery(a, b, c);
});
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.
Unfortunately, neither JuiceboxBuilder-Pro nor the Lightroom plugin feature support for the languageList configuration option in their interfaces.
(It is possible to include a custom languageList in WP-Juicebox as the gallery settings window has a Pro Options text area where you can manually enter any configuration option.)
However, after creating a gallery with the Lightroom plugin, you can open the gallery's 'config.xml' file in a plain text editor and add the languageList option as an attribute to the opening <juiceboxgallery> tag.
Alternatively, if you want your custom languageList to appear in all galleries created by the Lightroom plugin, you can modify the template file that Lightroom uses to generate the 'config.xml' files.
Open the 'juicebox_pro.lrwebengine/config.xml' file in a plain text editor and add your custom languageList on line 34 (after the opening "<juiceboxgallery") which is currently blank. The line number refers to the current version of the Lightroom plugin (v1.4.4.2).
For reference, more information about the languageList option can be found here.
Instructions for how to manually set configuration options can be found here.
@tejas.rana
Please see my reply to your query in this forum thread.
I apply height in percentage.
Please see this note regarding Using Percentage Heights.
but now it look stretch
If you use imageScaleMode="FILL", then images will be cropped to fill the gallery's image area.
If you want your images to be scaled within the gallery's image area without cropping and respecting their aspect ratios, then set imageScaleMode="SCALE_DOWN" (or SCALE if you want smaller images to be scaled up).
With imageScaleMode set to FILL, SCALE_DOWN or SCALE, images should not be stretched. If they are, then please check to see if you have any custom CSS rules on your web page which the gallery is inheriting and which are affecting the display of your gallery images.
there is huge gap show between slider and thumb images
Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
also in MAC's Safari the caption is not working properly
Please explain what you mean by "not working properly". (For example, are the image captions invisible in Safari but visible in all other browsers or is the problem something else, such as caption placement?)
I hope the notes above will help but as you seen to be having so many different issues, it sounds like you might have some custom CSS rules on your web page that are affecting your gallery in many different ways.
Try viewing your gallery on a page of its own (using the 'index.html' page generated by JuiceboxBuilder-Pro) to see if the problems occur only when you embed the gallery in your own web page.
Also, it would be much easier to troubleshoot your problems if I were able to see your gallery for myself so please post the URL to your gallery so that I can investigate further. Thank you.
I was aware that Lightroom web engines folders (such as 'juicebox.lrwebengine') are regular folders on a PC but are seen as special packages on a Mac. I had a hunch that .app folders might be treated similarly and Googled to confirm it.
If you hadn't mentioned "There is a file /Applications/JuiceboxBuilder-Pro.app", I wouldn't have thought of it.
It always helps to have as much information as possible (even stuff that you think might not be relevant) so thank you for being so comprehensive with your problem descriptions!
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.