mercredi 19 avril 2017

jQuery - Show / Hide Multiple Images Based on Multiple Checkbox Selections

I am new to Javascript / Jquery, so please bear with me as I try to explain the issue I'm running into.

BASIC SETUP: - #middle div - contains a menu with 4 categories (Artist, Tools, Location, and Style). Each category has multiple checkboxes underneath. - #right div - contains an image gallery of thumbnails that have a grayscale filter at 50% opacity set up in css.

GOAL: When user selects one of the checkboxes of any category, the corresponding images will show/hide based on the selection of checkboxes. On show, the images change to filter none at 100% opacity.

WHAT'S ALREADY WORKING: Each image is assigned 4 classes (one for each category), and will show / hide correctly upon checkbox selection. Upon selection, I also have css hover captions that appear with the .next method below:

Javascript:

$('#ArtistName1').val($(this).is(':checked'));

$('#ArtistName1').change(function() {
if ($(this).is(':checked')) {
$('.cat1').css({filter: 'none', opacity: '1'});
$('.cat1').parent().next().css({opacity: '.8'};
}
else
$('.cat1').removeAttr('style');
$('.cat1').parent().next().removeAttr('style');
});

HTML snippet for checkbox:

<div class="check">
<ul>
<li><input type="checkbox" id="ArtistName1" class="check-custom">
<label for="ArtistName1" class="checkLabel">Artist Name 1</label></li>

HTML for image:

<div class="thumb">
<a href="#"><img src="image.gif" class="cat1 cat2 cat3 cat4" alt=""></a>
<span class="caption"><a href="#">Text here</a></span>
</div>

I'D LIKE TO DO MORE: Each checkbox works fine independently as stated above, but it's not what I want. Let's say the user selects ArtistName1 and then checks the Northeast checkbox in the Location category. I only want the images that share BOTH the selected ArtistName1 and Northeast images to show. Right now all ArtistName1 images show AND all Northeast images show upon selection. I would like to have it set up so that it doesn't matter what or how many selections are made. I've searched different forums but haven't been able to find anything that I can use...




Aucun commentaire:

Enregistrer un commentaire