Javascript Errors in Galleria Slideshow

I am using Gallera from Aino as a slideshow frame work. I love it because it has a robust API, and is very cusomitzable. But, frankly their documentation assumes a fairly high level of Javascripting experience and they don't use a lot of examples, so amateur hacker like myself are in trouble. I contacted Aino and they really won't support newbies where it is a matter of basic JS. So I'm coming over to EE for help.

See this web page:

http://himalayanacademy.com/slideshows/galleria-w-more-info.html

right now the slideshow is broken and it is exposing the whole DOM on the page.

I am trying to use the option to add another <div> to the stage. The documentation is here:

http://galleria.aino.se/docs/1.2/

http://galleria.aino.se/docs/1.2/api/methods/

And we know that the goal is achieved using i) addElement ii) appendChild

The Galleria methods are exposed in the instance. You have access to all methods listed here in the extend( [ options ] ) option or by retrieveing the instance using Galleria.get. Read more about how to use the Galleria instance in Extending Galleria.

The problem is: I am not coding it properly

 
 
    extend: function(options) {
             this.addElement('more-info');
      } 

does not work

    extend: function() {
             this.addElement('more-info');
      }

also does not work. 

 

Open in new window


The developer says, when I contacted him directly "we saw your issue, but it was such an obvious thing to any experience developer we did not pursue it. If you turn on logging you will see what is wrong.

So,

1) Can you see the right way to do it (I wish they put more examples of the API used in context)
2) how do I turn on error logging?

I used to use FireBug but it's not up to speed yet with FireFox 6...

     
SivakatirswamiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SivakatirswamiAuthor Commented:
I have since solved the first problem... I was missing a couple of comma's so now I am able to

http://himalayanacademy.com/slideshows/galleria-w-more-info.html

but now FireBug is tell me there is a missing colon after the property ID "more-info"

<script>
    Galleria.loadTheme('/js/galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({      
	width: 600,
	height: 500,
	transition: "pulse",
	transitionSpeed: 500,
	imageCrop: true,
	image_pan: true,
	thumbCrop: true,
	carousel: false,
	_showFullscreen: true,
	_showPopout: true,
	_showProgress: true,
	_showTooltip: true,
   
  
   
    extend: function(options) {   
        	 this.addElement('more-info');
        	 this.appendChild('image','more-info');
      }, 
         
    dataConfig: function(img) {
        return {
            title: $(img).next('h2').html(), // tell Galleria to use the h2 as title
            description: $(img).siblings('.desc').html(), // tell Galleria to grab the content from the .desc div as caption
            more-info: $(img).siblings('more-info').html(), // tell Galleria to use the more-info for another block
            };
         }
           
           // # now fire bug is telling there is a colon ":" missing after the property ID "more-info" above.
           // but it's there....
    
       
    }); //End galleria instance
    
</script>

Open in new window

0
Michel PlungjanIT ExpertCommented:
What does
 extend: function(options) {  
               this.addElement('more-info');
               this.appendChild('image','more-info');
      },
do?

Normally there is only one parameter to appendChild

also you need to remove the last comma from

more-info: $(img).siblings('more-info').html() <<<<<<<<<<<<<<< no comma allowed here

Lastly 'more-info' is not a valid selector, perhaps you mean

'#more-info'
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SivakatirswamiAuthor Commented:
I will answer in reverse order:

3. removed comma! and also changed the property name to "moreinfo"  and now the page loads properly.  see

http://himalayanacademy.com/slideshows/galleria-w-more-info.html

2. Galleria allows 2 params for appendChild (parent,child)

And I am very happy to say that it works! If you look at the generated code you will see

<div class="galleria-moreinfo"></div>

Now I can move on to the next problem which is how to address that new div with data config so that I can extract the html in from the page and insert it in that block... but that is a different problem from what I asked you to solve so I will aware pointt now for this. and come back again for JS help after seeing if I can shake answers out of the galleria GetSatisfaction forum for the data config issue.

3. AddElement and appendChild   allows you to add to the DOM that is managed by Galleria:

see below and documentation here. Sadly there are few robust examples and the developer assumes a high level of JS expertise to put it all together. But I slowly learing to be a better hacker...

http://galleria.aino.se/docs/1.2/references/dom/

what I am trying to do is to add another text block, below the slideshow for more lenghty commentary on the slide. Other "naive" users have very similar use cases. e.g. an art collector want to put slides with captions for the art and then adjacent or below the slide, the "provenance" or metadata and other details about the painting: ergo same structural use case: another text/html block in the DOM. Once you get it in and you poke it with data from one of your elements in the html, then positioning etc will be simple by just adding another class or ID to the CSS..
All the methods and call backs seem to be there a

    DOM Structure
        List of elements
        HTML structure

Docs » DOM Structure
DOM Structure

Galleria builds a rich DOM structure for each Gallery. You can access them in the Theme API using this.get( ID ) or this.$( IDs ). Read more about DOM manipulation in the API Reference.
List of elements

Here is a list of each element in the default Galleria DOM and their layout:

container
    stage
        images
        loader
        counter
            current
            total
        image-nav
            image-nav-right
            image-nav-left
    thumbnails-container
        thumb-nav-left
        thumbnails-list
            thumbnails
        thumb-nav-right
    info
        info-text
            info-title
            info-description
            info-author
    tooltip

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Michel PlungjanIT ExpertCommented:
I'll have a look tomorrow
0
Michel PlungjanIT ExpertCommented:
Ah I see they create an appendChild of their own

I only know https://developer.mozilla.org/En/DOM/Node.appendChild
0
SivakatirswamiAuthor Commented:
Well I did achieve that much. in the generated code I'm now getting

<div class="galleria-more-info"></div>  So we succeeded there.
but now I am unable to get the galleria dataconfig to address this element... I opened a new thread with a separate question on this next step.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.