jQuery: After all elements are clicked, modify another
<p>What I know about jQuery is very basic, so bear with me.</p>

<p>I have a table listing several images/thumbnails and each thumbnail has the functionality of zooming in and out. There's also two buttons for "Zoom In" and "Zoom Out" on top of the table in case the user wants to enlarge/shrink all images instead of doing it one by one.</p>

<p>So far I have accomplished being able to:</p>

<ul>
<li>Click on each thumbnail and zoom in/out</li>
<li>Click on the Zoom In button and have all thumbnails enlarge</li>
<li>Click on the Zoom Out button and have all thumbnails shrink</li>
</ul>

<p>What I'm having problems with is:</p>

<p>A. <em>Deactivate</em> the Zoom In button when all thumbnails have been individually zoomed in; then <em>activate</em> the Zoom Out button.</p>

<p>B. <em>Deactivate</em> the Zoom Out button when all thumbnails have been individually zoomed out; then <em>activate</em> the Zoom In button.</p>

<p>I think this can be accomplished with <code>.length()</code>, but I just can't wrap my head around the logic.</p>

<p>I tried this but of course it doesn't work:</p>

<pre><code>$('a.zoom-trigger.shrink').length(function(){
  $('.zin').toggleClass('active');
  $('.zout').toggleClass('active');
});
</code></pre>

<p>Here's a <strong><em><a href="http://codepen.io/rzea/pen/vFzwA" rel="nofollow">Demo in Codepen</a></em></strong>.</p>

<p>Any help is greatly appreciated.</p>

<p><strong>EDIT--</strong></p>

<p>In the demo I used 3 elements but in reality the amount of elements in the table is unknown since all the data is coming from a Data Base.</p>

<hr>

<p>This is the HTML and JavaScript I'm using:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div class="toggle-zoom"&gt;
    &lt;a href="#" class="noclick zin"&gt;Zoom In&lt;/a&gt;
    &lt;a href="#" class="noclick zout active"&gt;Zoom Out&lt;/a&gt;                        
&lt;/div&gt;  

&lt;table data-filter="#filter-logos" class="footable"&gt;
    &lt;thead&gt;                         
        &lt;tr&gt;
            &lt;th data-sort-ignore="true"&gt;Thumbnail&lt;/th&gt;
            &lt;th data-sort-ignore="true" title="Sort list"&gt;Description&lt;/th&gt;
            &lt;th title="Sort list"&gt;File Name&lt;/th&gt;
            &lt;th title="Sort list"&gt;File Type&lt;/th&gt;
            &lt;th data-type="numeric" title="Sort list"&gt;File Size&lt;/th&gt;
            &lt;th data-sort-ignore="true"&gt;Download&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td class="txt-center img-cell"&gt;
                &lt;a href="#" class="noclick zoom-trigger link-cell" title="Zoom"&gt;&lt;img src="http://placebear.com/g/800/200" alt="" class="tn small"&gt;&lt;/a&gt;
            &lt;/td&gt;
            &lt;td&gt;Logo  horizontal&lt;/td&gt;
            &lt;td&gt;logo-h.eps&lt;/td&gt;
            &lt;td&gt;EPS&lt;/td&gt;
            &lt;td class="txt-right"&gt;10KB&lt;/td&gt;
            &lt;td class="txt-center p0"&gt;
                &lt;a href="#" class="noclick db ir link-cell download" title="Download"&gt;Download&lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="txt-center img-cell"&gt;
                &lt;a href="#" class="noclick zoom-trigger link-cell" title="Zoom"&gt;&lt;img src="http://placebear.com/g/800/201" alt="" class="tn small"&gt;&lt;/a&gt;
            &lt;/td&gt;
            &lt;td&gt;Logo  horizontal&lt;/td&gt;
            &lt;td&gt;logo-h.eps&lt;/td&gt;
            &lt;td&gt;EPS&lt;/td&gt;
            &lt;td class="txt-right"&gt;10KB&lt;/td&gt;
            &lt;td class="txt-center p0"&gt;
                &lt;a href="#" class="noclick db ir link-cell download" title="Download"&gt;Download&lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="txt-center img-cell"&gt;
                &lt;a href="#" class="noclick zoom-trigger link-cell" title="Zoom"&gt;&lt;img src="http://placebear.com/g/800/202" alt="" class="tn small"&gt;&lt;/a&gt;
            &lt;/td&gt;
            &lt;td&gt;Logo  horizontal&lt;/td&gt;
            &lt;td&gt;logo-h.eps&lt;/td&gt;
            &lt;td&gt;EPS&lt;/td&gt;
            &lt;td class="txt-right"&gt;10KB&lt;/td&gt;
            &lt;td class="txt-center p0"&gt;
                &lt;a href="#" class="noclick db ir link-cell download" title="Download"&gt;Download&lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>//Zoom
$('.zoom-trigger').click(function(){
    $(this).find('img').toggleClass('small');
    $(this).toggleClass('shrink');
});

    //Zoom In
    $('.zin').click(function(){
        $('.zoom-trigger').addClass('shrink');
        $('.tn').removeClass('small');
        $(this).addClass('active').siblings().removeClass('active');
    });

    //Zoom Out
    $('.zout').click(function(){
        $('.zoom-trigger').removeClass('shrink');
        $('.tn').addClass('small');
        $(this).addClass('active').siblings().removeClass('active');
    });

/*Active correct zoom button when all thumnails have been clicked*/
/*
$('a.zoom-trigger.shrink').length(function(){
  $('.zin').toggleClass('active');
  $('.zout').toggleClass('active');
});
*/

//Prevents default action of links
$('.noclick').click(function(e) {
    e.preventDefault();
});
</code></pre>

<p>Again, here's a <strong><em><a href="http://codepen.io/rzea/pen/vFzwA" rel="nofollow">Demo in Codepen</a></em></strong>.</p>

<p>Thanks again.</p>
