Question

I’m just starting out with JQuery in a Drupal environment.

I have some thumbnails, and I want it so that when you click one, the bigger picture appears in the “viewport” (a hidden div appears). There might be better ways to accomplish what I am doing, but I need to do it this way.

This is what I have :

$(document).ready(function() {
  //$('#bigpic1').hide(); //show the first big picture always on page load
  $('#bigpic2').hide();
  $('#bigpic3').hide();

 $('a#thumb1').click(function() {
    $('#bigpic2').hide(); $('#bigpic3').hide();
    $('#bigpic3').toggle(200);
     return false;
  });
 $('a#thumb2').click(function() {
    $('#bigpic1').hide(); $('#bigpic3').hide();
    $('#bigpic2').toggle(200);
    return false;
  });
  $('a#thumb3').click(function() {
    $('#bigpic1').hide(); $('#bigpic2').hide();
    $('#bigpic3').toggle(200);
    return false;
  });

});

Besides being some ugly code, it doesn’t work right. The first big picture doesn’t appear when the page does, and clicking on more thumbnails shows the right div – but never hides any (only one big picture is supposed to be visible at a time in the “viewport”).

My HTML looks like this

<table><tr>
  <td><a href="#" mce_href="#" id="thumb1">...thumb1...</td>
  <td><a href="#" mce_href="#" id="thumb2">...thumb2...</td>
  <td><a href="#" mce_href="#" id="thumb3">...thumb3...</td>
</tr>
<tr><td colspan="3">
  <!-- my "viewport" cell -->
  <!-- the big picture displays here -->
  <div  id="bigpic1">... </div>
  <div  id="bigpic2">...</div>
  <div  id="bigpic3">...</div>
</td></tr></table>

Answer 1

The # selector selects an id so you don’t need the type in there. Selectors are on of jQuery’s best features, so get more familiar with them all. http://api.jquery.com/category/selectors/.

You could even do a general method like this (you need to give the <a> elements a name).

<table>
    <tr>
        <td>
            <a href="#" mce_href="#" name="thumb1" id="thumb1">...thumb1...</a>
        </td>
        <td>
            <a href="#" mce_href="#" name="thumb2" id="thumb2">...thumb2...</a>
        </td>
        <td>
            <a href="#" mce_href="#" name="thumb3" id="thumb3">...thumb3...</a>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <!-- my "viewport" cell -->
            <!-- the big picture displays here -->
            <div name="bigpic1" id="bigpic1">...1... </div>
            <div name="bigpic2" id="bigpic2">...2... </div>
            <div name="bigpic3" id="bigpic3">...3... </div>
        </td>
    </tr>
</table>

And the jQuery code.

//on load
$(document).ready(function() {
    $('#bigpic2').hide();
    $('#bigpic3').hide();

    //this will be run when an element has a name with the text "thumb" in it
    $('[name*=thumb]').click(function() {
        //hide all big pictures (loops over every element that has a name with the text "bigpic" in it
        $('[name*=bigpic]').each(function(index, value) {
            if ($(this).is(':visible')) { //if the big pic is visible
                $(this).hide(200); //then hide it
                return false; //found the visible big pic so no need to keep looping
            }
        });
        //show the right image
        $('#bigpic' + $(this).attr('id').replace('thumb', '')).show(200);
    });
});// end on load

This is less code, that is more extensible. It will not need to be changed if you add/remove images.
About thie first image showing on load did you try $('#bigpic1').show(); on document load. Oh and you don’t need to return a value in the functions.