1 Topic by samantha.myers

(1 replies, posted in Juicebox-Pro Support)

I would like to show thumb paging text in my gallery, but when I select the option to showPagingText (set to true), it shows (as example) 1-4 indicating the number of thumb pages. I want to show the number of thumbnail images, ex: 1-57. Is this possible with a default setting?

Go to forum: Juicebox-Pro Support

2 Reply by samantha.myers

(3 replies, posted in Juicebox-Pro Support)

Is it possible to have Juiceboxsave this setting? Every time I reopen Juicebox Pro on my desktop that preset has been lost and I have to select it again. Thanks!

Go to forum: Juicebox-Pro Support

3 Topic by samantha.myers

(3 replies, posted in Juicebox-Pro Support)

Our photographers save metadata on their images and put the image caption into the "title" and "subject" metadata fields. Is it possible for Juicebox to read the title metadata field of the image and show that as the caption of the image in the html gallery view?

Go to forum: Juicebox-Pro Support

4 Topic by samantha.myers

(1 replies, posted in Juicebox-Pro Support)

I have a juicebox gallery embedded in my webpage and then lower on the page a list of other slideshows that a user can select from. When the user selects another gallery, it's a link navigation to my webpage with a new slideshow id. The config.xml loads with proper information, however the gallery images will not refresh unless I refresh the entire page. So essentially if I try to open a new slideshow in the same browser (even a diff tab) it holds onto the previous images unless I refresh. If I open it in a new window this is not an issue. I need to open it in the same window. Do you have a fix for this?

Go to forum: Juicebox-Pro Support

5 Reply by samantha.myers

(4 replies, posted in Juicebox-Pro Support)

I figured this out. By simply changing the class .jb-cap-frame to include: left: 0px; this caused the problem. I will overwrite that css in a different way.

.jb-cap-frame {
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
}

**this is what causes the previous and next caption to stay visible and overwrite the previous one.

.jb-cap-frame {
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
        top: 0px;
}

Go to forum: Juicebox-Pro Support

6 Reply by samantha.myers

(4 replies, posted in Juicebox-Pro Support)

I am running v1.4.4.1 (latest). I am unable to provide you a link to my dev site at the time, but here is my config.xml and my theme.css. These are the only things that would be "custom". Thanks!

<?xml version="1.0" encoding="UTF-8"?>

<juiceboxgallery 

    resizeOnImport="false"
    fotomotoStoreId="My Store ID"
    captionBackColor="rgba(51,51,51,0.5)"
    captionPosition="BELOW_IMAGE"
    showExpandButton="false"
    showOpenButton="false"
    maxThumbColumns="3"
    textColor="rgba(255,255,255,1)"
    textShadowColor="rgba(0,0,0,0)"
    backgroundColor="rgba(51,51,51,1)"
    imageShadowColor="rgba(0,0,0,0)"
    imageShadowBlur="20"
    imagePadding="10"
    maxCaptionHeight="100"
    imageTransitionType="SLIDE"
    galleryFontFace="Georgia,serif"
    imageVAlign="TOP"
    imageHAlign="CENTER"
    thumbsPosition="RIGHT"
    maxThumbRows="4"
    galleryTitlePosition="TOP"
    buttonBarPosition="NONE"
    buttonBarBackColor="rgba(238,238,238,0.5)"
    buttonBarIconColor="rgba(0,0,0,1)"
    buttonBarIconHoverColor="rgba(51,51,51,1)"
    thumbsVAlign="TOP"
    galleryWidth="1024"
    showThumbsButton="false"
    showAutoPlayButton="true"
    showNavButtons="true"
    showImageNav="HOVER"
    thumbShadowColor="rgba(0,0,0,0)"
    navButtonIconColor="rgba(255,255,255,1)"
    navButtonBackColor="rgba(51,51,51,0)"
    showAutoPlayStatus="false"
    goNextOnAutoPlay="true"
    enableLooping="true"
    enableDirectLinks="true"
    displayTime="3"
    navButtonIconHoverColor="rgba(153,153,153,1)"
    topAreaHeight="10"
    imageNavPadding="10"
    showSmallPagingText="false"
    thumbsHAlign="CENTER"
    thumbSelectedFrameWidth="2"
    showSmallThumbsButton="true"
    indexPageName="hawkeyes.html"
    imageScaleMode="SCALE"
    showImageNumber="false"
    captionHAlign="LEFT"
    thumbNavPosition="BOTTOM"
    buttonBarHAlign="RIGHT"
    showInfoButton="false"
    useFullscreenExpand="false"
    thumbWidth="90"
    thumbHeight="90"

>
  <image imageURL="/images/juicebox/images/main-image.jpg"
    thumbURL="/images/juicebox/thumbs/main-image.jpg"
    linkURL="/images/juicebox/images/main-image.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/main-image.jpg">
    <title><![CDATA[main-image]]></title>
    <caption><![CDATA[Hawkeyes take the field on the first game of the season]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-1.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-1.jpg"
    linkURL="/images/juicebox/images/hawkeyes-1.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-1.jpg">
    <title><![CDATA[hawkeyes-1]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-2.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-2.jpg"
    linkURL="/images/juicebox/images/hawkeyes-2.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-2.jpg">
    <title><![CDATA[hawkeyes-2]]></title>
    <caption><![CDATA[Herky gets the fans excited as the hawks begin their 2016 season. ]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-3.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-3.jpg"
    linkURL="/images/juicebox/images/hawkeyes-3.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-3.jpg">
    <title><![CDATA[hawkeyes-3]]></title>
    <caption><![CDATA[Iowa Hawkeyes offensive line prepares to take the field as they look out into the stands at Kinnick Stadium in Iowa City]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-4.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-4.jpg"
    linkURL="/images/juicebox/images/hawkeyes-4.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-4.jpg">
    <title><![CDATA[hawkeyes-4]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-5.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-5.jpg"
    linkURL="/images/juicebox/images/hawkeyes-5.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-5.jpg">
    <title><![CDATA[hawkeyes-5]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-6.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-6.jpg"
    linkURL="/images/juicebox/images/hawkeyes-6.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-6.jpg">
    <title><![CDATA[hawkeyes-6]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-7.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-7.jpg"
    linkURL="/images/juicebox/images/hawkeyes-7.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-7.jpg">
    <title><![CDATA[hawkeyes-7]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-8.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-8.jpg"
    linkURL="/images/juicebox/images/hawkeyes-8.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-8.jpg">
    <title><![CDATA[hawkeyes-8]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-9.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-9.jpg"
    linkURL="/images/juicebox/images/hawkeyes-9.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-9.jpg">
    <title><![CDATA[hawkeyes-9]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-10.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-10.jpg"
    linkURL="/images/juicebox/images/hawkeyes-10.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-10.jpg">
    <title><![CDATA[hawkeyes-10]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-11.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-11.jpg"
    linkURL="/images/juicebox/images/hawkeyes-11.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-11.jpg">
    <title><![CDATA[hawkeyes-11]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-12.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-12.jpg"
    linkURL="/images/juicebox/images/hawkeyes-12.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-12.jpg">
    <title><![CDATA[hawkeyes-12]]></title>
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="/images/juicebox/images/hawkeyes-13.jpg"
    thumbURL="/images/juicebox/thumbs/hawkeyes-13.jpg"
    linkURL="/images/juicebox/images/hawkeyes-13.jpg"
    linkTarget="_blank"
    sourcePath="/images/juicebox/images/hawkeyes-13.jpg">
    <title><![CDATA[hawkeyes-13]]></title>
    <caption><![CDATA[]]></caption>
  </image>
</juiceboxgallery>

Here is my theme.css

/**
 * Juicebox 1.4.4 Classic Theme
 *
 * Copyright (c) 2015 Juicebox Inc. All rights reserved.
 * [url]http://www.juicebox.net[/url]
 *
 * BY USING THIS SOFTWARE, YOU AGREE TO THE JUICEBOX TERMS OF USE
 * [url]http://www.juicebox.net/terms[/url]
 *
 * Support and Documentation: [url]http://www.juicebox.net/support[/url]
 *
 * Build Time: 06/16/2015 09:32:19 PM
 */

.juicebox-gallery
{
    outline: none;
}

.juicebox-gallery h1, .juicebox-gallery h2, .juicebox-gallery h3, .juicebox-gallery h4,
.juicebox-gallery div, .juicebox-gallery span{
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: none 0;
    vertical-align: middle;    /*don't make this "!important", or the next "vertical-align: bottom;" will be broken. */
    line-height: 1.1;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    font-family: 'juicebox';
}

.juicebox-gallery a, .juicebox-gallery u {
    margin: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.juicebox-gallery .jb-idx-thb-list-page-number,
.juicebox-gallery .jb-area-large-mode-title,
.juicebox-gallery .jb-idx-title,
.juicebox-gallery .jb-idx-title textarea,
.juicebox-gallery .jb-area-caption div,
.juicebox-gallery .jb-area-caption p,
.juicebox-gallery .jb-splash h3,
.juicebox-gallery .jb-splash p,
.juicebox-gallery .jb-splash a,
.juicebox-gallery .jb-go-back a,
.juicebox-gallery .jb-idx-thumbnail-show-more a,
.juicebox-gallery .jb-status-message{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.juicebox-gallery table, .juicebox-gallery tr, .juicebox-gallery td, .juicebox-gallery tbody{
    border-spacing: 0;
    padding: 0 !important;
    margin: 0 !important;
    border: none 0 !important;
    background: none repeat scroll 0 0 transparent !important;
    vertical-align: middle;    /*don't make this "!important", or the next "vertical-align: bottom;" will be broken. */
    width: 100%;
    height: 100%;
    line-height: 1;
}

.juicebox-gallery .jb-area-caption table,
.juicebox-gallery .jb-area-caption tr,
.juicebox-gallery .jb-area-caption td,
.juicebox-gallery .jb-area-caption tbody
{
    vertical-align: bottom;
}

.juicebox-gallery .jb-panel-detail table,
.juicebox-gallery .jb-panel-detail tr,
.juicebox-gallery .jb-panel-detail td,
.juicebox-gallery .jb-panel-detail tbody
{
    vertical-align: middle;
}

.juicebox-gallery li {
    list-style: none
}

.juicebox-gallery p {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
}

.juicebox-gallery img
{
    max-width: none;
    margin: 0;
    padding: 0;
    border:none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.juicebox-gallery textarea {
    box-shadow: none;
    transition: none;
}

/*#162 otherwise there will be a white border around it in IE9*/
.jb-go-back img
{
    border:none;
}

/* gallery top panel */
div.jb-panel-top
{
    background: transparent;
}
.jb-flag-msie-bf9 .jb-panel-top
{
    background-color:Black;
}
.jb-go-back-icon-frame a
{
    outline: none;
}
/* gallery index panel */
.jb-panel-index
{
    height:75%;    /* for gallery preloader */
    width:100%;
}

.juicebox-gallery .jb-idx-thb-container {
    margin-left: auto;
    margin-right: auto;
    vertical-align: bottom;
    position: absolute
}
.jb-flag-large-screen-mode .jb-idx-thb-container {
    height: auto;
}

table .jb-idx-thb-list
{
    vertical-align: middle;
}

div.jb-idx-thb-list {
    margin: 5px;
    background-color: Transparent;
}

.jb-idx-thb-list .jb-idx-thumb {
    float: left;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
}

div.jb-idx-thb-list .jb-thm-thumb-dot {
    background-color: transparent;
}

.jb-idx-thb-list .jb-idx-thumb img {
    border: 0px solid transparent;
    cursor: pointer;
    max-width: none;
}
.jb-idx-thb-list .jb-idx-thumb img:active {
    -webkit-transform: translate(2px,2px);
    -moz-transform: translate(2px,2px);
    -o-transform: translate(2px,2px);
}
.jb-idx-thumb {
    background: transparent;
}
.jb-idx-thb-frame {
    border: 0px solid transparent;
    cursor: pointer;
}
.jb-idx-thb-frame:hover {
    border-color: rgb(255, 255, 255);
    border-color: rgba(255, 255, 255, .5);
    border-style: solid;
}
.jb-flag-large-screen-mode .jb-thm-thumb-selected .jb-idx-thb-frame {
    border-color: rgb(255, 255, 255);
    border-color: rgba(255, 255, 255, .5);
    border-style: solid;
}
.jb-flag-msie .jb-idx-thb-frame {    /* the frame around thumbnail won't work correctly on IE without this */
    background: url('img/assets.png') no-repeat -454px -61px;
}
div.jb-idx-thb-list-page-number {
    font-size: 13px;
}

/* gallery detail panel */
div.jb-panel-detail {
    overflow: hidden;
    background-color: #6D6E70;
    max-height: 440px!important;
}
div.jb-dt-main-frame {
    position: absolute;
    vertical-align: middle;
    float: left;
    text-align: center;
    overflow: hidden;
    
}
.jb-dt-main-frame .jb-dt-main-image {
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);
    border-color: White;
    top: 0px!important;
}
.jb-dt-main-frame img
{
    max-width: none;
}
.jb-dt-main-frame .jb-dt-main-image,
.jb-dt-main-frame .jb-dt-main-image img{
    height: 100%!important;
}
.jb-flag-msie .jb-panel-detail {
    position: relative;
}
.jb-watermark, .jb-watermark a, .jb-watermark img, .jb-watermark a:visited, .jb-watermark a:active, .jb-watermark a:link, .jb-watermark a:hover
{
    border:none 0 transparent;
    outline: none;
}

/* gallery caption area */
div.jb-area-caption
{
    vertical-align: bottom;
    z-index: 0!important;
}

.jb-cap-frame {
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    width: 100%!important;
    left: 0!important;
}
.jb-cap-frame tr {
    vertical-align: bottom;
}
.jb-flag-size-fixed .jb-cap-frame tr {
    vertical-align: top;
}
.jb-cap-frame .jb-caption {
    background-color: none;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    padding: 12px 18px;
    padding-left: 0px!important;
}
.jb-cap-frame .jbac-number {
    float: right;
    color: #fff;
    width: 72px;
    text-align: right;
    font-size: 13px;
    cursor:default;
    margin-top: 6px;
}
.jb-caption .jb-caption-title {
    font-size: 17px;
    cursor:default;
    display: none;
}

.jb-caption p
{
    margin-bottom: 0 !important;
    margin-right: 72px;    /* equal to "width" in .jb-cap-frame .jbac-number; margin-top is set in code in order to hide the top margin when there is no desc */
    margin-left: 0;
    font-size: 13px;
    line-height: 23px;
    cursor:default;
}
.jb-caption a {
    color: white;
}
.jb-flag-msie-bf9 .jb-cap-frame .jb-caption {
    background-color:Black;
}
p.jb-cap-content {
    margin: 0 !important;
    padding: 0 !important;
}
.jb-flag-size-fixed .jb-caption
{
    height:100%;
}

/* gallery title area */
.jb-idx-ssm-title-wrapper {
    font-family:inherit;
    font-size:16px;
    color:inherit;
}

.jb-flag-large-screen-mode .jb-area-large-mode-title {
    position: absolute;
    top: 10px;
    padding: 5px 10px 5px 10px;
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4), 0 0 5px rgba(0,0,0,0.2);
    font-size: 18px;
    outline: none;
    border: none;
    cursor:default;
}

.jb-flag-large-screen-mode .jb-idx-thumbnail-container .jb-area-large-mode-title {
    padding: 0;
}

.jb-flag-large-screen-mode .jb-area-large-mode-title a, .jb-flag-large-screen-mode .jb-area-large-mode-title img
{
    outline: none;
    border: none;
}

/* gallery button bar */
.jb-classifier-link-wrapper {
    display: none;
    position: absolute;
    top: 7px;
}

div.jb-bb-bar {
    float: left;
    background-color: rgba(0, 0, 0, .4);
    padding: 0 4px 0 4px;
    margin: 0 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.jb-classifier-thumb-area div.jb-bb-bar {
    margin: 0 0 0 2px;
}

/*BUTTONS*/
div.jb-bb-button {
    float: left;
/*    background: url(img/assets.png) no-repeat;    */
    cursor: pointer;
    text-align: center;
    margin: 0;
    border-top-style: solid;
    border-top-width: 10px;
    border-top-color: transparent;
    padding: 0px;
    font-size: 20px;
    height: 30px;
    width: 38px;
}

.jb-flag-msiever8 div.jb-bb-button {
    border-top-style: solid;
    border-top-width: 5px;
    border-top-color: transparent;
}

.jb-flag-msie-bf9 .jb-bb-button {
    margin: 0 0 0 0;
}

.jb-flag-msie-bf9 .jb-bb-bar {
    float: right;
    padding: 0 0 0 0;
    height: 38px;
    background-color:Black;
}

/* gallery button bar on index page*/

div.jb-classifier-link-wrapper.jb-classifier-thumb-area {
    width: 50px
}

div.jb-bb-splitter
{
    border-color: White;
    display: block;
    height: 20px;
    border-style: none solid none none;
    border-width: 1px;
    float: left;
    margin: 10px 0 0 3px;
}

/* gallery navigation */
.jb-navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0!important;
}

.jb-navigation .jbn-nav-touch-area, .jb-navigation .jbn-nav-button{
    font-family: 'juicebox';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-size:20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.jb-navigation .jbn-nav-button
{
    width: 28px;
    height: 28px;
    padding:0;
    display: none!important;
}
.jb-navigation .jbn-nav-button-icon
{
    padding: 4px 2px 0 2px;
    text-align: center;
    line-height: 1;
}

.jb-flag-msie .jb-navigation .jbn-nav-button-icon
{
    padding: 5px 2px 0 2px;
}
.jb-flag-msie .jb-navigation .jbn-left-button,
    .jb-flag-msie .jb-navigation .jbn-right-button,
    .jb-flag-msie div.index-navigation.jb-navigation .jbn-nav-button-icon
{
    height: 23px;
}
div.jb-flag-msiever8 .jb-navigation .jbn-nav-button-icon
{
    padding: 0px 2px 4px 2px;
}
div.index-navigation.jb-navigation .jbn-nav-button-icon
{
    width: 24px;
    height: 24px;
}
.jb-navigation .jbn-left-button {
    display: none;
    width: 24px;
    height: 24px;
    position: absolute;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    background-color: rgba(0,0,0,0.4);
}

.jb-flag-msie-bf9 .jb-navigation .jbn-left-button
{
    background-color:Black;
}

.jb-navigation .jbn-right-button {
    display: none;
    width: 24px;
    height: 24px;
    position: absolute;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    background-color: rgba(0,0,0,0.4);
}

.jb-flag-msie-bf9 .jb-navigation .jbn-right-button
{
    background-color:Black;
}

.jb-navigation .jbn-nav-left-button {
    color: blue;
    width: 50%
}
.jb-navigation .jbn-nav-right-button {
    color: blue;
    width: 50%;
}
.jb-navigation .jbn-left-button, .jb-navigation .jbn-right-button {
    cursor: pointer;
}

/* gallery navigation for index */

.jb-thm-thumb-dot .jb-thm-thumb-image {
    margin: 0;
    padding: 0;
    display: block;
    cursor: pointer;
}
.jb-idx-thb-list div.jb-thm-thumb-dot {
    margin: 0;
    padding: 0;
}

/* gallery navigation for detail */
.jb-navigation .jbn-nav-touch-area {
    display: inline-block;
    height: 100%;
    width: 50%;
    position: relative;
    cursor: pointer;
}

.jb-flag-touchable .jb-navigation .jbn-nav-touch-area {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor:not-allowed;
}

.jb-flag-msiever7 .jb-navigation .jbn-nav-touch-area
{
    width: 49.99%;
}

.jb-navigation .dt-nav-disabled {
    cursor: default !important;
}
.jb-flag-msie .jbn-nav-touch-area {    /* this will make the jbn-nav-touch-area clickable on IE */
    background: url('img/assets.png') no-repeat -454px -61px;
}
.jb-flag-msie .jb-navigation .jbn-nav-touch-area {
    display: block;
    float: left;
}

/* gallery go back button */
div.jb-go-back
{
    padding: 5px 10px;
    margin: 0;
}

div.jb-go-back-icon-frame
{
    background-color: rgba(0, 0, 0, .4);
    padding: 0 4px;    /*match div.jb-bb-bar to make them vertically align*/
}

a.jb-go-back-icon
{
    cursor: pointer;
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    height: 28px;
    width: 38px;
    display: block;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border-top-style: solid;
    border-top-width: 10px;
    border-top-color: transparent;
}

.jb-flag-msiever8 a.jb-go-back-icon {
    border-top-style: solid;
    border-top-width: 8px;
    border-top-color: transparent;
}

.jb-flag-msie-bf9 a.jb-go-back-icon
{
    background-color:Black;
}

.jb-go-back a {
    text-decoration: none;
}

/* gallery splash page */
.jb-splash-info
{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    height: auto;
    width:100%;
}
.jb-splash-info p {
    color: white;
    font-size: 17px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    line-height: 25px;
    width:auto;
}
/* Splash page description*/
p.jb-splash-desc
{
    width:auto;
    padding: 0 20px 20px 20px;
}
/* Splash page photo count*/
p.jb-splash-cnt
{
    padding: 0 20px 20px 20px;
    font-weight: normal;
}
/* Splash page title, add important in order to avoid collisions with Word Press*/
.jb-splash-info h3 {
    color: white !important;
    padding: 20px !important;
    margin: 0 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
    font-size: 26px !important;
    font-weight: normal !important;
    letter-spacing: 1px !important;
}
/* Splash 'View Gallery' Text*/
a.jb-splash-view-glry {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
    display: block;
    width: auto;
    margin: 0;
    padding: 0 20px 20px 20px;
}
div.jb-splash
{
    height: 100%;
    width: 100%;
    position:relative;
    margin:0;
    padding:0;
    cursor: pointer;
}

.jb-idx-thumbnail-container .jb-splash-holder img
{
    max-width: none;
    max-height: none;
}
.jb-splash-holder
{
    position:relative;
}
.jb-splash-background
{
    background-color: rgba(0, 0, 0, 0.35);
}

/* gallery messages */
.jb-error-message {
    color: White;
    padding: 8px 10px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3), 0 0 5px rgba(0,0,0,0.2);
    text-align:center;
}

.jb-error-message a{
    color: White;
}

/* Autoplay message */
.juicebox-gallery  .jb-status-message{
    color: White;
    padding: 8px 10px 12px 8px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3), 0 0 5px rgba(0,0,0,0.2);
    font-weight: normal;
    text-align:center;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;
}

/* gallery flag */
.jb-flag-size-fixed
{
    overflow:hidden;
}

/* gallery status */
.jb-status-thumb-loading
{
    background-color:rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    margin: 0;
}
.jb-flag-msie-bf9 .jb-status-thumb-loading
{
    background-color:Black;
}
div.jb-status-loading {
    background: url('/images/juicebox/spinner.gif') no-repeat center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center
}
.jb-badge
{
    background: url('img/jb001.png') no-repeat center;
}


/****** font icon stuff ******/
@font-face {
    font-family: 'juicebox';
    src:url('/css/font/juicebox/juicebox.eot');
    src:url('/css/font/juicebox/juicebox.eot?#iefix') format('embedded-opentype'),
        url('/css/font/juicebox/juicebox.woff') format('woff'),
        url('/css/font/juicebox/juicebox.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */

div.jb-bb-button:before, .jb-thm-thumb-dot, a.jb-go-back-icon
{
    font-family: 'juicebox' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.jb-thm-thumb-dot, a.jb-go-back-icon
{
    font-size: 20px;
}

/* Icon Font Ids */
.jb-navigation .jbn-left-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-left-button:before
{
    content: "\e000";
}
.jb-navigation .jbn-right-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-right-button:before
{
    content: "\e001";
}
.jb-flag-large-screen-mode .jb-bb-button.jb-bb-btn-de-show-list:before
{
    content: "\e002";
}
.jb-bb-button.jb-bb-btn-de-show-list:before
{
    content: "\e003";
}
.jb-bb-button.jb-bb-btn-open-url:before
{
    content: "\e004";
}
.jb-bb-button.jb-bb-btn-full-screen:before
{
    content: "\e005";
}
.jb-bb-button.jb-bb-btn-full-screen.jb-bb-btn-de-full-screen:before
{
    content: "\e006";
}
.jb-bb-button.jb-bb-btn-top-nav.jb-bb-btn-top-nav-left:before
{
    content: "\e007";
}
.jb-bb-button.jb-bb-btn-top-nav.jb-bb-btn-top-nav-right:before
{
    content: "\e008";
}
.jb-bb-button.jb-bb-btn-auto-play:before
{
    content: "\e009";
}
.jb-bb-button.jb-bb-btn-auto-play.jb-status-playing:before
{
    content: "\e00a";
}
.jb-bb-button.jb-bb-btn-show-info:before
{
    content: "\e00b";
}
.jb-bb-button.jb-bb-btn-audio:before {
    content: "\e00c";
}
.jb-bb-button.jb-bb-btn-audio.jb-status-playing:before
{
    content: "\e00d";
}
.jb-bb-button.jb-bb-btn-fotomoto:before
{
    content: "\e00e";
}
.jb-bb-button.jb-bb-btn-facebook:before
{
    content: "\e00f";
}
.jb-bb-button.jb-bb-btn-twitter:before
{
    content: "\e010";
}
.jb-bb-button.jb-bb-btn-gplus:before
{
    content: "\e011";
}
.jb-bb-button.jb-bb-btn-printerest:before
{
    content: "\e012";
}
.jb-bb-button.jb-bb-btn-tumblr:before
{
    content: "\e013";
}
a.jb-go-back-icon:before
{
    content: "\e014";
}

.jb-thm-thumb-dot .jb-thm-thumb-image:before
{
    content: "\e015";
}

/* IE8 need something differently */
.jb-flag-msiever8 .jb-navigation .jbn-left-button:before, .jb-flag-msiever8 .jb-flag-large-screen-mode .jb-navigation .jbn-left-button:before
{
    content: "";
}
.jb-flag-msiever8 .jb-navigation .jbn-right-button:before, .jb-flag-msiever8 .jb-flag-large-screen-mode .jb-navigation .jbn-right-button:before
{
    content: "";
}
.jb-flag-msiever8 .jb-flag-large-screen-mode .jb-bb-button.jb-bb-btn-de-show-list:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-de-show-list:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-open-url:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-full-screen:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-full-screen.jb-bb-btn-de-full-screen:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-top-nav.jb-bb-btn-top-nav-left:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-top-nav.jb-bb-btn-top-nav-right:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-auto-play:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-auto-play.jb-status-playing:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-show-info:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-audio:before {
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-audio.jb-status-playing:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-fotomoto:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-facebook:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-twitter:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-gplus:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-printerest:before
{
    content: "";
}
.jb-flag-msiever8 .jb-bb-button.jb-bb-btn-tumblr:before
{
    content: "";
}
.jb-flag-msiever8 a.jb-go-back-icon:before
{
    content: "";
}

.jb-flag-msiever8 .jb-thm-thumb-dot .jb-thm-thumb-image:before {
    content: "";
}

div.jb-idx-thumbnail-show-more {
      padding: 0;
    margin: 0 0 5px 0;
}

.jb-idx-thumbnail-show-more a {
       text-decoration: none;
    display: block;
    text-align: center;
}

#jb-glry-dlg {
    z-index: 9999;
}

@media only screen {
    @-ms-viewport {width: device-width; initial-scale: 1; user-scalable: no;}
}

.juicebox-gallery {
    -ms-touch-action:none;
}
.jcbx-glry-classic {
    background: #333;
    color: white;
    clear: both;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 500px;
    color: #FFF;
    position: relative;
    overflow: hidden;
    display:block !important;
}

.jcbx-glry-classic a{
    color:#FFF;
}
.jcbx-glry-classic:hover .button_bar {
}
.jcbx-glry-classic:hover .navigation {
}
.jcbx-glry-classic .jb-idx-thb-list .jb-idx-thumb img {
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    /* For IE 8
     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000')";
     / For IE 5.5 - 7 /
     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=270, Color='#000000');
     */
}
.jcbx-glry-classic .jb-panel-index{
    top: 0px!important;
    left: 695px;
    height: 75%!important;
}
.jb-idx-thumbnail-container{
    height: 75%!important;
}
.jb-idx-title, .jb-idx-title textarea, .jb-go-back .jb-go-back-text {
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4), 0 0 5px rgba(0,0,0,0.2);
}
.jb-idx-thb-list-page-number {
}

Go to forum: Juicebox-Pro Support

7 Topic by samantha.myers

(4 replies, posted in Juicebox-Pro Support)

I have juicebox embedded on a page and there seems to be a problem with the caption text coming out of the config.xml. The scenario is that I have multiple images, some of which have caption text and some do not. If I use autoplay or click on the thumbs to change the main image, if the first image has a caption and the second image does not, the second image maintains the caption for the first image and then puts the third image caption over top of the first image caption, on the second image being displayed. So essentially the second image, that has no caption, is showing caption text for the image before it and after it, and they are sitting on top of each other. I've not been able to fix this no matter what I do. What can I do to fix this issue. It seems like an issue with juicebox because I've not done anything to manipulate the code for this. I have screen capture of it, but I don't see a way to attach an image in this help forum. Thanks for the help!

Go to forum: Juicebox-Pro Support

8 Reply by samantha.myers

(3 replies, posted in Juicebox-Pro Support)

Applying these settings didn't get me the desired result. Is there an API call that will allow me to get just the thumb images? Essentially from my main photo gallery page I want to click on my custom thumbs image and open a new page that will show the thumbnail images. So I need a way to get the thumb image urls. Is that possible?

Go to forum: Juicebox-Pro Support

9 Topic by samantha.myers

(3 replies, posted in Juicebox-Pro Support)

I have juicebox embedded on my webpage and I'm having an issue with the thumbs on the responsive view. I am allowing the gallery to respond to the screen size, but I have all juicebox icons hidden so I can use my own custom icons. So far I have been able to attach juicebox events to my custom icons - Example : Play button icon, jb.toggleAutoPlay() - However I'm not able to show the thumbs page when I'm clicking on the Thumbs icon. On the demo I saw on your live site the thumbs button opened a responsive view of a page with multiple rows of thumb images depending on screen size. I'm not sure which event I need in order to get that display. I've tried showThumbPage(), but that isn't working. I'm contemplating just building my own custom page to show the thumbs, but I need to know how to get the thumbs. Is there a script call I can use to get the thumbnail images so I can load those on a custom page? Thanks!

here is my config:
    resizeOnImport="false"
    fotomotoStoreId="My Store ID"
    captionBackColor="rgba(51,51,51,0.5)"
    captionPosition="BELOW_IMAGE"
    showExpandButton="false"
    showOpenButton="false"
    maxThumbColumns="3"
    textColor="rgba(255,255,255,1)"
    textShadowColor="rgba(0,0,0,0)"
    backgroundColor="rgba(51,51,51,1)"
    imageShadowColor="rgba(0,0,0,0)"
    imageShadowBlur="20"
    imagePadding="10"
    maxCaptionHeight="100"
    imageTransitionType="SLIDE"
    galleryFontFace="Georgia,serif"
    imageVAlign="TOP"
    imageHAlign="CENTER"
    thumbsPosition="RIGHT"
    maxThumbRows="4"
    galleryTitlePosition="TOP"
    buttonBarPosition="NONE"
    buttonBarBackColor="rgba(238,238,238,0.5)"
    buttonBarIconColor="rgba(0,0,0,1)"
    buttonBarIconHoverColor="rgba(51,51,51,1)"
    thumbsVAlign="TOP"
    galleryWidth="1024"
    showThumbsButton="false"
    showAutoPlayButton="true"
    showNavButtons="true"
    showImageNav="HOVER"
    thumbShadowColor="rgba(0,0,0,0)"
    navButtonIconColor="rgba(255,255,255,1)"
    navButtonBackColor="rgba(51,51,51,0)"
    showAutoPlayStatus="false"
    goNextOnAutoPlay="true"
    enableLooping="true"
    enableDirectLinks="true"
    displayTime="3"
    navButtonIconHoverColor="rgba(153,153,153,1)"
    topAreaHeight="10"
    imageNavPadding="10"
    showSmallPagingText="false"
    thumbsHAlign="CENTER"
    thumbSelectedFrameWidth="2"
    showSmallThumbsButton="true"
    indexPageName="hawkeyes.html"
    imageScaleMode="SCALE"
    showImageNumber="false"
    captionHAlign="LEFT"
    thumbNavPosition="BOTTOM"
    buttonBarHAlign="RIGHT"
    showInfoButton="false"
    useFullscreenExpand="false"
    thumbWidth="90"
    thumbHeight="90"

Go to forum: Juicebox-Pro Support