'Galleria' In WordPress- $ is not a function

Question

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

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:

<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 Galleria forum as well.

Thanks

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

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

Is this a client-sided or server-sided error? – Teo Klestrup Röijezon Mar 27 '11 at 00:57 — Teo Klestrup Röijezon, Mar 27 '11 at 00:57

zxt · Accepted Answer · 2011-03-27T01:10:06.703

4

Try replacing $("#gallery") with jQuery("#gallery")

According to this post, Wordpress reserves $ for Prototype.

edited Mar 27 '11 at 01:10

answered Mar 27 '11 at 01:05

zxt

2,092
1
16
15

score 2 · Answer 2 · answered Mar 27 '11 at 01:13

For some reason, sometimes with wordpress you gotta do like this:

var $ = jQuery;

Or do what @zxt suggested. That should work too. The version of jQuery they use doesn't declare $ variable to avoid conflicts if you are using other libraries that may use $.

score 1 · Answer 3 · answered Mar 27 '11 at 00:58

1

You need to include the jquery library in your page -- jquery is what defines "$".

Something like

<script type="text/javascript" src="someplace/on/your/server/jquery.js"/>

answered Mar 27 '11 at 00:58

Ernest Friedman-Hill

80,601
10
150
186

hi. the following is loading in the header, before the galleria script: – vulgarbulgar Mar 27 '11 at 01:04

'Galleria' In WordPress- $ is not a function

3 Answers3