javascript and jquery to solve usability issue

hi there, I am trying to solve a usability problem on my website, but it is proving to be pretty difficult. Now, let's take a look at this page http://antobbo.webspace.virginmedia.com/photography/testing/gloom.htm. To change pictures you need to click on the left hand-side menu, trouble is that when you want to view say the last few pictures on the thumbnail menu, you need to scroll down quite a bit and when you click on the thumbnail of the picture you want, you need to scroll back up quite a bit in order to see the big image.
To get around this I was thinking to add a "next" button just under the big image in the middle and use javascript and jquery to make sure that the button has the same functionality of the left hand-side menu.
Before discussing my attempts, I thought of other another solution, although I am not quite sure if it is that good:
-add an overflow to the left hand-side menu so that I have a scroll bar, but that means that I will have to resize all my divs to make space for the scroll bar, plus the scroll bar itself isn't so elegant and I am not sure how to customize it.

Let me now get to my attempts:

1)In the body I added the next button:

<div class="next_button"><!-- NEXT BUTTON-->
<a href="javascript:void(0);" onClick="nextPicture()">Next</a>
</div><!-- END OF NEXT BUTTON -->

HTML:

then I started the script:

<script type="text/javascript">
<!--
/*NEXT PICTURE */
$(document).ready(function()
{
var mainPictures = ["images/gloom_full_1.jpg", "images/gloom_full_2.jpg", ... "images/gloom_full_27.jpg" ];
var thumbPictures = ["images/gloom_thumb_1.jpg", ... "images/gloom_thumb_27.jpg"];
var thumbShadedPictures = ["images/gloom_thumb_shad_1.jpg"... "images/gloom_thumb_shad_27.jpg"];

mainPictures.current = 0;
thumbPictures = 0;
thumbShadedPictures = 0;

function nextPicture()
{
$("pic_1").fadeOut(2000, function()
{
$(this).attr('src',mainPictures[1]).fadeIn(2000)

});
}
});


//-->
</head> 

Code (markup):

Let me explain what I was attempting to do. I created 3 arrays mainPictures, thumbPictures and thumbShadedPictures because when I click on a thumbnail on the left the big picture in the middle changes and the thumbnail becomes shaded. Then when I click on a another thumbnail, the previous one goes back to normal and the selected one turns shaded and so on, hope it is clear. So what I want to do with the arrays is to make sure that all that happens.
So in function nextPicture() I grab the id pic_1 which is referenced in the body of the page

<img src="images/gloom_full_1.jpg" alt="" id="pic_1">

HTML:

and which contains the first main picture I let it fade out and I replace it with the second picture in the array, but obviously it is not working
2)after few hours I came up with this, managing to at least fading out the main picture:

<script type="text/javascript">
<!--
/*NEXT PICTURE */



function nextPicture()
{
var mainPictures = ["images/gloom_full_1.jpg", "images/gloom_full_2.jpg", ... "images/gloom_full_27.jpg" ];
var thumbPictures = ["images/gloom_thumb_1.jpg", ... "images/gloom_thumb_27.jpg"];
var thumbShadedPictures = ["images/gloom_thumb_shad_1.jpg"... "images/gloom_thumb_shad_27.jpg"];

var current_picture = 1;

mainPictures.current = 0;
thumbPictures = 0;
thumbShadedPictures = 0;
var current_picture = 1;

$("#pic_1").fadeOut(2000, function()
{
while(current_picture<mainPicture.length)
{
$("#pic_1").attr('src',mainPictures[current_picture]).fadeIn(2000);
}
current_picture++;
});
}




//-->
</script>
</head> 

Code (markup):

3) then I finally got to a point where I managed ot fade the main pix away and fade in the next one:

<script type="text/javascript">
<!--
/*NEXT PICTURE */



function nextPicture()
{
var mainPictures = ["images/gloom_full_1.jpg", "images/gloom_full_2.jpg", ... "images/gloom_full_27.jpg" ];
var thumbPictures = ["images/gloom_thumb_1.jpg", ... "images/gloom_thumb_27.jpg"];
var thumbShadedPictures = ["images/gloom_thumb_shad_1.jpg"... "images/gloom_thumb_shad_27.jpg"];

mainPictures.current = 0;
thumbPictures = 0;
thumbShadedPictures = 0;
var current_picture = 0;
	current_picture++;
		mainPictures.current = current_picture;

changePix();


function changePix()

	{

		$("#pic_1").fadeOut(2000, function()
			{
				$(this).attr('src',mainPictures[current_picture]).fadeIn(2000);

			});

	}
}





//-->
</script>

Code (markup):

The problem here is that I can only change the first 2 pictures because I don't seem to be able to assign to pic_1 the subsequent values in the mainPictures array

4) then went for this:

<script type="text/javascript">
<!--
/*NEXT PICTURE */



$(document).ready(function()
{

var mainPictures = ["images/gloom_full_1.jpg", "images/gloom_full_2.jpg", ... "images/gloom_full_27.jpg" ];
var thumbPictures = ["images/gloom_thumb_1.jpg", ... "images/gloom_thumb_27.jpg"];
var thumbShadedPictures = ["images/gloom_thumb_shad_1.jpg" ... "images/gloom_thumb_shad_27.jpg"];

mainPictures.current = 0;
thumbPictures = 0;
thumbShadedPictures = 0;
var current_picture = 0;




function changePix()

	{
	current_picture++;
			mainPictures.current = current_picture;


		$("#pic_1").fadeOut(2000, function()
			{
				$(this).attr('src',mainPictures[current_picture]).fadeIn(2000);

			});

	}
});




//-->
</script>

Code (markup):

and from my page I called function

changePix()

Code (markup):

, but the script doesn't run at all anymore

I am really not getting anywhere, I have been trying to sort this out for the whole day, and I don't seem to be able to do it. Can anybody suggest a way to successfully run the script? thanks

 

hmmm, you got a lot of codes here
iam afraid of it is a lot of stuff to read, can you please simplify your problem so we can help you ?

 

Hi, I know, sorry for that, but it is the first time that I use jquery and javascript, so my code is a bit clunky. ANyway, I think it is sorted out, thanks, I will upload it onto the test site and post the code here
thanks