Channel Search - Search by Color

ajax-color.html

{exp:channel_search:results id="Color Search" orderby="color_proximity" sort="asc"}
	
	{if no_results}
		<p>There are no matching photos found.</p>
	{/if}

	{if has_searched}
		{color_photo}
	{/if}
	
{/exp:channel_search:results}

index.html

<h3>Colors</h3>

<div class="color-swatch">
	<a href="#" data-color="red"></a>
	<a href="#" data-color="orange"></a>
	<a href="#" data-color="yellow"></a>
	<a href="#" data-color="green"></a>
	<a href="#" data-color="blue"></a>
	<a href="#" data-color="indigo"></a>
	<a href="#" data-color="violet"></a>
</div>

<hr>

<h3>Results</h3>

<div class="results">Select a color from the list above</div>

<style type="text/css">
	
	.results img { width: 150px; margin-right: 20px; }

</style>

<script type="text/javascript">

	$(document).ready(function() {

		var $results = $('.results');

		function searchColor(color) {
			$results.html('Loading....');
			$.get('/channel-search/ajax-color', {color: color}, function(data) {
				$results.html(data);
			});
		}

		$('.color-swatch a').each(function() {
			var $t     = $(this);
			var parent = $t.parent();
			var color  = $t.data('color');

			$t.css('background', color);

			$t.click(function(e) {
				searchColor(color);
				parent.find('a').removeClass('active');
				$(this).addClass('active');
				e.preventDefault();
			});
		});

	});

</script>