How to highlight views result?

Question

I have a view that shows me a list of images on the front page. Each of those images has its category. Now i need to add exposed filter with categories that allow users to choose images by categories. BUT I want to show all images and just to highlight (by adding CSS class for example) the exposed filter results. Is it a way to do it?

I'm using Drupal 7.

Answer 1

You will need jQuery to make this work but it shouldn't be too complicated. Basically the exposed filter acts as the degraded (non-javascript) version as well as giving you all the possible category options.

$('.views-exposed-form .views-submit-button input').hide();
$('.views-exposed-form select').change(function(event) {
  // Clear previous highlights
  $('.highlight').removeClass('highlight');

  // Get the selected category
  var selectedCategory = $(this).find('option:selected').text();

  // Use the category name to find items on the page
  $('.views-field-term-node-tid .field-content a:contains(' + selectedCategory + ')').parents('.views-row').addClass('highlight');
});

I made this example with a view with fields and the "Content: All taxonomy terms (All taxonomy terms)" field limited by taxonomy. If you use a different method of creating the view you will want to change .views-field-term-node-tid .field-content and probably also the .parents('.views-row') which is what gets highlighted.

You'll also probably want an additional selector in front of all the .views-exposed-form selectors in case you add more exposed forms to you sight such as $('.my-view .views-exposed-form')...

I also made this to trigger on the select change, but you could do it when clicking the Apply button (which you would obviously not want to hide then).

If you exposed filter is a multiple select you can add an each() to the end of $(this).find('option:selected') and loop through getting the text and setting the highlight.

Answer 2

Try adding the category names of the images to the classes the view outputs for each image, by rewriting the output of the image field and the use jQuery to addClass to items with classes matching those in your filter. For example:

Your views output

<div class="views-row category4"><img src="#"/></div>    

Your filter

<ul>
    <li id="category4">Cat4</li>
</ul>

Your js:

$('#category4').click(function(e){
    e.preventDefault();
    var cls = $('this').attr('id');
    $('views-row'+.cls).addClass('highlight');
});