RFC (Request for Comment): Juicebox Web Gallery

Started by Mario, March 19, 2015, 06:33:10 PM

Previous topic - Next topic

Mario

As you might be aware, IMatch includes a comfortable export module to create Juicebox Web Galleries from files in your database. See the IMatch help and this article in the IMatch knowledge base for more information.

What bugged me with this, and I also got several emails about it, is that currently only flat web galleries can be created - without category-based or keyword-based navigation. To relax a bit from the stress caused by shipping four releases in four weeks, I toyed a bit with the export module and I have promising preliminary results.

Question: Is there an interest in Juicebox web galleries with a navigation based on categories? We had that in the old IMatch 3 web publishing script too. And it was used by many users, and more sophisticated versions of the Web Gallery Script were created by other users.

In my develop version, when I drop one single category to the Juicebox Exporter, it uses processes all child categories of that category, recursively and creates a navigation based on this. This would allow you, like in IMatch 3, to create some sort of "Web Gallery Root Category" for this purpose and below that setup the navigation exactly in the way you want to see it in the gallery (by created child categories or even by adding Alias categories for keywords etc.).

All you need to do to create/update a gallery is to drop this category on the Juicebox Export module.
I have separated the gallery HTML code entirely from the style. All styling (colors, looks, behavior, colors, fonts etc.) comes from a HTML CSS style sheet. This makes it very easy to change the look of the gallery without knowing anything about programming.

What I have so far is:



[attachment deleted by admin]
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

Frank

Great to here it. YES I am interested in this functionality.

But is it somehow possible to exclude some categories like in imatch 3?

Frank

Mario

You create a root category and below than the categories you want to include in the gallery.
This does not export your entire category hierarchy, just one selected category and it's children. This gives you full control over the navigation you create and the images you include.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

Ferdinand

Short answer:  Yes.

Longer answer:  although you thought it pointless, it was my intention when I found some time (hah!) to try to migrate the old extended gallery script.  If this works as you seem to be describing it, then I might forget that idea.

medgeek

I would definitely use this.  A similar feature was included in IDimager 5 and I still use that.  This was removed from Photosupreme (this is part of the reason I'm here).

sinus

Best wishes from Switzerland! :-)
Markus

oldhank



Mario

#8
I finished work on this enhancement this morning.

The script works as before when you drop files, folders or more than one category. In this mode it just takes all the files and produces a Juicebox web gallery.
If you drop a single category, the script creates a Juicebox gallery with a navigation, using all child categories, recursively, of the dropped category. For each category an individual set of images and thumbnails is generated, and the gallery.html file dynamically switches between them. Very neat.

As before with the web publishing script created for IMatch 3 many years ago, the idea behind the new Juicebox Web Gallery script is to allow users to customize the output. Since web technology has evolved a lot in past years, the Juicebox script works as follows:

It produces a gallery.html file which contains the HTML code and JavaScript that is used to load Juicebox, switch between galleries when the navigation is used etc. The navigation is written as a nested <ul> list, where each <ul> and <li> has a unique class (per level) and id. This makes the navigation completely customizable via CSS. Of course the HTML page itself can be customized or replaced if required.

But to change the look, colors, fonts etc. of the gallery you don't need to touch the script itself or the HTML template.

The 'look' of the gallery is entirely controlled by one (or more) cascading style sheet (CSS) file. I provide a "Default" and a "White" style sheet with the Juicebox script. The CSS file allows you to control everything, from the background color to fonts and also the look and functionality of the navigation itself. If you know a bit CSS or you want to learn something new, you can easy setup your own CSS file and produce galleries which exactly match your web presence or corporate web site.

That's about as far as I will go. I may provide some additional style sheets in future IMatch versions, when I have a good idea or many requests come in for a specific look (e.g. for deep category hierarchies, but these are not really suited for web publishing anyway).

As before you can customize the background, text and thumbnail border colors of the Juicebox in the dialog box directly, which allows for some nice contrasts between the dark or light colors available for the navigation itself. The width of the navigation can be customized to get the best result whether you want to give the image as much space as possible or you need a wider navigation to fit long category names.

These are the two styles I've created for now:



[attachment deleted by admin]
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

Ferdinand