Changing slide thumbnail icon depending on slide content

Question

I am using the Anything Slider for Wordpress to create slideshows containing both images and video, such as http://www.storybox.co.nz/2011/lynx/

I would like to have the thumbnail icons which link to video slides to use a different icon. I want to do this to make it clear that some slides are videos not still images.

Does anyone have a tip for adding a class to the corresponding thumbnail icon for each slide containing an iframe?

Unfortunately, the slides and thumbnails do not use the same classes so my initial idea of selecting the iframe parent li then corresponding thumbnail that way won't work. But perhaps there is something in using the panel number?

Thanks in advance for any help!

Basic code (note that first and last slides are clones):

<div class="anythingSlider anythingSlider-default activeSlider">
<div class="anythingWindow">
  <ul class="anythingSlider anythingBase" id="slider-342">
    <li class="cloned panel vertical">
      <div><span>
        <iframe></iframe>
        </span></div>
    </li>
    <li class="panel vertical">
      <div><img></div>
    </li>
    <li class="panel vertical">
      <div><img></div>
    </li>
    <li class="panel vertical">
      <div><img></div>
    </li>
    <li class="panel vertical activePage">
      <div>
        <iframe></iframe>
      </div>
    </li>
    <li class="cloned panel vertical">
      <div><img></div>
    </li>
  </ul>
</div>
<div class="anythingControls">
  <ul class="thumbNav">
    <li class="tooltip first"><a href="#" class="panel1"><span>1</span></a></li>
    <li class="tooltip"><a href="#" class="panel2"><span>2</span></a></li>
    <li class="tooltip"><a href="#" class="panel3"><span>3</span></a></li>
    <li class="tooltip last"><a href="#" class="panel4 cur"><span>4</span></a></li>
  </ul>
</div>

Answer 1

Assuming you can't change HTML, do it by order of the elements when you write your JS function to highlight the little slide indicator (the anchors / parent li "a.panel1") based on which "content" is shown (li.panel). Below example:

var nth = 1;
$("li.panel").eq(nth); //get the second graphic
$("a.panel" + (nth + 1)).eq(0); //get the second link a.panel2

There's your pattern.

Answer 2

I found this interesting and I'm working on improving my jquery, so I've added a possibly refined/slightly different approach which should work reliably even for most reasonable changes to the Anything Slider (plus I had it mostly written yesterday but forgot to post it and didn't want it to go to waste if it's possibly helpful to anyone):

$('.anythingWindow li.panel:not(.cloned) iframe').each(function() {
  $('.anythingControls li.tooltip').eq($(this).index('.anythingWindow li.panel:not(.cloned)')).addClass('video');
});

Working jsfiddle

Explanation of differences to solution you gave in comments to sajawikio's answer:

The main selector first targets .anythingWindow, then narrows down to the not cloned list items holding the proper iframes. This should stay fairly optimized so far as performance if there are other iframes on the page, but I doubt it would ever be noticeable either way. If there are mild changes to the nesting structure it should continue to work, so long as the same basic elements and classes are used (you could nest one of the iframes in a div and this would still work, whereas something relying on going 2 parents up would break).

using .eq() with the proper value gets around having to do string concatenation (not sure if there's any real performance change... any gains are probably wiped out by the selection class used in index anyway)

calling .eq() with the argument as the index of each iframe relative to the selection class (not cloned list items) makes sure that if there are ever more than 2 clones it works properly (plus it's semantically correct). (to explain, your solution works because calling .index() with no arguments returns the position relative to all sibling elements, which includes the first cloned li... if there were ever more than one cloned li before the li having the iframe, it would break, and the same for if a cloned li were not present--maybe this is a total non issue and will never happen, but I personally don't like to rely on a plugin's apparent shim[?] not ever getting changed or removed).

at the time I had written it, I assumed you would want to attach the class to the containing lis for the .anythingControl and then just access the as with a selector based on that: obviously either is fine and just a matter of whatever fits comfortably.