Reducing lines of jQuery code, unnecessary repetition
<p>I am hoping to be able to reduce the repetition in the following code, which changes an image source and also the background image of a div when you click a numbered link.</p>

<p>I was thinking that since I numbered the variables and selectors in the same way (1, 2, 3...) I could rewrite the click function part in less lines to avoid having to change this every time I change the number of images? Maybe the click function could get its own class (eg 2) and apply it to the other lines?</p>

<p>Images (can be any number)</p>

<pre><code>var image1 = 'Home.jpg';
var image2 = 'About.jpg';
var image3 = 'Contact.jpg';
</code></pre>

<p>Click function (currently repeats to cover all images above)</p>

<pre><code>$('.1').click(function() {
   $("#image").attr('src', image1);
   $('#center').css('background', 'url(' +  image1 + ') no-repeat center top');
});
$('.2').click(function() {
   $("#image").attr('src', image2);
   $('#center').css('background', 'url(' +  image2 + ') no-repeat center top');
});
$('.3').click(function() {
   $("#image").attr('src', image3);
   $('#center').css('background', 'url(' +  image3 + ') no-repeat center top');
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;a href="#" class="1"&gt;Option 1&lt;/a&gt;
&lt;a href="#" class="2"&gt;Option 2&lt;/a&gt;
&lt;a href="#" class="3"&gt;Option 3&lt;/a&gt;
</code></pre>

<p>You can see the code in action here: <a href="http://carolineelisa.com/zack/" rel="nofollow">http://carolineelisa.com/zack/</a></p>

<p>Any suggestions for making this smaller and easier to update would be greatly appreciated!</p>
