how to stop writing repeated code
<p>Hi I was just wondering how I can change the code below to less lines of code, it contains a lot of repeated lines,</p>

<p>basically what it does it swaps images and make them zoom in,</p>

<p>any help would be appreciated,</p>

<pre><code> // JavaScript Document
$(function() {

    var fullWidth = 1500; // Width in pixels of full-sized image
    var fullHeight = 2000; // Height in pixels of full-sized image
    var thumbnailWidth = 327;  // Width in pixels of thumbnail image
    var thumbnailHeight = 480;  // Height in pixels of thumbnail image

    // Set size of div
    $('.big_product').css({
        'width': thumbnailWidth+'px',
        'height': thumbnailHeight+'px'
    }); 

  //on page load hide small product2 and small product3
  $('#small_product2,#small_product3').hide();

  var selected_color;
  //get the selected color
  $('#colors option').click(function() {
      selected_color = $('#colors option:selected').text().toLowerCase();

      //show the relevant product according to selected color
      if(selected_color == 'navy') {     
       $('#small_product2,#small_product3').hide();
       $('#small_product1').show();
      }

     else if(selected_color == 'grey') {
       $('#small_product1,#small_product3').hide();
       $('#small_product2').show();
      }

      else if(selected_color == 'black') {
       $('#small_product1,#small_product2').hide();
       $('#small_product3').show();
      }
 });

//hide the full-sized(the largest) pictures
$('#full1-1,#full1-2,#full1-3').hide();

//hide the thumbnails
$('#thumbnail1-1,#thumbnail1-2,#thumbnail1-3').hide();

//when the first small pic is clicked
$('#small_product1-1').click(function() {
    $('#main_product,#big_product1-2,#big_product1-3').hide();
    $('#big_product1-1,#thumbnail1-1').show();
});

// Toggle full and thumbnail pictures on click
$('#big_product1-1').click(function() {
    $('#thumbnail1-1').toggle();
    $('#full1-1').toggle();     
});

// Do some calculations
    $('#big_product1-1').mousemove(function(e) {
     var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
     var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

     var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
     var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

     $('#full1-1').css({
      'left': '-' + posX + 'px',
      'top': '-' + posY + 'px'
     });
  });

//when the second small pic is clicked
$('#small_product1-2').click(function() {
    $('#main_product,#big_product1-1,#big_product1-3').hide();
    $('#big_product1-2,#thumbnail1-2').show();
});

// Toggle full and thumbnail pictures on click
$('#big_product1-2').click(function() {
    $('#thumbnail1-2').toggle();
    $('#full1-2').toggle();     
});

// Do some calculations
    $('#big_product1-2').mousemove(function(e) {
     var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
     var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

     var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
     var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

     $('#full1-2').css({
         'left': '-' + posX + 'px',
         'top': '-' + posY + 'px'
     });
  });

//when the third small pic is clicked
$('#small_product1-3').click(function() {
    $('#main_product,#big_product1-1,#big_product1-2').hide();
    $('#big_product1-3,#thumbnail1-3').show();
});

// Toggle full and thumbnail pictures on click
$('#big_product1-3').click(function() {
    $('#thumbnail1-3').toggle();
    $('#full1-3').toggle();     
});

// Do some calculations
    $('#big_product1-3').mousemove(function(e) {
     var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
     var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

     var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
     var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

     $('#full1-3').css({
      'left': '-' + posX + 'px',
      'top': '-' + posY + 'px'
     });
  });
});
</code></pre>
