[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript Errors in Galleria Slideshow

Posted on 2011-10-06
6
Medium Priority
?
349 Views
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:

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

     
0
Comment
Question by:Sivakatirswami
  • 3
  • 3
6 Comments
 

Author Comment

by:Sivakatirswami
ID: 36928325
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 36929668
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
 

Author Comment

by:Sivakatirswami
ID: 36932660
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 75

Expert Comment

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

Expert Comment

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

I only know https://developer.mozilla.org/En/DOM/Node.appendChild
0
 

Author Comment

by:Sivakatirswami
ID: 36939123
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
Suggested Courses

865 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