JS newbie: how to execute part of the HTML after clicking on a button
<p>I am fairly new to JS and jQuery and I am stuck with this.</p>

<p>I am doing an ecommerce and I have a page showing the details of a product.
I have a <strong>carousel of thumbnail</strong>. If you click on the thumbnail, the main image gets substituted with the selected one.</p>

<p>Then, in another portion of the page, I have some little <strong>color boxes</strong>: if you select one of them (e.g. Red), the list of thumbnails gets filtered and shows only the Red thumbnails. This is done via a custom script that matches the class value of the color boxes to the class value of the thumbnail images.</p>

<p>What I am struggling with is trying to show the bigger image of the selected color too.
The correct use case would be:</p>

<ol>
<li>User opens product page</li>
<li>The big image viewer shows the Big image, e.g. a photo of
the Red version (corresponding to the first thumbnail in the
carousel) - this is OK </li>
<li>Carousel shows 5 thumbnails, 3 corresponding to the Red version of the product, 2 to the yellow one - this is OK</li>
<li>user plays with the carousel: a click on a thumbnail triggers the
corresponding big image - this is OK </li>
<li>User decides to filter by colour and clicks on the Yellow little color box - this is OK</li>
<li>Carousel gets filtered and shows only the thumbnail of the yellow version of the product - this is OK </li>
<li>At the same time as 5. the big image corresponding to the first thumbnail in the filtered list
shoud be triggered and should pop up in the big image viewer - this is what I am struggling with.</li>
</ol>

<p>Here's the <strong>code of the big image viewer + carousel</strong>:</p>

<pre><code>&lt;div id="product"&gt;
    &lt;!-- BIG IMAGE VIEWER - The first that gets loaded is the first big image corresponding to  the first thumbnail --&gt; 
    &lt;div id="productimg"&gt;&lt;a href="full_size_red_01.jpg" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false"&gt;&lt;img src="big-red_01.jpg" alt="" title="M1" /&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;!-- END BIG IMAGE VIEWER --&gt; 

    &lt;div id="productdet"&gt;
    &lt;!-- THUMBNAILS CAROUSEL --&gt;
      &lt;ul id="mycarousel" class="jcarousel-skin-tango"&gt;
      &lt;li&gt;&lt;a href='full_size_red_01.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_red_01.jpg' " title='M1'&gt;&lt;img src="thumb_red_01.jpg" alt="M1" class="Rosso/Red" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='full_size_red_02.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_red_02.jpg' " title='M1'&gt;&lt;img src="thumb_red_02.jpg" alt="M1" class="Rosso/Red" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='full_size_red_03.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_red_03.jpg' " title='M1'&gt;&lt;img src="thumb_red_03.jpg" alt="M1" class="Rosso/Red" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='full_size_yellow_01.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_yellow_01.jpg' " title='M1'&gt;&lt;img src="thumb_yellow_01.jpg" alt="M1" class="Rosso/Red" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='full_size_yellow_02.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_yellow_02.jpg' " title='M1'&gt;&lt;img src="thumb_yellow_02.jpg" alt="M1" class="Rosso/Red" /&gt;&lt;/a&gt;&lt;/li&gt;

      &lt;/ul&gt;
    &lt;!-- END THUMBNAILS CAROUSEL --&gt;
    &lt;/div&gt;
</code></pre>

<p>And here's the code of the <strong>color selection tool</strong>:</p>

<pre><code>&lt;div class="controls color"&gt;
    &lt;label class="Rosso/Red"&gt;&lt;input type="radio" name="modifiers[1]" value="1" /&gt; Rosso/Red&lt;/label&gt;                             
    &lt;label class="Giallo/Yellow"&gt;&lt;input type="radio" name="modifiers[1]" value="2" /&gt; Giallo/Yellow&lt;/label&gt;                             
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The thumbnails+big image viewer logic is managed via jcarousel.</p>

<p>The custom js that manages the thumbnails filtering is this:</p>

<pre><code>var select = {
wrapper: null,
controls: null,
resetBtn: $('&lt;p id="reset"&gt;Vedi tutti i colori&lt;/p&gt;'),
images: null,
carousel: null,
carouselBtns: null,
isClickable: false,
init: function(){
    this.carousel = $('#mycarousel');
    this.wrapper = $('#productdet');
    this.controls = $('div.controls');
    this.images = this.wrapper.find('img');

},
filter: function(){
    this.controls.on('click', 'input[type="radio"]', function(){
        select.carouselBtns = select.wrapper.find('div.jcarousel-clip').nextAll('div');
        var filterName = $(this).closest('label').attr('class').split('/')[0],
            filteredImg = select.wrapper.find('img[class*="'+filterName+'"]'),
            itemLen = select.wrapper.find('li').length;

        if( filteredImg.length ){
            select.controls.find('label').removeClass('on');
            $(this).closest('label').addClass('on');

            select.images.closest('li').hide();

            select.wrapper.find('div.jcarousel-clip').nextAll('div.jcarousel-prev').click();
            filteredImg.closest('li').show(0, function(){
                if ( filteredImg.length &lt; 5 ) {//itemLen

                    select.carouselBtns.hide();

                }
            });
        }

        select.isClickable = true;
        select.preventItemAdding();
    });
},
preventItemAdding: function(){
    var add = $('#add');

    if ( !select.isClickable ) {
        add.addClass('off');
    }else{
        add.removeClass('off');
    }
},

resetAll: function(){
    select.resetBtn.click(function(){
        select.controls.find('label').removeClass('on');
        select.images.closest('li').show();
        select.carousel.jcarousel('reload');

        select.carouselBtns.show();
        select.isClickable = false;
        select.preventItemAdding();
    });
}
};
</code></pre>

<p>Any help would be much appreciated.
Thank you!!</p>

<p>SOLUTION</p>

<p>I added a couple of lines in the JS, in the 'filter' function (thanks to @vrutberg):</p>

<pre><code>var imageUrl = $(".jcarousel-item:visible:eq(0) .cloud-zoom-gallery").attr("rel").substr(31).slice(0, -2);
$("#productimg #wrap #zoom1 img").attr("src", imageUrl);
</code></pre>
