IMG slideshow/gallery cycling AFTER filtering elements by class

I'm still a JQuery novice and I have this simple slideshow/gallery code that works great, that I've used in a few web projects:

function f_slideShow(){
    var v_fadeTime = 600;
    var v_active = $("#divPFpics IMG.active");
    var v_next =  v_active.next().length ? v_active.next() : $("#divPFpics IMG:first");

    if (v开发者_JAVA百科_active.length == 0) 
        {
            v_active = $("#divPFpics IMG:last");
            v_active.addClass("last-active");
        }

    v_next.css({opacity: 0.0})
        .addClass("active")
        .animate({opacity:1.0}, v_fadeTime, function() {
            v_active.removeClass("active last-active");
    });
}

My current project uses a long list of images that are categorized by CSS classes. As it is now, this slideshow cycles through ALL my images.

My question: How and where do I put a .filter() method so that this code cycles through ONLY the images containing the chosen CSS class? I've gotten everything else working in the gallery and this is killing me so I'm finally turning to Stackoverflow. Thanks all!

var v_active = $("#divPFpics IMG.active");
var v_next =  v_active.next().length ? v_active.next() : $("#divPFpics IMG:first");

Those line are critical, they build the list that your slideshow will cycle through.

Although it's not shown, I suppose your function is called every x seconds.

v_active is the image currently being shown.

v_next is the image following it in the DOM.

You could do it this way :

var v_active = $("#divPFpics IMG.active");
var v_next = v_active.next().length ? v_active.next() : $("#divPFpics IMG:first");
while (!v_next.hasClass('yourClassName')) {
  v_next = v_active.next().length ? v_active.next() : $("#divPFpics IMG:first");
} 

However, I'd advise you to not use this solution like that : if none of your img have the required class, you'll loop endlessly.

If you really want to use .filter, you'll have to rewrite those line. This is due to the way the next image is selected. You'll have to find a way to save the position of the currently active image, select your image set ($('divPFpics').filter(...)) and pick the next one.