Creating custom jQuery class
<p>I am creating a photo gallery for my website. I want a grid of the photos displayed when the page loads. Then when the user hovers over each photo, the photo enlarges a little.</p>

<p>I created the javascript for the hovering, but I do not know how to properly package this into a class.</p>

<p>Basically, I want to just create a list like this</p>

<pre><code>&lt;ul&gt;
 &lt;li&gt;&lt;img src="img1.jpg" /&gt;&lt;/li&gt;
 &lt;li&gt;&lt;img src="img2.jpg" /&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And then it automatically creates each image with my hovering mechanism already in place.
Here is my code thus far.</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;style text="text/css"&gt;
.hoverImage {
    position: absolute;
    width: 200px;
    left: 500px;
    top: 200px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
var originalWidth;
var originalHeight;

function onHover() {
    originalWidth = $(this).width();
    originalHeight = $(this).height();

    $(this).stop(false, true).animate({
            left: $(this).offset().left-(Math.floor(originalWidth/4)),
            top: $(this).offset().top-(Math.floor(originalHeight/4)),
            width: 300,
    },200);
}

function offHover() {
    $(this).stop(false, true).animate({
            left: $(this).offset().left+(Math.floor(originalWidth/4)),
            top: $(this).offset().top+(Math.floor(originalHeight/4)),
            width: 200,
    },200);
}

$(document).ready(function() {
    $("img").hover(onHover, offHover);
});

&lt;/script&gt;
&lt;img class="hoverImage" src="Test.jpg"/&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
