I have a jQuery filter built that sorts elements by 2 different sets of criteria, Market Sector and Project Type. Each set of criteria uses an unordered dropdown list with anchor tags.
What I'd like to do now is add the same on click filter functionality to a group of images on the page for the Market Sector criteria only.
For example, I currently have 6 different market sectors. On initial page load, 6 images load (inside of a div with class 'category-images), one representing each market sector. From there the user can either click on one of the images to filter the list of projects by that market sector, OR they can use the unordered list dropdowns to filter projects.
I have tried adding 'div.category-images a' to the click function but that doesn't work. I have also attempted setting up a separate function entirely for the category images with little success.
jQuery code:
// click function for unordered list dropdowns
$("ul.filter li a").click(function()
{
$(this).closest('ul').find('a').removeClass('selected');
$(this).addClass('selected');
var marketSector = $('ul#marketSector li a.selected').data('value');
var projectType = $('ul#projectType li a.selected').data('value');
var marketSectorSelector = '';
var projectTypeSelector = '';
if (marketSector === "all" && projectType === "all")
{
//show all items
$(".project").delay(200).fadeIn(400);
//show the viewing all text and hide the others
$("div.nowviewing-all").show();
$("div.nowviewing-marketsectors, div.nowviewing-market-project").hide();
}
else
{
if (projectType !== "all")
{
projectTypeSelector = '.' + projectType;
}
if (marketSector !== "all")
{
marketSectorSelector = '.' + marketSector;
}
$(".project").fadeOut('fast');
$(projectTypeSelector + marketSectorSelector).delay(200).fadeIn(400);
//show the viewing market/project text and hide the others
$("div.nowviewing-market-project").show();
$("div.nowviewing-marketsectors, div.nowviewing-all").hide();
}
});
// put the current category text into the viewing all text
$('ul#marketSector div.dropdown li a').bind("click touch", function (){
$('div.nowviewing-market-project span.current-marketsector').text( $(this).text() );
});
$('ul#projectType div.dropdown li a').bind("click touch", function (){
$('div.nowviewing-market-project span.current-projecttype').text( $(this).text() );
});
/* -------------------------------------------------------- */
/* Portfolio - Show/Hide Category Images on load & filter
/* -------------------------------------------------------- */
$('ul.filter li a').click(function(){
$('div.category-images').hide();
$('div#sorter').show();
});
$('div.category-images a img, div.category-images a h3').click(function(){
$('div.category-images').hide();
$('div#sorter').show();
});
/* -------------------------------------------------------- */
/* Filter Dropdowns
/* -------------------------------------------------------- */
$("ul#projectType span.filtertext").click(function(){
$("ul#projectType div.dropdown").fadeToggle('fast');
$("ul#marketSector div.dropdown").hide();
return false;
});
$("ul#marketSector span.filtertext").click(function(){
$("ul#marketSector div.dropdown").fadeToggle('fast');
$("ul#projectType div.dropdown").hide();
return false;
});
// hide dropdowns if anywhere else is clicked
$(document).click(function() {
$('ul.filter div.dropdown').hide();
});
Here is my attempt at a new function (buggy at best) $("div.category-images a").click(function() { $('ul.filter li a').closest('ul').find('a').removeClass('selected'); $(this).addClass('selected');
var marketSectorBox = $('div.category-images a.selected').data('value');
var marketSectorSelectorBox = '';
var projectTypeSelectorBox = '';
if (marketSectorBox === "all")
{
//show all items
$(".project").delay(200).fadeIn(400);
}
else
{
if (marketSectorBox !== "all")
{
marketSectorSelectorBox = '.' + marketSectorBox;
}
$(".portfoliogrid").fadeOut('fast');
$(projectTypeSelectorBox + marketSectorSelectorBox).delay(200).fadeIn(400);
}
});
Finally, HTML
<div class="nowviewing-marketsectors">
<p>Viewing <span>Market Sectors</span></p>
</div>
<div class="nowviewing-all">
<p>Viewing <span>All Projects</span></p>
</div>
<div class="nowviewing-market-project">
<p>Viewing <span class="current-marketsector">All Market Sectors</span> and <span class="current-projecttype">All Project Types</span> Projects</p>
</div>
<!-- PROJECT TYPE DROPDOWN -->
<ul class="filter" id="projectType">
<span class="filtertext"><span>Project Type</span><img class="filter_drop" src="http://localhost:8888/rh/wp-content/themes/rh_construction/images/filter_drop.gif" /> </span>
<div class="dropdown">
<li><a class="selected" data-value="all">All Project Types</a></li>
<li><a data-value="ground-up">Ground Up</a></li><li><a data-value="historic-renovation-rehabilitation">Historic Renovation</a></li>
<li><a data-value="remodel">Remodel</a></li>
<li><a data-value="sustainable">Sustainable</a></li>
<li><a data-value="tenant-improvement">Tenant Improvement</a></li></div>
</ul>
<!-- MARKET SECTOR DROPDOWN -->
<ul class="filter" id="marketSector">
<span class="filtertext"><span>Market Sector</span><img class="filter_drop" src="http://localhost:8888/rh/wp-content/themes/rh_construction/images/filter_drop.gif" /></span>
<div class="dropdown">
<li><a class="selected" data-value="all">All Market Sectors</a></li>
<li><a data-value="automotive">Automotive</a></li>
<li><a data-value="community">Community</a></li>
<li><a data-value="custom-homes">Custom Homes</a></li>
<li><a data-value="education">Education</a></li><li><a data-value="office">Office</a></li>
<li><a data-value="wineries-breweries">Wineries & Breweries</a></li>
</div>
</ul>
<!-- Filter Images on Landing -->
<div class="category-images">
<!-- Market Sector 1 -->
<div class="portfoliogrid project large-6 columns end nopadding">
<a href="javascript:void(0)" data-value="automotive">
<img src="http://localhost:8888/rh/wp-content/uploads/2013/05/auto.jpg" />
<h3>Automotive</h3></a>
</div>
<!-- Market Sector 2 -->
<div class="portfoliogrid project large-6 columns end nopadding">
<a href="javascript:void(0)" data-value="community">
<img src="http://localhost:8888/rh/wp-content/uploads/2013/05/keen-thumb2.jpg" />
<h3>Community</h3></a>
</div>
<!-- Market Sector 3 -->
<div class="portfoliogrid project large-6 columns end nopadding">
<a href="javascript:void(0)" data-value="custom-homes">
<img src="http://localhost:8888/rh/wp-content/uploads/2013/05/brew.jpg" />
<h3>Custom Homes</h3></a>
</div>
<!-- Market Sector 4 -->
<div class="portfoliogrid project large-6 columns end nopadding">
<a href="javascript:void(0)" data-value="education">
<img src="http://localhost:8888/rh/wp-content/uploads/2013/05/auto.jpg" />
<h3>Education</h3></a>
</div>
<!-- Market Sector 5 -->
<div class="portfoliogrid project large-6 columns end nopadding">
<a href="javascript:void(0)" data-value="office">
<img src="http://localhost:8888/rh/wp-content/uploads/2013/05/keen-thumb2.jpg" />
<h3>Office</h3></a>
</div>
<!-- Market Sector 6 -->
<div class="portfoliogrid project large-6 columns end nopadding">
<a href="javascript:void(0)" data-value="wineries-breweries">
<img src="http://localhost:8888/rh/wp-content/uploads/2013/05/auto.jpg" />
<h3>Wineries and Breweries</h3></a>
</div>
After this the list of projects appears with classes that match the data values in the filter items. Let me know if you need more information. Thank you!