Ill bet you cant figure this out!

JavaScript
1

in this page

www.phi
lipd
usel.com/work.html

the navigational arrows have a hover effect…how can that effect only appear when there is another image to be seen…ie if you are on the 1st img in the gallery the left navigational arrow would not have that hover effect. and the same if youre on the last…

please look at the page in question

thanks

2

i know that is what i need to do…my issue is with doing it. im not how to implement that behavior in javascript

can you give me an example?

thanks

3

What you’ll need here is a check after showing each image, which checks whether you’re at the start or end, and triggers the appropriate show/hide for each arrow.

4

Okay, here’s an example.

Say for example that you have prev and next links. They could be arrows, they could be words, they could be buttons.


<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>

You could use a class called hidden to hide them


.hidden {
    display: none;
}

And then apply that hidden class, using scripting, to each link as is appropriate for each of them. If you’re on image 0, use the hidden class on the prev link, and if you’re at 1 less than images.length, use the hidden class on the next link.

The following code assumes that the collection of images is an array called images, and that currentImage is an index to the one that’s currently being shown.


var prev = document.getElementById('prev');
var next = document.getElementById('next');
prev.className = (currentImage === 0) ? 'hidden' : '';
next.className = (currentImage === images.length - 1) ? 'hidden' : '';

That’s the bare bones of how it’s commonly done.

Are you able to make use of that information and apply it in some way to your own scripting?