Clicking button changes HTML in 3 places at once?

[jordan.]

I am working on the following page:

 

http://islandrobot.com/tona/board.html

 

 

When I click one of the 3 thumbnails on the left, you see the large image on the right changes accordingly.. I'm using jQuery Tabify to accomplish this.

 

However, if you notice where it says Selected size: 133 I also need this number to change accordingly with each thumbnail. I also need the rel="" attribute of the "Click for more images" link to change as well.

 

Does anyone know how I can accomplish this? By clicking 1 thumbnail, I need 3 parts of the page to change at once.

 

Thanks,

Jordan

[thomastmc]

Nice design. 

 

   Add IDs to quickly select the elements.

<div class="board-sizes">
    <span id="label_selected_sizes">Selected size: <strong>133</strong></span>
    <span>Sizes Available: 133, 138, 142</span>
</div>

<div class="board-thumbs">
    <ul id="list_board_thumbs">
        <li class="active"><a href="#board-red"><img src="images/board-red-thumb.png" alt="Red Board Thumbnail" /></a></li>
        <li><a href="#board-yellow"><img src="images/board-yellow-thumb.png" alt="Yellow Board Thumbnail" /></a></li>
        <li><a href="#board-green"><img src="images/board-green-thumb.png" alt="Green Board Thumbnail" /></a></li>
    </ul>
</div>

<div class="board-gallery-wrapper"> 
    <a id="button_board_gallery" class="board-gallery" rel="133" href="gallery/1.jpg">
        <img src="images/camera.png" alt="Click here for more images" />
        <span>Click for more images</span>
    </a> 
    <div class="hidden"> 
        <a class="board-gallery" rel="133" href="gallery/2.jpg"></a> 
        <a class="board-gallery" rel="133" href="gallery/3.jpg"></a> 
        <a class="board-gallery" rel="133" href="gallery/4.jpg"></a> 
    </div> 
</div>

?

?

 Get all links in the "board-thumbs" list, and have them set their size when clicked. Add html to the "Selected size" span. Use the .attr() function to change the attributes.

var selected_size = 133;

$("#list_board_thumbs").find("a").each(function () {
    $(this).click(function () {
       if(this.href.indexOf("red") != -1) {
           selected_size = 133;
       }
       else if (this.href.indexOf("yellow") != -1) {
           selected_size = 138;
       }
       else if (this.href.indexOf("green") != -1 ) {
           selected_size = 142;
       }
       
       $("#label_selected_sizes").html("Selected size: <strong>" + selected_size + "</strong>");
       $("#button_board_gallery").attr("rel", selected_size);
   });
});

[y0sh]

You've already got tabify working, so let's forget about that. For the other 2 parts of the page, I wrote you a script that does what you need it to. It updates the size text and the rel attribute depending on the product. Just put this code below your .tabify() functions. 

$(document).on("ready", function() {

  var sizes = ["133", "138", "142"];
  var product;
  var size_elem = $(".board-sizes strong");
  var rel_elem = $(".board-gallery");

  $(".board-thumbs").on("click", "a", function() {
    product = $(".board-thumbs a").index(this);
    size_elem.text( sizes[product] );
    rel_elem.attr("rel", sizes[product]);
  });

}