Category/Tag Selectors

3 Views

Trying to add a portfolio gallery to a custom wp theme I am making. I have exhausted myself on trying to search for solutions and plugins that could even be modified some. I think one of my issues in finding a solution is that I am not entirely sure what search terms would help me find something similar to what I am trying to achieve..

As of right now, I have the following div for my navigation

Read More
<div id="tags" role="navigation">
<p>
<a class="portrait" href="#portrait">Portrait</a> / 
<a class="landscape" href="#landscape">Landscape</a> / 
<a class="sports" href="#sports">Sports</a> / 
<a class="nature" href="#nature">Nature</a> / 
<a class="weddings" href="#weddings">Weddings</a> / 
<a class="active" href="#">All</a>
</p>
</div>

Below my navigation is where I have my images div. What I would like to do is be able to select a category from the images navigation and have only those specifically tagged images show. What I don’t want is to have a new page open up for that tag/selection made. I would like to have the images reorganize or fade in/out for the selected navigation.

Im sure there is a script or plugin out there that would be similar to what I am looking for. Or a little guidance/suggestion on how to best achieve this would be appreciated.

Thanks in advance.

Post Views: 3

Related posts

Leave a Reply

2 comments

  2. Assuming you have a div with an ID of ‘tagImages’, give each image a data-attribute with the same name as the anchor class and this code should work.

    Expected HTML

    <div id="tagImages">
    <img src="/location/image.jpg" data-category="portrait" />
    <img src="/location/image.jpg" data-category="nature" />
    <img src="/location/image.jpg" data-category="nature" />
    <img src="/location/image.jpg" data-category="weddings" />
</div>​

    jQuery Code

    $('#tags').on('click', 'a', function(e) {
    e.preventDefault();
    var cat = $(this).attr('class'),
        $tagImg = $('#tagImages').find('img');
    $tagImg.hide();
    if (cat === 'active') {
        $tagImg.show();
    } else {
        $tagImg.each(function() {
            if ($(this).data('category') == cat) {
                $(this).show();
            }
        });
    }
});​

    Here’s a jsFiddle Example that demonstrates what you’re asking for.