Galleria plugin in wordpress not working in ie or chrome

Question

I have been searching all yesterday and the greater part of today to find a solution but have not come up with anything. I am creating a word press site for a client. I am using Galleria as a main page slider. I did not use a wordpress plugin version but rather the jQuery version that is available for download from the site.

Visually it works fine in FF and mobile. However in FF error console it says scriptaulous requires prototype 1.6 or greater. In Chrome it's a 50/50 shot if it works or not and in IE 9 and IE 10 it seems to either make a small image in teh top left of the stage or a big one cut off in the bottom right yes still has transitions. I have also received word that it will not load on others' machines.

I have tried to link to the prototype.js file as well as add jQuery.noConflict() yet no luck.

I have also tried editing the code where Galleria is initialized to be jQuery instead of $ and a few other variations. Below is the site and the snippet of code.

www.penandpixelmedia.com/Zareh

      <script>
      Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
        $("div.slide").galleria({
           width:1400,
            height:620,
            transition: 'fade',
            showInfo: false,
            autoplay: 4000,
            lightbox:true,
            showImagenav:false,
            imageCrop:'landscape',
           thumbnails:false
        });

        </script>

Any solution would be greatly appreciated.

Answer 1

In the console I received the following error:

Uncaught TypeError: Object [object Object] has no method 'galleria'

This error lead me to believe that you were initializing the Galleria plugin incorrectly. In your code you're using the following:

$("div.slide").galleria();

I jumped over to their website and took a gander at their documentation. It appears that they recommend you do the following to initialize Galleria.

Galleria.run('#galleria'); or in your case it would be Galleria.run('div.slide');

On another note, I noticed that you've included three separate JavaScript libraries/frameworks (Prototype, Scriptaculous, and jQuery) on your website. This might cause some hiccups/conflicts between the libraries.

Also, you specify the options separately from initializing this plugin. Here's the code you'll need to initialize the plugin and configure it as you'd like:

var jQ = jQuery.noConflict();
jQ(function(){
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
    Galleria.run('div.slide');
    Galleria.configure({
        width:1400,
        height:620,
        transition: 'fade',
        showInfo: false,
        autoplay: 4000,
        lightbox:true,
        showImagenav:false,
        imageCrop:'landscape',
        thumbnails:false
    });
});