jQuery colorbox image grouping issue

JavaScript
1

I’ve tried to customise colorbox on this page so that the main image display launches colorbox, but clicking any of the thumbs just swaps the image into the main image display. This is working fine but one niggling issue is best to handle the indexing/numbering - as I don’t want the same image to appear twice in the lightbox image group, and I also want the correct index of the image to show and for the sequence to correspond with the thumbnail sequence. If anyone could see how to improve what I have at the moment that would be great.

The JS I currently have is:

$j(document).ready(function(e) {

				function initColorbox() {
					$j(".product-gallery").colorbox({
						rel : "product-gallery",
						current : function() {
							var currImg = $j(this).attr("href");
							// Grab basename, as initial main image url can differ from corresponding thumb url
							var baseName = currImg.replace(/^.*\\/|\\.[^.]*$/g, '');
							var pos;
							var total = $j(".more-product-views li a").length;
							// Check index by searching for filename in list items
							$j(".more-product-views li a").each(function() {
								if ($j(this).attr("href").indexOf(baseName) != -1) {
									pos = $j(this).parent().index();
								}
							});

							return "" + (pos + 1) + " of " + total;
						},
						onOpen : updateGallery,
						onComplete : function() {
							$j("#cboxTitle").hide();
						}
					});
				}

				function updateGallery() {
					// Remove main product image's corresponding thumb from colorbox group to prevent duplication
					var mainProdImg = $j(".main-prod-img").attr("href");

					// Grab basename, as initial main image url can differ from corresponding thumb url
					var mainProdBaseName = mainProdImg.replace(/^.*\\/|\\.[^.]*$/g, '');

					$j(".more-product-views li a").each(function() {
						if ($j(this).attr("href").indexOf(mainProdBaseName) != -1) {
							$j(this).removeClass("product-gallery");
						} else {
							$j(this).addClass("product-gallery");
						}
					});

					// Re-init gallery
					initColorbox();
				}

				initColorbox();
				updateGallery();

				$j(".prod-more-view").click(function() {
					var imgFull = $j(this).attr("href");
					$j(".product-image a").attr("href", imgFull);
					$j(".product-image img").attr("src", imgFull);
					return false;
				});
			});