usability problem and jquery fix

[dupalo]

Hi there,
just noticed something on my site [antobbo.webspace.virginmedia.com...]
The only way to change picture is to click on the left hand-side menu, but when you scroll down say to change the last pictures you lose the big picture in the middle and then you have to scroll all the way up again to view it.
I thought of a couple of solutions:
- add a overflow, so that I have a scroll bar, but I don't want to go down that way because I would have to change the size of all the divs I think;
- have a "next" button just below the big pic in the middle that, with a jquery script, lets me change the pix without using the left hand-side menu;

- any other (reasonably easypls) option you guys could think of?

ABout the jquery script, it doesn't seem to be that easy after all - knowing just a little about jquery. I had a first stab at it but I am not entirely sure how to continue. Here's what I have done:

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 -->

then I started the script:

<script type="text/javascript">
<!--
/*NEXT PICTURE */
$(document).ready(function() 
{
var mainPictures = ["images/gloom_full_1", "images/gloom_full_2", "images/gloom_full_3", "images/gloom_full_4", "images/gloom_full_5", "images/gloom_full_6", "images/gloom_full_7", "images/gloom_full_8", "images/gloom_full_9", "images/gloom_full_10", "images/gloom_full_11", "images/gloom_full_12", "images/gloom_full_13", "images/gloom_full_14", "images/gloom_full_15", "images/gloom_full_16", "images/gloom_full_17", "images/gloom_full_18", "images/gloom_full_19", "images/gloom_full_20", "images/gloom_full_21", "images/gloom_full_22", "images/gloom_full_23", "images/gloom_full_24", "images/gloom_full_25", "images/gloom_full_26", "images/gloom_full_27" ];

var thumbPictures = ["images/gloom_thumb_1", "images/gloom_thumb_2", "images/gloom_thumb_3", "images/gloom_thumb_4", "images/gloom_thumb_5", "images/gloom_thumb_6", "images/gloom_thumb_7", "images/gloom_thumb_8", "images/gloom_thumb_9", "images/gloom_thumb_10", "images/gloom_thumb_11", "images/gloom_thumb_12", "images/gloom_thumb_13", "images/gloom_thumb_14", "images/gloom_thumb_15", "images/gloom_thumb_16", "images/gloom_thumb_17", "images/gloom_thumb_18", "images/gloom_thumb_20", "images/gloom_thumb_21", "images/gloom_thumb_22", "images/gloom_thumb_23", "images/gloom_thumb_24", "images/gloom_thumb_25", "images/gloom_thumb_26", "images/gloom_thumb_27"];

var thumbShadedPictures = ["images/gloom_thumb_shad_1", "images/gloom_thumb_shad_2", "images/gloom_thumb_shad_3", "images/gloom_thumb_shad_4", "images/gloom_thumb_shad_5", "images/gloom_thumb_shad_6", "images/gloom_thumb_shad_7", "images/gloom_thumb_shad_8", "images/gloom_thumb_shad_9", "images/gloom_thumb_shad_10", "images/gloom_thumb_shad_11", "images/gloom_thumb_shad_12", "images/gloom_thumb_shad_13", "images/gloom_thumb_shad_14", "images/gloom_thumb_shad_15", "images/gloom_thumb_shad_16", "images/gloom_thumb_shad_17", "images/gloom_thumb_shad_18", "images/gloom_thumb_shad_19", "images/gloom_thumb_shad_20", "images/gloom_thumb_shad_21", "images/gloom_thumb_shad_22", "images/gloom_thumb_shad_23", "images/gloom_thumb_shad_24", "images/gloom_thumb_shad_25", "images/gloom_thumb_shad_26", "images/gloom_thumb_shad_27"];

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

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

});
}
});


//-->
</head>

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">

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... any advice (especially if there is an easier way pls)
thanks

[dupalo]

ah, I have been working a couple of hours on it and came u with something, still not successful but at least I managed to fade out the main picture using the button. Here's the script, with some amendments:

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



function nextPicture()
{
var mainPictures = ["images/gloom_full_1.jpg", "images/gloom_full_2.jpg", "images/gloom_full_3.jpg", "images/gloom_full_4.jpg", "images/gloom_full_5.jpg", "images/gloom_full_6.jpg", "images/gloom_full_7.jpg", "images/gloom_full_8.jpg", "images/gloom_full_9.jpg", "images/gloom_full_10.jpg", "images/gloom_full_11.jpg", "images/gloom_full_12.jpg", "images/gloom_full_13.jpg", "images/gloom_full_14.jpg", "images/gloom_full_15.jpg", "images/gloom_full_16.jpg", "images/gloom_full_17.jpg", "images/gloom_full_18.jpg", "images/gloom_full_19.jpg", "images/gloom_full_20jpg", "images/gloom_full_21.jpg", "images/gloom_full_22.jpg", "images/gloom_full_23.jpg", "images/gloom_full_24.jpg", "images/gloom_full_25.jpg", "images/gloom_full_26.jpg", "images/gloom_full_27.jpg" ];
var thumbPictures = ["images/gloom_thumb_1.jpg", "images/gloom_thumb_2.jpg", "images/gloom_thumb_3.jpg", "images/gloom_thumb_4.jpg", "images/gloom_thumb_5.jpg", "images/gloom_thumb_6.jpg", "images/gloom_thumb_7.jpg", "images/gloom_thumb_8.jpg", "images/gloom_thumb_9.jpg", "images/gloom_thumb_10.jpg", "images/gloom_thumb_11.jpg", "images/gloom_thumb_12.jpg", "images/gloom_thumb_13.jpg", "images/gloom_thumb_14.jpg", "images/gloom_thumb_15.jpg", "images/gloom_thumb_16.jpg", "images/gloom_thumb_17.jpg", "images/gloom_thumb_18.jpg", "images/gloom_thumb_20.jpg", "images/gloom_thumb_21.jpg", "images/gloom_thumb_22.jpg", "images/gloom_thumb_23.jpg", "images/gloom_thumb_24.jpg", "images/gloom_thumb_25.jpg", "images/gloom_thumb_26.jpg", "images/gloom_thumb_27.jpg"];
var thumbShadedPictures = ["images/gloom_thumb_shad_1.jpg", "images/gloom_thumb_shad_2.jpg", "images/gloom_thumb_shad_3.jpg", "images/gloom_thumb_shad_4.jpg", "images/gloom_thumb_shad_5.jpg", "images/gloom_thumb_shad_6.jpg", "images/gloom_thumb_shad_7.jpg", "images/gloom_thumb_shad_8.jpg", "images/gloom_thumb_shad_9.jpg", "images/gloom_thumb_shad_10.jpg", "images/gloom_thumb_shad_11.jpg", "images/gloom_thumb_shad_12.jpg", "images/gloom_thumb_shad_13.jpg", "images/gloom_thumb_shad_14.jpg", "images/gloom_thumb_shad_15.jpg", "images/gloom_thumb_shad_16.jpg", "images/gloom_thumb_shad_17.jpg", "images/gloom_thumb_shad_18.jpg", "images/gloom_thumb_shad_19.jpg", "images/gloom_thumb_shad_20.jpg", "images/gloom_thumb_shad_21.jpg", "images/gloom_thumb_shad_22.jpg", "images/gloom_thumb_shad_23.jpg", "images/gloom_thumb_shad_24.jpg", "images/gloom_thumb_shad_25.jpg", "images/gloom_thumb_shad_26.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>

As said, that fade out the big pucture on the page, but the second part of it doesn't work, as in I can't fade in the next picture in the array for whatever reason

[daveVk]

var p = $("#pic_1"); 
function doNext() { 
 p.fadeOut(2000, function() { 
  // after fade out 
  current_picture++; 
  if ( current_picture === mainPicture.length ) { current_picture=0; } 
  p.attr('src',mainPictures[current_picture]); 
  p.fadeIn(2000,doNext); // after fade in, repeat doNext 
 }; 
}; 
doNext(); // start process 

		
			

[dupalo]

Thanks for that daveVk...it looks quite simple and I wasted so much time on it.
thanks again

[daveVk]

Minor correction last 3 lines

});
}
doNext(); // start process

I rely on jsLint (to much) to pick up these type of slips.