We Keep Coding

jquery mini slider, generate unique id

hello I am new in jquery, in my website I have mini slider please see demo here:
http://kulinari.ge/4x4/en/cars
Here I have two slider, the problem is that the slider is repeated in the second slider images and second slide images repeated first slider images, on hover. there is my jquery code, sorry for my bad english. how i can prevent this?
jQuery(document).ready(function () {
jQuery(".cars-img img").attr("src", jQuery(".img-log img").eq(0).attr("src"));
jQuery(".img-log img").eq(0).attr("class", "active");
jQuery(".img-log img").hover(function () {
jQuery(".cars-img img").attr("src", jQuery(this).attr('src'));
jQuery(".img-log img").removeAttr("class", "active");
jQuery(this).attr('class', 'active');
});
});
there is html
<div class="cars-img">
<img src="big image link" alt=""/>
</div>
<div class="img-smol">
<div class="img-log">
<a href="#">
<img src="small image link" alt=""/>
</a>
</div>
</div>

Thumbnail image switching

I have a div clalled product_main_img that is the full standalone image. I then have four thumbnail images that are underneath switch when clicked switch with the main image to become the full displayed image.
What I need to accomplish is have the standalone image (the first one on page load) change to the image that is being clicked, and then have the standalone image move into the thumbnail section.
I have the thumbnails moving into the main div area, but the standalone image is then disappearing.
div class="product_visuals">
<div class="product_main_img">
<div class="main_img_switch"><img src="/images/main_img.jpg"></div>
</div>
<div class="product_selection">
<div class="product_details">
<img src="/images/img_01.jpg">
</div>
<div class="product_details">
<img src="/images/img_02.jpg">
</div>
<div class="product_details">
<img src="/images/img_03.jpg">
</div>
<div class="product_details">
<img src="/images/img_04.jpg">
</div>
</div
script:
$('.product_details img').click(function() {
$('.main_img_switch img').attr("src", $(this).attr("src"));
});

save a reference of the standalone image in a variable, something like this:
$('.product_details img').click(function() {
var mainImg = $('.main_img_switch img');
var tempSrc = mainImg.attr("src");
mainImg.attr("src", this.src));
this.src = tempSrc;
});

How to display div with JavaScript depending on which image is clicked

I wish to display certain divs inside a main div dependent on which image is clicked. With out any decent knoweldge of Js or Jquery, I fail to do this without some assistance.
<form>
<input type="hidden" name="prod">
<div id="images">
<img id="one" src="http://lorempixel.com/200/200/">
<img id="two" src="http://lorempixel.com/201/200/ ">
<img id="three" src="http://lorempixel.com/203/200/ ">
<img id="four" src="http://lorempixel.com/204/200/ ">
</div>
</form>
<div id="description">
</div>
<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>
If the image which has id="one" is clicked, then display <div class="one">Brilliant</div> inside of the description div. Then ofcause if the second image is clicked, then display the the 'super' div inside the description div. I'd like to not have the descriptions visible until clicked, and only one div at a time to be shown.
The images are apart of a form because I need to forward the value of the id on the images to a variable.
Here is the script that does that.
$('#images').delegate('img', 'click', function () {
var $this = $(this);
// Clear formatting
$('#images img').removeClass('border-highlight');
// Highlight with coloured border
$this.addClass('border-highlight');
// Changes the value of the form field prod to the file name shown in the image.
$('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));
//Alert for debugging simplicity
alert($('[name="prod"]').val());
});
Perhaps a function can be implemented into the current script?
Here is a fiddle, and it will all make sense of what I have as a whole currently.

Check out this fidde
You just need to add:
$('#description').html($('.' + $this.attr('id')).html());
At the bottom of your onclick function.
** You have a typo on the 3rd div with text(tree instead of three).

You can make it bit simple by adding the divs for description in div as I see no need to put the divs for description outside the description div and later adding it. You will need to hide all the divs we have in description div and show the one that is related to img being clicked.
Live Demo
Html
<input type="hidden" name="prod">
<div id="images">
<img id="imgone" src="http://lorempixel.com/200/200" />
<img id="imgtwo" src="http://lorempixel.com/201/200" />
<img id="imgthree" src="http://lorempixel.com/203/200" />
<img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
<div id="one">Brilliant</div>
<div id="two">Super</div>
<div id="three">Amazing</div>
<div id="four">Excellent</div>
</div>
Javascript
$('#images').delegate('img', 'click', function () {
$('#description div').hide();
$('#' + this.id.replace('img', '')).show();
});

Hide a div and show another div in place of it functionality not working for popup

My project files can be downloaded here: https://rapidshare.com/files/1601614875/projectFiles.zip [if needed:" only 2mb]
I have a webpage and a popup inside the webpage. In the popup there are two images and a heading inside a div, and I want the div when hovered to hide and show another div inside which are the same images larger and a paragraph. I have the very same functionality for the same content in the main webpage and it works perfectly, but in the popup it does not work at all.
my HTML code:
<div class="thumb-list" id="popup-thumb-list">
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-01.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/029 Derek_Jeremiah_Reid-ID29597.jpg" width="150" />
<p>Derek Jeremiah Reid as Home Buyer<br>Click to see profile.</p>
</div>
</div>
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-02.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/030Rachel_O_meara-ID15405.jpg" width="150" />
<p>Rachel O'Meara as Agent<br>Click to see profile.</p>
</div>
</div>
</div>
Javascript code:
$('.small-thumb-holder').mouseover(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
});
$('.big-thumb-holder').mouseout(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
})
My attempt which does not work:
<div class="small-thumb-holder" onmouseover="(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
};">
<a href="" class="actor_thumb">
<img src="images/actor-01.jpg" width="65" height="50" />
</a>
<h3>Lucas Allen</h3>
as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" onmouseout="(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
}">

You need to execute the jQuery code after the popup has been loaded so that the mouseover and mouseout events will bind to the divs. To do so you could wrap the jQuery lines in a function and call if after loading the popup.

Prevent jquery slider's image show in the page on click

i am using this jquery and html for change the clicked image on a display div it works fine but the issue is when i click a image in the display div its open in the page itself. How to Make the image as it as when user click on it.
<script type="text/javascript">
jQuery('div#thumbs img').click(function () {
jQuery('#foo a').prop('href', jQuery(this).prop('src'));
jQuery('#foo img').prop('src', jQuery(this).prop('src'));
return false;
})
</script>
my html
<div id="foo">
<a href="#">
<img src="images/demo_slider.jpg" name="Display" id="display" /></a>
</div>
<br />
<div id="thumbs">
<img src="images/a.jpg" width="56" height="56" alt="" />
<img src="images/b.jpg" width="56" height="56" alt="" />
<img src="images/c.jpg" width="56" height="56" alt="" />
<img src="images/d.jpg" width="56" height="56" alt="" />
</div>
</div>
edit:
If the user click the thumbs image it load to the div foo. then the user click the image in foo the clicked image opens in the same page(as the basic html functionality like open image in new tab) i need to prevent the image open on click.

You should do
$('#foo a').click(function(e){
e.preventDefault();
});

Not tested, but you could try adding preventDefault:
jQuery("#foo a").click(function(e) {
e.preventDefault();
});
Did you mean something like that...