Strange.

I am loading from Flickr. It all works brilliantly. The problem is that the preloader never shows while the Flickr images are being retrieved. I've tested different options to change preloading but none make any difference. There are no errors with file paths. The preloader just doesn't get activated. On most galleries the time to load can be quite long.

My main issue is the "blank" screen during the image loading. Would like to show some feed back indicating it is still working or doing something. I was thinking of using CSS and apply a temporary image until I can get this resolved.

I even set showPreloader to true even though this is the default value. Still, I get the big blank space until the images have loaded from Flickr. I have a very minimalistic setup. I have one jbcore folder and one config.xml using configUrl with common settings. The embed code has unique values like flickr album ID. I also left gallery height and width in the embed code just in case. Those probably could be in the global config.xml but it's working for now so leaving it.

"Global" config.xml

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

<juiceboxgallery 

    useFlickr="true"
    flickrUserName=" "
    flickrTagMode="ANY"
    flickrImageSize="LARGE"
    imagePreloading="NEXT"
    showOverlayOnLoad="false"
    showSmallBackButton="true"
    imageTransitionType="CROSS_FADE"
    backgroundColor="rgba(0,0,0,0)"
    galleryTitlePosition="NONE"
    topAreaHeight="0"
    enableLooping="true"
    showPagingText="true"
    thumbPadding="5"
    showAutoPlayButton="true"
    buttonBarHAlign="CENTER"
    shareFacebook="true"
    shareTwitter="true"
    sharePinterest="true"
    shareTumblr="true"
    enableAutoPlay="true"
    autoPlayOnLoad="true"
    displayTime="6"
    goNextOnAutoPlay="true"
    captionPosition="NONE"
    imageScaleMode="SCALE"
    showOpenButton="false"
    inactivityTimeout="2"
    showPreloader="true"/>

Sample of embed code

<!--START GALLERY EMBED-->
<script src="/gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "gallery-container"
galleryWidth: "100%",
galleryHeight: "80%",
flickrSetId: "xxxxxxxxxxxxxxx", -- this works fine, just don't want to post here yet
galleryTitle: "Band Name Photo Gallery",
configUrl: "/galleries/config.xml",
});
</script>
<div id="gallery-container">
<!--END GALLERY EMBED-->

Woooohooooo! It works!!!
All of the embed options can be used in either the embed code or config.xml. I should have realized this, a bit short sighted of me, but still new with JB pro.

One config.xml file. I don't even need separate gallery folders, just embed code in gallery pages (joomla articles). One folder for jbcore, one config.xml, all the unique data in the embed code. This is awesome. Even with some of the rough edges and features I would like to have, this is better than any of the other Joomla gallery components we looked at to replace Slideshow Pro. I think I might even create a Joomla Juicebox component. It's very straight forward.

Next I am going to use gor555's trick to create embed code using the html template. I am not using the standalone html template, and won't ever use it within our workflow, but I can simply modify it so it produces JUST the embed code for each gallery. I have to modify each chunk of embed code anyway, I can truncate the html so it's only a "code snippet" to be copied and pasted.

Thanks so much for the information. Even if the info isn't what I was hoping to hear, it clears up my confusion so I don't waste time. Obviously having to edit the config.xml "by hand" is not a deal breaker by any means, but if it WAS possible to do more easily with a template or editing the application, I didn't want to be wasting time unnecessarily.

It would be very very VERY VERY incredibly useful to be able to edit the config.xml embed code using a template. I will DEFINITELY post a feature request for this!!!!!

gor555 wrote:

... editing of the template index.html file.... this has worked brilliantly for me...

Thanks for that info! Yes it does work, but only on the index.html. Creating that type of template is useless with my specific situation. This is a Joomla site with dynamically created content so it must be embedded. I could simply copy from the custom HTML generated file but the goal is fast and easy "copy/paste" from the application.

Steven wrote:

However a single global regular expression search and replace action in a text editor such as Notepad++ should remove them quickly

Haha! Regex is my addiction. I love it and can do the most complex and amazing feats of text wrangling to thousands of files in a split second. Trying to explain this magical power causes eyes to droop and glaze over, some simply pass out from sheer boredom. ;)

The Problem is I can't possibly expect an untrained, unpaid intern or a secretary asked to update a gallery at one of our clients locations to know how to "fix" or change the config.xml files or modify the embed code. For many years we have tried different ways to educate and train "technically challenged" individuals, using pdf with screen captures and detailed instructions, screen captured videos, hands on in person step by step in house training, etc etc.

5 minutes later all that knowledge seems to simply vanish or is forgotten. Or possibly they weren't nodding their heads when asked if they understood something, their heads bobbing up and down as they fought off sleepiness from technology overload. :)

(what amazes me is that everyone of these individuals has a Facebook or Twitter account and is capable of remembering how to do complex tasks on those sites).

==========

We have solved 99% of this issue by switching to Flickr. This seems to be the best way to use Juicebox for us in this situation. They have a solid functional feature rich image manager and the Juicebox galleries just magically load in those images without any editing required. Some of these galleries are updated daily.

The only drawback using Flickr is page load time. The regular way of creating galleries with images loaded from the server, page load times are SCREAMING fast. Using Flickr with Juicebox can sometimes have quite a long delay before it loads. I have tried every available option to test speed, PAGE preloading, fewer images "per page", NEXT preloading, "medium" image sizes etc. It seems that the "lag" or "delay" in page load is not related to the image sizes or the preloading at all, it's simply the time it takes to access the Flickr site and retrieve the images, something which Juicebox can't control. We switched over from SSP, I suppose I could use the scripted php solutions on the forum to repurpose SSP with juicebox... but the security risks with unsupported dead end server software is hardly worth it (SSP admin passwords in the database are NOT encrypted/hashed... yikes!).

Using Flickr anyone with half a brain can easily add new images to any of the dozen or so galleries. The config.xml simply loads the flickr set/album (you guys need to update the app. Flickr changed the word "set" to "album" and it took me AGES to figure out what the freaking heck a "set ID" was).

I am currently testing ONE SINGLE config.xml file with configUrl, and have the tags or "set IDs" in the embed code to change the image source from Flickr. Probably won't work but worth a try. I don't think flickrTags or flickrSetId are embed code options, but will try it anyway... another feature request. The purpose of this is to have a single file with settings for a whole pile of galleries in one site. They all have the same settings and should look and behave the same. If you want to tweak something, you only need to modify a single file. This would be a huge time saver. Will only work if the tags or IDs can be set in the embed code. If it doesn't work this way, there appears to be parameters that can be passed via the URL to the page that contains the embed code but that's a last resort.

On a side note, I am curious how much the <noscript> is really needed in the embed code? That embed code can become enormous with every single image in a large gallery. Even if not displayed it has to load. I have been removing it because if someone else is changing the galleries in Flickr, the juicebox galleries work fine but the <noscript> image lists won't be updated and having to do that with the app or by hand completely negates any benefits of using Flickr.

Okay I found what I thought is the html template and modified it, but the embed code in the application does not change.

It's the same as it was before, with the default settings on the Publish screen of Juicebox builder.
I want to add and change options to the embed code "template" so I don't have to edit it every time after saving.

I want to add the base url option to the embed code using %%TITLE%% and also change the location of the jbcore.

"sidmiller" is the title or name of the gallery:

baseUrl: 'galleries/sidmiller/'

On the Publish screen there is a text box to copy the embed code.
Modifying the index.html template in the application does not change the embed code when creating a new gallery.

This is what I want the embed code to look like

<!--START JUICEBOX EMBED-->
<script src="galleries/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
baseUrl: 'galleries/sidmiller/',
galleryWidth: "100%",
galleryHeight: "80%",
backgroundColor: "rgba(255,255,255,0)"
});
</script>

Another thing I am looking for if possible, is to edit the config.xml "template".
Is there a file in the application that controls any of the output for the config.xml?
I am changing elements in this file as well.

I need the XML on the live site. As has been mentioned before, this file contains paths of the local system. I edit config.xml sourcePath to point to a local folder using a relative URL instead of the full path with all of my computer folder information.

I don't want a file on the website with that type of information of my work computer. I would like to remove it by default instead of having to edit files.

It seems there's a lot more "hands on" editing of embed and config in a text editor. Just curious why these changes can't be implemented in the Juicebox builder application to avoid extra work and eliminate "user error" mistakes, like... twice I uploaded galleries but forgot to edit the embed I pasted in.

I would really like that embed code to be "done" on save rather than having to edit it.

Here's a sample of one of the galleries created within an hour of purchasing Juicebox!!!!!!!!

https://www.bvtlive.com/midnight-hour-photo-gallery

Thanks for the response!

Actually I did a simple css override of that class and it works PERFECTLY. Normally I hate to override inline css but in this case it was so simple and fast it seemed the best solution.

I did same thing you posted, changed that class to z-index: 400 !important;. Works fine, no other unusual results. A further note on this... there really is nothing I can see that would require a 3000 z-index. It is such an outrageous value. Even within the DOM of the embedded slideshow there isn't anything in there that would account for 2999 other elements. :)

On second thought, the 400 z-index was based on getting the button bar to float over everything just IN THE GALLERY CODE. To float over the site navigation could have been much lower. Anything LESS than 400 and the button bar could not be clicked. I think this is why it is set so high. The JS generated inline css is just using a REALLY HIGH value in case someone has a gallery with 2999 images. :) Since none of my galleries currently are more than 100 images that value works. I may have to bump it up later of course.

I think this is because of the absolute positioning of the button bar. If it were relative to everything else, I think it would not float over the outer, separate header, navigation. Not 100% sure but pretty sure that relative z-index only works within that block.

p.s. I did set the z-index of the header and navigation of the site template to a pretty high value just to "get it out of the way" so to speak. There were other components and "gizmos" that kept floating over the navigation. The header and navigation is "animated" and "fixed" as you scroll it shrinks and stays at the top.

I think I know the answer but figure it can't hurt to ask.

First off, Juicebox is AMAZING! If I was the only person who had to manage the galleries I am producing it would be absolutely perfect.

Having said that, one of the issues is ease of use. If someone who is not as tech savvy has to edit or create a new gallery, things get a little tricky.

A few issues I am trying to simplify:

Embed Code
The Juiceboxbuilder application has no options to modify the default embed code in the publish step. I have a set of modifications I am doing over and over and over that requires hand editing the embed code. Much of this could be fixed if I could modify the embed code content in the application.

Is there some way to edit the "source" of the embed code used in the application?

config.xml remote sourcepath
This is a stretch I am sure, but is it possible to use an http or ftp source path to the original images?
I was playing around with this on a local webserver and it "seemed" to work but when placing online and changing the source path in the XML it wasn't able to locate the images. I think my "local test" gave inaccurate results based on the local directory structure of the server configuration. It seemed to work, I even have my local test server set up to use standard http protocols and paths.

This would be a huge benefit. I could have clients purchase the pro builder and they could open a gallery with "external" sources in the xml that would point to the location on the server.

If none of this is possible will probably go with Flickr or some other similar option as it has so many more options and features, and all these "young interns" know how to use those sites. :)

8

(495 replies, posted in Juicebox-Pro Support)

Tag Filter Feature

This was covered in a previous response to the same request, suggesting using an image hosting site such as "Flickr" I think, tagging images there and filter with links in Juicebox.

But I'm going to request again that "tag" filters would be a great feature in the core gallery, rather than linking to some other image gallery website. I would be interested in even something very very very very basic, doesn't even need to be fully fleshed out, would be willing to do any design or coding to access tags within each image. Maybe some sort of "hybrid" solution using the same filtering avaiable with externally provideed images.

Button Bar z-index container is set to 3000. This is set "inline" and is not set by the css.

Because the z-index is so high when scrolling the button bar floats over the top navigation.

Changing z-index of header and navigation is not an option. The galleries are important but only a small part of a very LARGE complex site. Everything is working great and has been for a long time. It took a lot of fiddling and tweaking to get the header z-indices to be correct. I do not want to change the z-index of multiple elements in the header and navigation just for the galleries.

It would make more sense to change the astonishingly high z-index of the button bar "wrapper" div.

This is the block I found:

<div class="jb-classifier-link-wrapper jb-classifier-detail-area jb-classifier-layer " data-layer="3000" style="z-index: 3000; display: block; opacity: 1; transition: opacity 400ms ease-in; left: 242px; top: 6px; width: 321px; -webkit-user-select: none;">

Not sure if this is the absolutely correct block, but changing it in Chrome inspector, setting the z-index to 400 fixes the problem.

The site is a joomla site using embed code in an article.  There are close to 20 separate galleries so I made the jbcore folder external to each gallery. Galleries are in a gallery subdirectory using base_url but also pointing to the shared external jbcore folder.

This works FANTASTIC. The only piece of the puzzle left is figuring out how to get the button bar to not float over the site's main navigation.

Would this be a tweak to the css to override the inline styles? Why is the z-index of the button bar "inline" and can it be removed or changed and use only the external css file? I know I know seems a bit obsessive, but we are trying to streamline everything we can to boost performance. I hate having "unused" styles overridden.