Javascript Errors in Galleria Slideshow

Posted on 2011-10-06
Last Modified: 2012-05-12
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:

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:

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) {

does not work

    extend: function() {

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.


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...

Question by:Sivakatirswami

    Author Comment

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

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

    	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) {   
        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

    Open in new window

    LVL 75

    Accepted Solution

    What does
     extend: function(options) {  

    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


    Author Comment

    I will answer in reverse order:

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

    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...

    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:


    LVL 75

    Expert Comment

    by:Michel Plungjan
    I'll have a look tomorrow
    LVL 75

    Expert Comment

    by:Michel Plungjan
    Ah I see they create an appendChild of their own

    I only know

    Author Comment

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    A common challenge, or question, when working with two calendar dates is: What is the difference between the specified days? As is frequently the case, the answer is: It depends... What kind of difference do you want? Given two date obje…
    I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now