Hi peeps,
I wonder if anybody can give me a hand with this. Basically on my website http://antobbo.webspace.virginmedia.com/photography/testing/gloom.htm to view a picture you need to use the left hand-side menu. Now, all good except that when you want to view any picture at the bottom of the left hadn-side nav you need to scroll all the way down, losing the main picture and then you need to scroll all the way up again. So I was thinking to have a next button which will have the same function as the left hand-side navigation. I thought it would have ben easy but it's now 10 hours I am working on it and I really don't seem to be able to get anywhere. I tried many conbinations, here's some of the attempts:
1) I created the button:
<div class="next_button"><!-- NEXT BUTTON-->
<a href="javascript:void(0);" onClick="nextPicture()">Next</a>
</div><!-- END OF NEXT BUTTON -->then 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>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 grabbed the id pic_1 which is referenced in the body of the page
<img src="images/gloom_full_1.jpg" alt="" id="pic_1">that didn't work
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++;
});
}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></script>
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
I can go on for quite a bit, but I will post only the last attempt which didn't use arrays:
4)
<script type="text/javascript">
<!--
/*NEXT PICTURE */
function nextPicture()
{
var change_picture = "images/gloom_full_2.jpg";
changePix();
function changePix()
{
$("#pic_1").fadeOut(2000, function()
{
$(this).attr('src',change_picture).fadeIn(2000);
});
}
}It works but again I can only change the first 2 pictures I am not sure how to do the same thing with the rest of them (27). Let's not forget that I also have to changes the thumbnails because I need to keep the same functionality as the left hadn-side navigation. After 10 hrs I am losing it sorry, can't think straight anymore. Can anybody suggest anything?
thanks a lot
