WordPress / jQuery Hover Effect for Posts or Images in Same Category

2 Views

I’ve got a WP portfolio site using isotope to filter and sort. It works well; however, one thing I want to do is just not working.

When I hover over an image on the portfolio page, I want it to highlight all other images that are in that category. I can do it by adding each category manually using jQuery. The person whose portfolio it will be will be adding a lot more categories and won’t be able to go in and fiddle with the .js file every time he adds something.

Read More

I’m sure there’s a way, I just don’t know how to write code. I’ve got this and it works nicely, but I’d rather it be able to work dynamically and not have to define the category specifically. 

    $('.portfolio_categories-mood-images').bind('hover', function(e){
    $('.portfolio_categories-mood-images').each(function(i){
    $(this).toggleClass('highlight-all');
    }, function() { $(this).removeClass('highlight-all'); }); });

I’m not sure if I’m making sense. I’m still fairly new with jQuery and Javascript, so thanks in advance for your patience.

Post Views: 2

Related posts

1 comment

  1. REDO:

    Based on your response regarding what your <div> code looks like per image, see if this revision works better. I have notated for clarity:

    <script>
// Use a more general selection type that will grab portfolio images
$(".portfolio_item").hover(
function() {
    // Get the data contained in category
    var ThisData    =   $(this).data('category');
    // Split it with spaces since there are multiple space-separated tags
    var GetClass    =   ThisData.split(" ");
    // Since you have same-name classes as the array value 0 (presumably)
    // you can just use the category value 0 for class name
    $("."+GetClass[0]).addClass('highlight-all');
},
function() {
    // Just remove the class from all elements
    $(".portfolio_item").removeClass('highlight-all');
});
</script>

Comments are closed.