Skip to content
This repository

Enable configurable elements in setInfo() #166

wants to merge 1 commit into from

2 participants

Joshua Jabbour David Hellsing
Joshua Jabbour

This code is not ready to pull yet, I just wanted to start a pull request now to open a dialogue.

Galleria.setInfo() is a really handy function, as it automates and abstracts updating any info elements in the gallery. However, right now it is limited to three hard-coded elements (title, description, author). This patch is the start of allowing those elements to be configurable.

Why might this be useful? An image is not limited to the three types of metadata listed, maybe you'd like to display the photographer name, or date the image was taken. By allowing the element list to be configurable, anything is possible.

This is easiest when using JSON data, as extra object properties will just be found, but also works fine with the dataConfig option (you'll have to manually move the values into the data array just like the main properties are done in Galleria.load).

There are a few ways to set this up, this branch demonstrates one by adding an "infoElements" config option. If you wanted this to be less accessible to users, another solution would be just to move the array of options to a property in the Galleria object so it could be manually updated. But as it is right now, it's impossible to add new info elements without completely overwriting the setInfo function.

Joshua Jabbour Enable configurable elements in setInfo().
* New infoElements option with defaults: ['title','description','author'].
* Other keys can be added to the DOM in theme.
Joshua Jabbour

Just to be clear, the second option I'm talking about is something like this (making it not an option, but still accessible):

infoElements : ['title','description','author'],

setInfo : function( index ) {

    var self = this,
        data = this.getData( index );

    $.each( self.infoElements || [], function( i, type ) {

        var elem = self.$( 'info-' + type );

        if ( !!data[type] ) {
            elem[ data[ type ].length ? 'show' : 'hide' ]().html( data[ type ] );
        } else {

    return this;

David Hellsing

We where discussing this issue very early in the project. At that point we settled with three, however we are only using two in the themes provided. One could argue that one "caption" is enough, but for the simplicity and to lower the learning curve of handling captions, two-three static info elements seemed enough.

We will most likely remove the author info element, since it’s rarely used anymore. But your suggestion would make it even more customizable, even if the regular user would probably go for just title & description, which should probably be default.

I’m keeping this open for future implementations / discussions.

Joshua Jabbour

While one could argue that a set number/type of options is enough, in order for Galleria to be able to handle any data structure, it needs to be configurable. What about location? That is data that is common in photos, but there's nowhere to put it now. You can jam it into the description, but then you either have limited layout opportunities, or have to include html in your actual data, and either way you have to alter your data model to be less semantic.

I totally agree that title and description are good defaults, and make the most sense for a lot of users. So I fully support that being changed. However, without at minimum my second example above (which is a very small change), there is no flexibility in this feature (where with the change there is infinite flexibility--we currently have 10-12 data keys being updated in our gallery).

David Hellsing

You are right about extendability, I’m just not sure what way would be the best. How about DOM elements, would the configurable info elements also be automatically added, or is it enough that the setInfo method can take multiple elemIDs for ex. as a second argument, and then let the author manually add DOM elements?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Mar 05, 2011
Joshua Jabbour Enable configurable elements in setInfo().
* New infoElements option with defaults: ['title','description','author'].
* Other keys can be added to the DOM in theme.
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 4 additions and 3 deletions. Show diff stats Hide diff stats

  1. 7  src/galleria.js
7  src/galleria.js
@@ -1517,6 +1517,7 @@ Galleria.prototype = {
1517 1517
             imagePan: false,
1518 1518
             imagePanSmoothness: 12,
1519 1519
             imagePosition: '50%',
+            infoElements: ['title','description','author'],
1520 1521
             keepSource: false,
1521 1522
             lightboxFadeSpeed: 200,
1522 1523
             lightboxTransition_speed: 500,
@@ -3394,9 +3395,9 @@ this.prependChild( 'info', 'myElement' );
3394 3395
3395 3396
3396 3397
-        Manually set captions
+        Manually set info
3398 3399
-        @param {number} index Optional data index to fectch and apply as caption,
+        @param {number} index Optional data index to fetch and apply info,
3400 3401
         if no index found it assumes the currently active index
3401 3402
3402 3403
         @returns Instance
@@ -3407,7 +3408,7 @@ this.prependChild( 'info', 'myElement' );
3407 3408
         var self = this,
3408 3409
             data = this.getData( index );
3409 3410
-        $.each( ['title','description','author'], function( i, type ) {
+        $.each( self._options.infoElements || [], function( i, type ) {
3411 3412
3412 3413
             var elem = self.$( 'info-' + type );
3413 3414

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.