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
