1

I'm coding a feature for a photographer that is very similar to a slideshow. I've decided to use the jQuery serialScroll plugin (which piggybacks on the scrollTo plugin) to achieve this affect. I based my code off of the slideshow on the serialScroll demo page, which is almost exactly the functionality that I was looking for.

I've got the code working successfully, but I'd like to achieve one more effect. If possible, I'd love for the items in my slideshow (in my case, <li> elements), to be semitransparent by default, with only the current (or "active," or "selected") item showing at 100% opacity.

I can control the transparency with CSS easily, but I am struggling to track the last item that serialScroll has animated to. How can I interact with the currently "active" item via jQuery so that I can give it a class or perform other actions?

Ray Brown
  • 650
  • 1
  • 8
  • 16

1 Answers1

1

you can do this is different ways,you can add an attribute to your <li> tags, or you can use class like this:

<ul>
<li class="active">test1</li>
<li>test2</li>
<li>test3</li>
</ul>

and with this code in jQuery you can change the active element.

$('ul li').click( function () {
$(this).parent().children().removeClass('active');
$(this).addClass('active');
});

and with this one you can grab the active one

$('ul li.active').html()
Amir M.
  • 11
  • 1