Javascript Jquery-zAccordion插件响应模式

我正在使用jQueryZaccordion插件，我希望它能够响应。因此，我尝试从他们自己的网站的例子： 无论如何，我已经在我的wordpress网站上包括了zAccordion、Inquire和下面提到的脚本，但什么都没有发生。 有什么问题吗？ 以下是脚本：

jQuery(document).ready(function($) {
var example = $('#media'), defaults = {
    buildComplete: function () {
        example.css('visibility', 'visible');
    },
    timeout: 5500
};
function build(x) {
    var opts, current;
    if (!$.isEmptyObject(example.data())) { /* If an zAccordion is found, rebuild it with new settings. */
        example.css('visibility', 'hidden');
        current = example.data('current');
        opts = $.extend({
            startingSlide: current
        }, defaults, x);
        example.zAccordion('destroy', {
            removeStyleAttr: true,
            removeClasses: true,
            destroyComplete: {
                afterDestroy: function() {
                    try {
                        console.log('zAccordion destroyed! Attempting to rebuild...');
                    } catch (e) {}
                },
                rebuild: opts
            }
        });
    } else { /* If no zAccordion is found, build one from scratch. */
        example.css('visibility', 'hidden');
        opts = $.extend(defaults, x);
        example.zAccordion(opts);
    }
}
/* A unique Media Query is registered for each screen size. */
enquire.register('screen and (min-width: 960px)', { /* Standard screen sizes and a default build for browsers that are unsupported. */
    match : function () {
        build({
            slideWidth: 540,
            width: 860,
            height: 200
        });
    } /* The *true* value below means this media query will fire by default. */
}, true).register('screen and (min-width: 768px) and (max-width: 959px)', {
    match : function () {
        build({
            slideWidth: 420,
            width: 680,
            height: 200
        });
    }
}).register('screen and (min-width: 480px) and (max-width: 767px)', {
    match : function () {
        build({
            slideWidth: 220,
            width: 380,
            height: 200
        });
    }
}).register('screen and (max-width: 479px)', {
    match : function () {
        if (!$.isEmptyObject(example.data())) {
            example.zAccordion('destroy', {
                removeStyleAttr: true,
                removeClasses: true,
                destroyComplete: {
                    afterDestroy: function() {
                        try {
                            console.log('zAccordion destroyed!');
                        } catch (e) {}
                    }
                }
            });
        }
    }
}).listen(5);
});

以下是HTML：

<ul id="media">
<li><img src="http://domain.com/wp-content/uploads/2014/11/1.jpg" width="750"  height="300" alt="Image Title"/></li>
<li><img src="http://domain.com/wp-content/uploads/2014/11/2.jpg" width="750" height="300" alt="Image Title"/></li>
<li><img src="http://domain.com/wp-content/uploads/2014/11/3.jpg" width="750" height="300" alt="Image Title"/></li>
<li><img src="http://domain.com/wp-content/uploads/2014/11/4.jpg" width="750" height="300" alt="Image Title"/></li>
</ul>

---

ul标签后包含上述代码。用jQuery删除$。

什么？这是一个预html代码！我应该在哪里包含这些代码？

<pre class="js">
$("#media").zAccordion({
   timeout: 4000,
   slideWidth: 600,
   width: 960,
  height: 270
 });
</pre>