Hi peeps, I wonder if you can help me at all undertanding this code. Unfortunately I don't have it live anywhere, it is something I have seen somebody working on Here's the code and I will explain breifly what it does and what's not clear (which needless to say is in the jquery script). HTML <link rel="stylesheet" type="text/css" href="style_images.css"><!-- MY CSS --> <script type="text/javascript" src="assets/big_images.js"></script> <div class="content_wrap"> <div id="bodycopy97681"><h1 style="font-size:120%">See the range on offer</h1><br> <div class="car_model_description"> <div class="compare_button"> <a href=#><img src="assets/compareBTN.png" alt=""></a> </div> <h3 id="caption_title"></h3> <p class="caption" id="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet nisi gravida lacus tempor semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p> </div> <div class="image_container"> <img src="assets/placeholder.jpg" alt=" placeholder car" id="placeholder_image" width="940" height="366"> <img src="assets/image_1.png" alt="car1" class="image_invisible" width="940" height="366"> <img src="assets/image_2.png" alt="car2" class="image_invisible" width="940" height="366"> ... </div><!-- END OF image_container --> <div class="thumbnails"> <div class="thumbnails_row"> <a onclick="changeImage(this,'assets/image_1.png')"> <img src="assets/thumb1.jpg" alt=""> <span>Car1</span> <h3>Car1</h3> <p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna tellus, scelerisque dictum vulputate et, posuere scelerisque mi. Morbi eu purus libero.</p> </a> <a onclick="changeImage(this,'image_2.png')"> <img src="assets/thumb2.jpg" alt=""> <span>car2</span> <h3>car2</h3> <p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna tellus, scelerisque dictum vulputate et, posuere scelerisque mi. Morbi eu purus libero.</p> </a> ... <div class="clear"></div> </div><!-- END OF ROW --> </div><!-- END OF THUMBNAILS --> CSS .image_container{ background:url('ajax-loader-black.gif') no-repeat 50% 50%; width:940px; border:1px solid blue; margin:0 auto; } .image_invisible{display:none} .image_visible{display:block} .clear{clear:both;} .thumbnails{ width:820px; /*border:1px solid red;*/ margin:10px auto; } .car_model_description p{ font-size:1.2em; text-align:left; /*padding-bottom:16px;*/ width:600px; } .car_model_description h3{ text-align:left; } .car_model_description{ position:relative; padding-right:215px; width:725px; min-height:70px; } .compare_button { position:absolute; width:215px; top:50%; right:0; } .thumbnails_row{ /*border:1px solid green;*/ width:940px; margin-top:10px; } .thumbnails_row img{ cursor:pointer; } .thumbnails_row h3, .thumbnails_row p { display:none; } .thumbnails_row a span{ display:block; text-align:center; } .thumbnails_row a{ display:inline-block; margin-right:25px; } HTML: SCRIPT function changeImage(calledFrom, big_image){ var newImage = $('#placeholder_image'); var newTitle = $(calledFrom).find('h3').html(); var newText = $(calledFrom).find('p').html(); newImage.attr('src', big_image); $('.car_model_description') .find('h3').html(newTitle).end() .find('p').html(newText); } function resetThumbnails(){ $('.thumbnails a').each(function(){ $(this).stop(true, true).fadeTo(500,1); }); } $(document).ready(function(){ $('.thumbnails') .mouseleave(function(){ resetThumbnails(); }) .find('a').hover(function(){ hoverThumbnail(this); }); }); function hoverThumbnail(calledFrom){ var $calledFrom = $(calledFrom); $('.thumbnails a').each(function(){ if($(this).get(0) == $calledFrom.get(0)){ $(this).fadeTo(0,1); } else { $(this).fadeTo(0,0.5); } }); } Code (markup): Right. Just to clarify, the HTML and the css produce a centred container which has a placeholder image. Below the container there is a list of <a></a> tags containing: 1 thumbnail image, 1 <h3> and 1 paragraph (by the way there are only 2 thumbnails in the example above but the real one has around 20 of them all properly styled with css). The idea is that by clicking one of the thumbnails, the big placeholder image in the big div will change to the corresponding image stored in the image_container div which has a class of image_invisible. The script brings things further by creating some nice fade effect so that when you hover on one of the thumbnails the hovered on keeps the opacity at 1, all the other ones will fade to opacity of 0.5. Finally when you then move the mouse away all the thumbnails will all go back to opacity 1. Now, main problem is the script, there are few things that I would like to get clarified please. The first bit when we change the src of the image is fairly straighforward. The function resetThumbnails gets the a tags in the thumbnails div and for each of them it stops the animation and resets the opacity to 1. What I am having problems with is the last bit, this one: $(document).ready(function(){ $('.thumbnails') .mouseleave(function(){ resetThumbnails(); }) .find('a').hover(function(){ hoverThumbnail(this); }); }); function hoverThumbnail(calledFrom){ var $calledFrom = $(calledFrom); $('.thumbnails a').each(function(){ if($(this).get(0) == $calledFrom.get(0)){ $(this).fadeTo(0,1); } else { $(this).fadeTo(0,0.5); } }); } Code (markup): So here's my interpretation inplain english (and questions too) of it: in the call to the hoverThumbnail function - hoverThumbnail(this) - we pass the paramenter 'this' which represents the <a> tags inside the thumbnails div. The parameter received by hoverThumbnail - calledFrom - is then assigned to a variable var $calledFrom, although I am not sure about the purpose of this assignment. ANyway, moving on with this $('.thumbnails a').each(function(){ we effectively say that for each <a> tag we will run a function. In here instead if($(this).get(0) == $calledFrom.get(0)){ $(this).fadeTo(0,1); } else { $(this).fadeTo(0,0.5); } Code (markup): my interpretation is that we compare the a tag we hovered on ($calledFrom.get(0))) with the a tags in the thumnails div, looping through each of them: let's take a sample run. Say we hover on the second thumbnail then the loop starts and the first comparison is if($(this).get(0) == $calledFrom.get(1): so second thumbnail (index 1) gets compared to the first thumbnail (index 0). If different - and they are because we hovered on the second one - then the opacity goes down to 0.5. When the loop moves to the second element if($(this).get(1) == $calledFrom.get(1) it finds that the 2 a's are the same therefore it leaves the opacity of it to 1. And so on till it loops through each element. In all this what I am really struggling to understand is why we need the get(0). I have removed it temporarily and the script doesn't work anymore, almost as if this comparison if($(this) == $calledFrom returned false all the time changing the opacity of every thumbnail a to 0.5. thanks