'Galleria' In WordPress- $ is not a function

admin

Administrator
Staff member
Trying to get Galleria script working in WordPress? I am have enqueued the script with this code, and it appears to be loading ok:

Code:
function add_scripts(){
// Load Galleria

wp_register_script('galleria',get_bloginfo('wpurl').'/galleria/galleria-1.2.2.min.js',array('jquery'),false);
wp_enqueue_script('galleria');
}
add_action('init','add_scripts');

In the post body I have the following, but all I get is the list of images:

Code:
<div id="gallery"><img src="http://farm4.static.flickr.com/3316/3532175582_91f984df47.jpg" alt="" />
<img src="http://farm4.static.flickr.com/3316/3532175582_91f984df47.jpg" alt="" />
<img src="http://farm4.static.flickr.com/3316/3532175582_91f984df47.jpg" alt="" /></div>
<script type="text/javascript">
            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
                width: 500,
                height: 500
            });</script>

The error I receive is this: $ is not a function ... so the galleria script isn't firing right, or in the right order..

I have asked the question in the <a href="http://getsatisfaction.com/galleria/topics/galleria_in_wordpress_is_not_a_function" rel="nofollow">Galleria forum</a> as well.

Thanks

This is the basic setup for Galleria, taken right from the documentation, which works fine as standalone html:

Code:
&lt;!doctype html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="galleria/galleria-1.2.2.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="gallery"&gt;
            &lt;img src="photo1.jpg"&gt;
            &lt;img src="photo2.jpg"&gt;
            &lt;img src="photo3.jpg"&gt;
        &lt;/div&gt;
        &lt;script&gt;
            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
                width: 500,
                height: 500
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;