4

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.

  • 1
    I don't see how Views could do this out of the box as filters do just that; filter results. However, with a bit of theme_select() on your categories and some jQuery listening and .addClass()ing, you could easily craft together a little block to do what you want. – Jimajamma Sep 2 '13 at 20:02
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.

  • Any luck Yauheni Ioksha? – sagannotcarl Sep 21 '13 at 20:39
0

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');
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.