4/18/2014 - 10:34 AM


jQuery(document).ready(function($) {

  function initialLoad () {

		$('.taxonomies h3').html('Select one or more tags, then press <em>&ldquo;Search Tags&rdquo;</em>');
		$('.taglist').before('<div class="searchcontrols"><span>Find photos with </span><a id="any" class="tagtoggle selected">any</a><span class="slash"> / </span><a id="all" class="tagtoggle">all</a><span> of the selected criteria</span></div>');	

		$('.taxonomies').append('<div><a class="searchtags">Search Tags</a></div>');	


	$('.taglist a').bind('click', function(event) {

		if ( $(this).hasClass('selectedtag') ) {
		} else {


	function searchTags() {
		var optionTexts = [];
		$('.selectedtag').each(function() { 
			var str = $(this).attr('class').replace(/\sselectedtag+/g, '');

		if ( $('#any').hasClass('selected') ) {
			var param = 'tag';
			var separator = ',';
		} else {
			var param = 'tdo_tag';
			var separator = '+';			

		var tagstring = optionTexts.join(separator);
		window.location = '/?' + param + '=' + tagstring;


	$('.tagtoggle').bind('click', function(event) {

	$('.searchtags').bind('click', function(event) {

<!-- Note that this file demonstrates what you'll want your HTML to look like. You don't need to make a copy of this on your site. -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<title>WordPress jQuery Tag Search</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.2.1'></script>
<script type='text/javascript' src='tagsearch.js'></script>


<div class="taxonomies">
  <h3 id="tags">Tags</h3>
	<div class="taglist">
		<a href='/tag/35mm' title='35mm Tag' class='35mm'>35mm</a>
		<a href='/tag/advertising' title='advertising Tag' class='advertising'>advertising</a>
		<a href='/tag/alley' title='Alley Tag' class='Alley'>alley</a>
		<a href='/tag/animals' title='Animals Tag' class='Animals'>animals</a>
		<a href='/tag/art' title='art Tag' class='art'>art</a>
		<a href='/tag/autumn' title='autumn Tag' class='autumn'>autumn</a>
		<a href='/tag/balcony' title='balcony Tag' class='balcony'>balcony</a>
		<a href='/tag/bank' title='bank Tag' class='bank'>bank</a>
		<a href='/tag/baseball' title='baseball Tag' class='baseball'>baseball</a>
		<a href='/tag/beer' title='beer Tag' class='beer'>beer</a>
		<a href='/tag/bikes' title='bikes Tag' class='bikes'>bikes</a>
		<a href='/tag/billboard' title='billboard Tag' class='billboard'>billboard</a>
		<a href='/tag/birds' title='birds Tag' class='birds'>birds</a>
		<a href='/tag/blue' title='blue Tag' class='blue'>blue</a>
		<a href='/tag/blues' title='blues Tag' class='blues'>blues</a>
		<a href='/tag/boat' title='boat Tag' class='boat'>boat</a>
		<a href='/tag/boats' title='boats Tag' class='boats'>boats</a>
		<a href='/tag/bokeh' title='bokeh Tag' class='bokeh'>bokeh</a>
		<a href='/tag/brick' title='brick Tag' class='brick'>brick</a>
		<a href='/tag/bridge' title='bridge Tag' class='bridge'>bridge</a>
		<a href='/tag/buildings' title='buildings Tag' class='buildings'>buildings</a>
		<a href='/tag/bus' title='bus Tag' class='bus'>bus</a>
		<a href='/tag/butterfly' title='butterfly Tag' class='butterfly'>butterfly</a>
		<a href='/tag/camera' title='camera Tag' class='camera'>camera</a>
		<a href='/tag/cats' title='cats Tag' class='cats'>cats</a>
		<a href='/tag/chair' title='chair Tag' class='chair'>chair</a>
		<a href='/tag/city' title='city Tag' class='city'>city</a>

<p>Note: This is a demo of the UI only; the search doesn't actually return results.</p>

body {background: #000; font-family: sans-serif; color: #999; font-size: 14px;}  

a {color: #fff; text-decoration: none;}
a:hover {text-decoration: underline;}

h3 {font-size: 18px; font-weight: 300; background: #999; color: #fff; text-shadow: 0 1px 0 #666; padding: .5em 1em; margin: 0;  -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px;}

p { text-align: center;}

/* Taxonomies */

.taxonomies {background: rgb(183,183,183); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; overflow: hidden; clear: both; width: 800px; margin: auto; text-align: left;}

.taxonomies a {color: #333;}

.catlist {list-style: none; margin: 0; padding: 0; overflow: hidden; list-style: none;  padding: 0 .5em .5em .5em;}
.catlist a {display: block; float: left; width: 165px; margin: 0; padding: .25em;}

.taglist { padding: .25em; overflow: hidden; background: #ccc; font-size: 13px; }
.taglist a {display: block; float: left; -webkit-border-radius: 4px; -moz-border-radius: 4Px; border-radius: 4px; padding: 5px 10px; margin: .125em;}
.taglist a.selectedtag { background: #666; color: #fff; -moz-box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); -webkit-box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); text-shadow: 0 1px 0 rgba(0,0, 0, 0.5);}

.searchcontrols { color: #000; overflow: hidden; padding-left: 1.2em; font-size: 12px; clear: both; }

.searchcontrols span {float: left; margin: 0; padding: .4em 0 .4em 0; margin: .5em 0; }
.searchcontrols span.slash {display: none;}

.searchcontrols a { float: left; padding: .3em .6em; margin: .5em 0;}
.searchcontrols a:hover {cursor: pointer;}
.searchcontrols a.selected {background: #666; color: #fff; -moz-box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); -webkit-box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); text-shadow: 0 1px 0 rgba(0,0, 0, 0.5); border-color: #333;}

#any {-webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top: 1px solid #888; border-bottom: 1px solid #888; border-left: 1px solid #888; margin-left: .4em;}

#all {-webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top: 1px solid #888; border-right: 1px solid #888; border-bottom: 1px solid #888; margin-right: .4em;}

a.searchtags {font-weight: 600; text-shadow: 0 1px 0 #666; padding: .6em 1.2em; margin: 0; background: #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#666'); background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#666)); background: -moz-linear-gradient(top,  #999,  #666); float: right; margin-left: 1em; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; color: #fff; font-size: 14px;}
a.searchtags:hover {cursor: pointer;}

function showalltags() {
  $tags = get_tags();
	foreach ($tags as $tag){
		$tag_link = get_tag_link($tag->term_id);
		$html .= "<a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>";
		$html .= "{$tag->name}</a>";
	echo $html;