Forum Moderators: open
I'm trying to display three things:
1. An up arrow
2. A thumbnail image
3. A down arrow
And I want a pretty little animation that slides the thumbnail image up or down (depending on what arrow you click) and replaces the old image with the next or previous image. Scriptaculous seemed appropriate, and I've managed to make the down arrow work (so I can click it, and the arrow shifts down to make room for the next image, which then pushes the old image out of the way by moving upwards), with this javascript:
var number = 10;
function scroll_up() {
animate_up();
var nextImage = new Image();
nextImage.src = document["next"].src;
if(number!= 10) { document["current"].src = nextImage.src;}
number = number + 1;
document["next"].src = 'images/'+number+'.jpg';
}
function animate_up() {
new Effect.Appear('appear_div');
new Effect.SlideUp('portfolio_image');
}
And this html:
<div class="slides">
<div id="portfolio_image">
<div>
<img src="images/10.jpg" name="current" width="152" height="126" alt="Portfolio Picture" id="portfolio" />
</div>
</div>
<div id="appear_div" style="display: none;">
<img src="images/11.jpg" name="next" width="152" height="126" alt="Portfolio Picture 2" id="portfolio" />
</div>
<div onclick="scroll_up()" id="arrow_down">
<img src="images/arrow_down.png" width="81" height="39" alt="Next Image" />
</div> But I don't like it, it seems messy. And I can't seem to get the up arrow working by copying/pasting/changing variables. So I suspect there must be some major thing I'm doing wrong here. Any ideas?
I realise that I don't have to put animate_up as a separate function, I only put that there because I was having trouble with making sure things happened in the right order.
Oh, and the reason I'm using number.jpg is for ease of adding extra thumbnails - I figure I can always add in somewhere at the top a simple if(number = 20 or number = 0) {number = 10;} for example, if I had 20 images. That doesn't sound quite right either, but that part is not the bit that troubles me, its getting the animation code right.
If you think this is a lost cause, is there some other script out there that will accomplish the same thing for me?
