Image Zoom with jQuery Steps?

Question

I have a "wizard" created using jQuery Steps and am trying to add the ability to zoom images (either on click, hover, etc.) but am running into issues implementing due to jquery.steps.js.

Specifically, I'm trying to implement: jQuery Zoom. Although I'm not married to any particular zoom plugin, if anyone knows of another one that would work with jQuery Steps.

I'm adding the code into a section inside my "wizard" div:

<div id="wizard">
    <h2>Attach Strap</h2>
    <section>
        <img src="img/current-number-1.png" class="wizard-number" alt="Step 1" /><!-- zoom image --><span class='zoom' id='ex1'><img src="img/assembly-step-2.jpg" height="538" width="555" /></span><!-- zoom image -->
    </section>
</div>

But the following lines of the jQuery Steps 'jquery.steps.js' file seem to be overwriting or interfering in some way (and admittedly, my JS skills are not proficient enough to know how to go about rewriting this so it will work):

var contentContainer = wizard.find(".content"),
        header = $(format("<{0}>{1}</{0}>", options.headerTag, step.title)),
        body = $(format("<{0}></{0}>", options.bodyTag)); 

The zoom works fine if I remove that last line (body = $(format("<{0}></{0}>", options.bodyTag));), but of course that breaks the wizard.

Does anyone know how to get jQuery Steps to play nicely with Zoom Master, or if there is another zoom plugin that would work with jQuery Steps?

Answer 1

I'll leave this up here in case anyone else runs into the same issue, but I was able to get zoom to work by loading the jquery.zoom.js file BEFORE loading jquery.steps.js -- the issue is resolved