2,276

(3 replies, posted in Juicebox-Pro Support)

Please see this forum post regarding image rotation. It might help to shed some light on the situation.

When images are requested from Flickr, Juicebox just displays them in the gallery (dynamically) via regular HTML <img> tags and the orientation of the image is handled by the browser.

As noted in the forum thread linked to above, the only way to ensure that your images will be displayed as you expect in all browsers and programs would be to strip the EXIF information from the images (by re-saving the images in an imaging program and choosing not to keep the EXIF information) and then rotate your images until they visibly look correct before uploading them to Flickr.

2,277

(1 replies, posted in Juicebox-Pro Support)

Juicebox was not designed with this functionality in mind (the size of the gallery changing depending on the size of each image within the gallery). Ordinarily, a gallery's size will remain constant (unless the gallery is responsive and the size of the user's borwser window changes) and images will be scaled to fit within the gallery's image area.
However, you could perhaps use something like the following. The example gallery below has a fixed width and the height of the gallery changes when a new image is selected, depending on the height of the image (and adding 105 pixels to take into account the thumbnails).
If uses several Juicebox-Pro API functions.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the code below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            #wrap {
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var widthInteger = 600;
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: widthInteger.toString(),
                imageScaleMode: "SCALE"
            });
            jb.onImageChange = function(e) {
                var index = e.id;
                var info = jb.getImageInfo(index);
                var url = info.imageURL;
                var image = new Image();
                image.src = url;
                var height = image.height;
                var width = image.width;
                var newHeight = Math.floor((widthInteger/width)*height) + 105;
                jb.setGallerySize(widthInteger, newHeight);
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

Unfortunately, you are currently loading your gallery into an iframe and it is a little more difficult to have the gallery (on the page being loaded into the iframe) control the iframe's height (on a different page) when a new image is selected.
You would need to give your iframe an 'id', for example:

<iframe id="target" src="http://borrowsynths.com/erika/galleries/landscape/index.html" frameborder="0" scrolling="no" style="position: absolute; top:0; left: 0; width: 100%; height: 100%;"></iframe>

... and then add the following code after the jb.setGallerySize(widthInteger, newHeight); line in the sample above (to change the height of the iframe).

window.parent.document.getElementById('target').style.height = newHeight.toString() + 'px';

I hope this points you in the right direction.

2,278

(17 replies, posted in Juicebox-Pro Support)

This issue (which is unique to the iPad Pro) will be fixed in the next version of Juicebox.

@robertcoldwell
Thank you very much for reporting the problem and for your help in resolving the issue (via email).

2,279

(5 replies, posted in Juicebox-Pro Support)

No problem. Just glad to hear that you've got it sorted. Thank you for letting me know.

2,280

(6 replies, posted in Juicebox-Pro Support)

@fkelly12054

Many thanks for sharing your experiences and web site link.

2,281

(7 replies, posted in Juicebox-Pro Support)

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.

2,282

(5 replies, posted in Juicebox-Pro Support)

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.

2,283

(7 replies, posted in Juicebox-Lite Support)

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.

2,284

(6 replies, posted in Juicebox-Pro Support)

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&amp;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.

2,285

(3 replies, posted in Juicebox-Pro Support)

I'm glad you're getting on well with Juicebox-Pro!

2,286

(3 replies, posted in Juicebox-Pro Support)

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.

2,288

(3 replies, posted in Juicebox-Pro Support)

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.

2,289

(5 replies, posted in Juicebox-Pro Support)

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.

2,291

(3 replies, posted in Juicebox-Pro Support)

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|/"

2,292

(1 replies, posted in Juicebox-Pro Support)

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.

2,293

(5 replies, posted in Juicebox-Pro Support)

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 &#038;&#038; c === 'RIGHT') {

... and your closing CDATA tag // ]]>; is being entered as // ]]&gt;.
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!

2,296

(3 replies, posted in Juicebox-Pro Support)

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.)

2,298

(1 replies, posted in Juicebox-Pro Support)

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;\">&copy; 2010 &middot; <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.