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

[Violet_82]

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). (Apologies if the formatting is not correct but I am having terrible problems with this thread, the scrollbar doesn't scroll all the way down to the end so I can't access the bottom part and format it as it should be, sorry)
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

[pritaeas]

hoverThumbnail is attached to a with this as parameter. So the calledFrom parameter is an a DOM element. var $calledFrom = $(calledFrom); changes the DOM element into a jQuery object, so you can easily call jQuery functions on it, and chain them if necessary. get(0) gets the first element, if $calledFrom happens to be an array, which I doubt it is.

[Violet_82]

thanks. But how about this get(0)? I mean the loop goes through each a in thumbnail, so it compares $calledFrom to this. Now, if we append get(0) to $calledFrom to get $calledFrom.get(0)) does it mean that we get the value of calledFrom? I mean I just can't understand what the role of thisget(0) is. You said it gets the first element, but if the each() loops through each a in thumbnails, then does get(0) get the index of the element according to each iteration of the loop? What I mean is say I hover on thumbnail 2, then $calledFrom.get(0) corresponds to thumbnail 1 which thanks to the loop, is compared against each a in the div and tested for equality?

[pritaeas]

Yes. It looks like it does that. I have a feeling this code has been adjusted to do something other than it did before, because the get(0) doesn't really make sense, or perhaps I am missing something in it's logic.

[Violet_82]

to be really honest I am glad this is not clear even to you, it makes me feel better : - ) SO I am not that useless with jquery!
The code works fine though. I run some tests and if I remove theget(0) from both or even from one, nothing works anymore, so somehow this get(0) is doing something really important. I kind of understand what it does, but if I need to get down to the specifics, then I don't quite understand it. I mean I know that the each() function loops through each a and compares the one we hovered on ($calledFrom) with all the a's. But that get(0) does something and without it the script doesn't work

[pritaeas]

When I have the time, I'll run your example and try to figure it out in detail.

[Violet_82]

fantastic thanks, I won't close this post then