I have a <ul> set up that is fill of <li>'s, each containing a single image. Each Image is 200px x 200px. The list is placed inside of a containing div ALSO with a width of 200px x 200px and overflow set to hidden.
So basically, it’s a big list of images with only one of them showing at a time (because the overflow of the container is hidden).
What I would LOVE LOVE to do, is scroll through them…basically, adjusting which one is seen when a link is clicked. I’ve tried using scollto() on the li, but am having no luck. Been at this for HOURS trying to get some results and so far I’m just pulling my hair out.
I just realized that I could set the first <li> to an “active” class when the page loads…then use jquery to add an “inactive” class, setting the visibility to none for all other <li>'s.
Then, when a previous or next arrow is clicked, I can find the <li> that is currently active, disable it, and make the next (or previous, depending on which arrow was clicked) active.
<ul id="albumlist">
<li>here is an album title</li>
<li class="active">here is another one...it's currently active</li>
<li>and yet another.</li>
</ul>
…and I can find which li is active with this:
$('#albumlist').find('li.active')
…how can I determine if it is the first or the last element in the UL?
You can use setInterval or setTimeout to alter the content container’s opacity to create the fade in/out effect.
But since you say you are trying to learn, I’d steer away from jquery and do it with just plain javascript (I assume you are aware that jquery is just a bunch of prewritten plain javascript functions).
jquery will run a helluva lot more code in the background to do the fade in/out than if you coded it with just plain javascript.