Topic: Cart icon not appearing in iPhone [SOLVED]

I am using JuiceBox Pro to create galleries. I manually edit and upload the config.xml file to include purchaseURL links in the <image> tag. This all works fine with desktop browsers showing the cart icon and performing the link. When displayed on an iPhone, the Cart button is missing.

Re: Cart icon not appearing in iPhone [SOLVED]

Unfortunately, the Shopping Cart icon is not currently active in Small Screen Mode (which is used by default when the gallery is displayed on a mobile device).
Initially, the Shopping Cart icon was displayed only in conjunction with Fotomoto (before custom purchaseURLs were introduced) and the Shopping Cart button was disabled in Small Screen Mode as the Fotomoto popup interface does not fit on small screens. (This is noted in the 'Additional notes' of the Shopping Cart support section.)

This has been logged as a bug (the Shopping Cart icon should be disabled in Small Screen Mode only when Fotomoto is used and not when custom purchaseURLs are set) which should hopefully be fixed in a future version.
In the meantime, a possible workaround would be to set screenMode="LARGE" to force the gallery to be displayed in Large Screen Mode on all devices and in all browsers.

Re: Cart icon not appearing in iPhone [SOLVED]

Thank you for your rapid response.

I set the Large Screen Mode but now only thumbnails are displayed. The link to the full image is not working on small screens on mobile only.

http://lynnjaye.com/?q=node/135

enableLooping="true"
    galleryTitleHAlign="CENTER"
    backgroundColor="rgba(249,237,222,1)"
    showOpenButton="true"
    useFullscreenExpand="true"
    showThumbsButton="true"
    imageTransitionType="CROSS_FADE"
    imageScaleMode="SCALE_DOWN"
    captionPosition="OVERLAY_IMAGE"
    enableAutoPlay="true"
    autoPlayOnLoad="true"
    showAutoPlayButton="true"
    buttonBarHAlign="CENTER"
    indexPageName="coastlines.html"
    imageVAlign="TOP"
    thumbsVAlign="TOP"
    thumbsPosition="TOP"
    screenMode="LARGE"
    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|Detailed Information and Pricing|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of"

Re: Cart icon not appearing in iPhone [SOLVED]

Unfortunately, there is currently a known bug whereby the default value of maxThumbRows (1) is not respected on small screen devices when screenMode="LARGE". (Multiple rows of thumbnails are displayed.) This bug has already been addressed and will be fixed in the next version of Juicebox-Pro. In the meantime, try explicitly setting maxThumbRows="1". This should hopefully solve your problem.

Re: Cart icon not appearing in iPhone [SOLVED]

The workaround is good. Much thanks.

Re: Cart icon not appearing in iPhone [SOLVED]

You're welcome!

Re: Cart icon not appearing in iPhone [SOLVED]

The bug noted above whereby the default value of maxThumbRows (1) is not respected on small screen devices when screenMode="LARGE" has now been fixed in Juicebox v1.4.4.
Please see the Upgrading Juicebox support page for instructions on how to download the latest version and upgrade existing galleries.
Please see the Version History for a list of changes between versions.

Re: Cart icon not appearing in iPhone [SOLVED]

Inspired by a thread in this Forum (tips & tricks) to to the integration of videos, i've used the purchaseURL to open video-clips.
I've created my own "video"-Icon and placed it in the fontfiles instead of the cart-icon.
This had the nice effect that the "video" icon could only be seen when a video was linked.
Unfortunately, I've the problem that on mobile devices the cart/video icon does not appear.
In addition to ScreenMode="LARGE", is there another way to make the cart(my video)-icon visible on mobile devices?

Re: Cart icon not appearing in iPhone [SOLVED]

@walter@web.de

Unfortunately, there is no way to show the Shopping Cart icon in Small Screen Mode. (Juicebox disables the Shopping Cart icon in Small Screen Mode as the Fotomoto window does not fit on smal-screen mobile devices.)
The only way to ensure that the Shopping Cart icon is shown is for the gallery to be displayed in Large Screen Mode (by setting screenMode="LARGE").

Maybe you could use a different Button Bar button to achieve the same effect.
If you use linkURLs instead of purchaseURLs, then the Open Image button (showOpenButton="TRUE") will open your linkURLs.
If you are already using the Open Image button (for images), then you could perhaps override a different button which you are not using (such as the Email Button).
This is not officially supported but you might like to try it.
Here's some sample code which will display the Email Button and open the corresponding purchaseURL when clicked. (It uses the Juicebox-Pro API to fetch the current's image's purchaseURL.)

<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: 'rgba(34,34,34,1)'
        showEmailButton: 'TRUE'
    });
    jb.onInitComplete = function() {
        $('.jb-bb-btn-email').empty();
        $('.jb-bb-btn-email').off('click');
        $('.jb-bb-btn-email').click(function() {
            var index = jb.getImageIndex();
            var info = jb.getImageInfo(index);
            var url = info.purchaseURL;
            window.open(url, '_blank');
        });
    };
</script>

You could then change the Email Button's icon to something more appropriate (see the Custom Icons support section for further details) and also change its rollover tooltip text (via the Language List configuration option).

As I noted above, overriding Juicebox's regular functionality is not officially supported and my sample code is not fully tested but it should hopefully work OK.

I hope this helps.