problems understanding jquery methods in script: get(), and variables

[dupalo]

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;
}

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);
        }
      });
}

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.
In here:

$(document).ready(function(){
  $('.thumbnails')
    .mouseleave(function(){
        resetThumbnails();
      })
    .find('a').hover(function(){
        hoverThumbnail(this);
      });
});

we select the thumbnails div and on mouseleave we run the resetFunction, fine. The we find the a tag and on hover we run the hoverThumbnail function passing a parameter
'this'. Now, I assume that 'this' stands for the a tag, as in the a tag is what's passed to the hoverThumbnail, or is it .thumbnails?

Finally the last function:

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);
        }
      });
}

Right. Here the hoverThumbnail function receives a parameter, again not sure what that stands for, either <a> or .thumbnails?

I know things can be done in a different way, but I am not looking for an alternative, I just want to make sure I understand this code perfectly.
This is one of the lines I have problems with: var $calledFrom = $(calledFrom); what does that do? Isn't $calledFrom the same as $(calledFrom)? In other words what
does this assignment do, and what's the advantage of assigning $(calledFrom) to a variable called $calledFrom?

Moving on, we select the <a>'s within the div with a class of thumbnails and for each of them we run a function. Now, this bit

if($(this).get(0) == $calledFrom.get(0)){
          $(this).fadeTo(0,1);
        }
        else {
          $(this).fadeTo(0,0.5);
        }

is meant to be where the fading magic happens: hover on a thumbnail and the selected one keeps the opacity at 1, the rest of the thumbnails instead, as said before. get a 0.5
opacity. Now, I don't quite get how this happens. This if($(this).get(0) == $calledFrom.get(0)){ says that if this (whic refers to thumbnails a) at position 0, so the first
a tag is equal to the a tag (I assume) at position 0 sent as a parameter to the function then it keeps the opacity at 1, if not the opacity is 0.5...don't quite get this bit at all
any suggestion/translation I should say?
thanks a lot as always

[daveVk]

Hi

if($(this).get(0) == $calledFrom.get(0)){

substituting from 2 lines above

if($(this).get(0) == $(calledFrom).get(0)){

but get(0) takes us back to original element, so is same as

if ( this == calledFrom ){

as hoverThumbnail is a global function (short for window.hoverThumbnail), 'this' refers to window, so we have

if ( window == calledFrom ){

as calledFrom is 'a' element this will always be false

[dupalo]

Hi thanks for that, but I am not sure I understand.
Now, my interpretation of this function is slightly different and I have added some alerts here and there to test it.
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);
}
});
}
Basically the hoverThumbnail is called by this function
$(document).ready(function(){
$('.thumbnails')
.mouseleave(function(){
resetThumbnails();
})
.find('a').hover(function(){
hoverThumbnail(this);
});
});

and it is passed a parameter of 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);
}
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.

[daveVk]

this and calledform are Dom elements

$(this) $callFrom and $(callFrom) are jQuery objects represents a list of dom elements.

Comparing 2 separately created jQuery objects will always fail for as they may represent the same Dom elements, but they are separate jQuery objects.

( $(this) == $(this) ) is false
( $(this).get(0) == $(this).get(0) ) is true
( $(this).get(0) == this ) is true
( this == this ) is true
$this = $(this);
( $this == $this ) is true

The line
if($(this).get(0) == $calledFrom.get(0)){
is more simply
if(this == calledFrom ){
as .get(0) gets first dom element is jQuery object, that is $(this).get(0) returns this ditto for calledFrom.

My assertion about this being window is wrong, as I see you are looping thru each thumbnails link

$('.thumbnails a').each(function(){

so all but but calledFrom fade to 0.5