Question

I’m trying to implement a few sections on my personal site to show/hide certain images. Ex: Print / Web / UI / ALL. Once one if these are clicked, it will hide everything BUT that link. Does anyone know of a somewhat simple way to do this using jQuery? Here is my code is set up now:

<div class="boxgrid slideright">
<img class="cover" src="images/xxx.jpg"/>
<h3>Some title</h3>
<p>some text<br/><a href="images/xxx.jpg" rel="group" 
     class="fancybox">View &raquo;</a>  </p>    
</div>

I’ve looked online and SO and have had no luck. Sorry if I missed something somewhere and thanks in advance!

Answer 1

Here’s a simple implementation that works well enough to give you an idea for development:

$('#controls li a').click(
    function(e){
        e.preventDefault();
        var that = this,
            $that = $(that),
            id = that.id,
            gallery = $('#gallery');
        if (id == 'all') {
            gallery.find('img:hidden').fadeIn(1000);
        }
        else {
            gallery.find('img.' + id + ':hidden').fadeIn(1000);
            gallery.find('img').not('.' + id).fadeOut(1000);
        }
    });​

This is based on the following HTML structure:

<ol id="controls">
    <li><a href="#" id="web">Web</a></li>
    <li><a href="#" id="canvas">Canvas</a></li>
    <li><a href="#" id="print">Print</a></li>
    <li><a href="#" id="all">All</a></li>
</ol>
<div id="gallery">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" class="web" />
    <img src="http://davidrhysthomas.co.uk/img/mandark.png" class="canvas" />
    <img src="http://davidrhysthomas.co.uk/img/drPooh2.png" class="print" />
</div>

JS Fiddle demo.

References:

• click().
• event.preventDefault().
• fadeIn().
• fadeOut().
• find().
• not().