Question

I’ve already got a background image. But i’m builid a gallery which would have different categories. If i select a category the images would load up in little squares and then when i select any of them i want it to change a named id’s content…

e.g.

Any good tips would be appreciated immensely.

What i’m trying to do are two items.

1. Change the color of the navigation box to a solid color.

2. change the image source of an id “grouptabs” when clicked

   <div id="random">
<img id="grouptabs" src="/u/i/1920x1200.jpg" />
</div>

This is what i’m trying to get to…
Thanks for all your suggestions

Answer 1

Generally this is what you’re looking for:

$('.thumbnail').click(function(e) {
  e.preventDefault(); // don't execute the link
  $(.thumbnail').css('background-color', 'none'); // reset all BG colors
  $(this).css('background-color', '#00FF00'); // fill BG of clicked elements parent (the p-element).

  var imghref = $(this).attr('href'); // get the image src from the href
  $('#grouptabs').attr('src', imghref);  // set the image src for #grouptabs
});

This works with a setup like:

1
2
3
4

So the image is being loaded in grouptab (the full size). In CSS you should specify that an a-element within class thumbnails is having a border and no bgcolor. The BG color is handled by the jquery click event.

Hopefully this helps.

// EDIT: try this:

$('.crafty').click(function(e) {
  e.preventDefault();
  $('.foliolist').css('background-color', 'transparant'); // set all foliolist items bg color to transparant
  $(this).parent().css('background-color', '#FFFFFF');
  $('#grouptabs').attr('src', $(this).attr('href'));
});

I’m not sure if you are using this setup:

<div class="foliolist"><a href="img/dir/file.jpg"></a></div>
<div class="foliolist"><a href="img/dir/file.jpg"></a></div>
<div class="foliolist"><a href="img/dir/file.jpg"></a></div>

or

<div class="foliolist">
  <a href="img/dir/file.jpg"></a>
  <a href="img/dir/file.jpg"></a>
  <a href="img/dir/file.jpg"></a>
</div>

Because there is a difference. In the first case my scripts works. In the second, you need the style (background-color) applied to $(this) instead of $(this).parent()