We Keep Coding

jQuery clone an image with a class of active and set it as background image of a div

I am using twitter bootstrap's default carousel for a simple slider. What I want to achieve is that whichever item is active, the img inside that item should also be cloned and set as the background image of the div with the class of 'testimonials-bg'.
I have tried the following code but it does not seem to be working:
$("#testimonial-carousel .item.active").each(function() {
var $myBg = $(".testimonial-bg", this),
$myImg = $(".testimonial-img img", this);
$myBg.css({backgroundImage: "url('"+ $myImg[0].src +"')"});
});
I have made a Fiddle for this:
https://jsfiddle.net/4t17wxxw/

Subscribe to slid.bs.carousel event and change the background image to the active one:
var $myBg = $(".testimonial-bg");
$('#testimonial-carousel').on('slid.bs.carousel', function () {
var $img = $('img','.carousel-inner>.item.active');
$myBg.css({backgroundImage: "url('"+ $img[0].src +"')"});
console.log($img[0].src);
});
Working fiddle

Your code is run only once when the script starts but you want to run it everytime the slide changes. Therefore, you can subscribe to the 'slid.bs.carousel' event which fires everytime the carousel displays a new slide.
You can read more about the event here: http://getbootstrap.com/javascript/#carousel-events.
// Testimonial Background from active slide
$('#testimonial-carousel').on('slid.bs.carousel', function () {
$("#testimonial-carousel .item.active").each(function() {
var $myBg = $(".testimonial-bg", this),
$myImg = $(".testimonial-img img", this);
$myBg.css({backgroundImage: "url('"+ $myImg[0].src +"')"});
});
});

There is no class called "testimonial-bg", here is the code which should call on each slide rotate or when you need to assign background image.
$("#testimonial-carousel .item.active").each(function() {
$(this).css("background", "url('"+$(this).find(".testimonial-img img").attr('src')+"')" );
});
Fiddle demo link
Cheers

jQuery: How to animate (fade) change of image source using img.attr('src', 'img.png')?

So using jQuery I change the source of an image using img.attr('src', 'img.png').
This just change the source and updates the image in a very static way, without doing any animation like fading.
How would I animate this change of image?

Hope this will help.
Saw this solution somewhere when I faced this issue.
$("#link").click(function() {
$("#image").fadeOut(1000, function() {
$("#image").attr("src",$("#link").attr("href"));
}).fadeIn(1000);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg"/>
<a id="link" href="http://www.google.com/logos/2011/mothersday11-hp.jpg">Change picture</a>

Fade out the imgage and, while image is invisible, change it's source:
$('#myImg').fadeOut().queue(function() {
var img = $(this);
img.attr('src', newSrc);
img.fadeIn();
img.dequeue();
});

Jquery toggle img attribute

I am trying to toggle images from the thumbnail to the feature image when the thumb nail is clicked. Currently when its clicked the images will swap but I cant get them to swap back with the thumb nail is clicked on again. I've tried using toggle but when the thumb nail is clicked on it would remove the image completely and I couldnt get any image to return. Currently this will switch the images but not switch or toggle them back on click.
$(".browseTable").on('click', 'td', function () {
var thumbNail = $(this).parent('tr').find('img').attr('src');
var feature = $('#featureImg img').attr('src');
$('#featureImg img').fadeOut(400, function () {
$(this).fadeIn(400)[0].src = thumbNail;
});
});

You can use data for store source string and toggling images
preview on : https://jsfiddle.net/5kxf65Lx/
<img src="source1.jpg" data-srcfirst="source1.jpg" data-srcsecond="source2.jpg" />
<script type="text/javascript">
$('img').click(function(){
var loaded = $(this).attr('src')
var first = $(this).data('srcfirst')
var second = $(this).data('srcsecond')
if(loaded == first){
$(this).attr('src' , second)
} else {
$(this).attr('src' , first)
}
})

Try this. When the parent is clicked we toggle both children. The large version starts off hidden.
<div class="toggle js-toggle">
<img src="http://www.placehold.it/100x100" alt="" class="toggle__thumb js-toggle-image"/>
<img src="http://www.placehold.it/500x500" alt="" class="toggle__active js-toggle-image" style="display: none" />
</div>
The jQuery
$('.js-toggle').on('click', function() {
$(this).find('.js-toggle-image').toggle();
});
https://jsfiddle.net/uoLv2nkh/1/
Or an only CSS way if you only care about when the user is clicking.
https://jsfiddle.net/uoLv2nkh/

You can achieve your target via setting src of image in css.
.imageOne{
content:url(YOUR SOURCE);
}
.imageTwo{
content:url(YOUR SOURCE);
}
add class to your image element in start
check if element exist by either class if exist toggle() to another, this will change the image back to another.
And use toggle() like following example
$(".browseTable").on('click', 'td', function () {
//var thumbNail = $(this).parent('tr').find('img').attr('src');
//var feature = $('#featureImg img').attr('src');
//$('#featureImg img').fadeOut(400, function () {
// $(this).fadeIn(400)[0].src = thumbNail;
//});
$('#featureImg img').find('.imageOne, .imageTwo').toggle();
});
I am able to use toggle simply to change one element to another. etc. hope it will help you.
Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Give multiple divs the same function

I want to create multiple thumbnails with the same .class. The thumbnail div contains 3 other divs. The first on is an image, the second one is a description which appear on mouseenter and the third one is a bar which change the opacity.
When the mouse hovers above the .thumbnail both elements should execute their function.
My Problem is that now every thumbnail executes the function, so every thumbnail is now highlighted. How can I change this so only one Thumbnail highlights while hovering above it?
HTML:
<div class="thumbnail">
<div class="thumbnail_image">
<img src="img/Picture.png">
</div>
<div class="thumbnail_describe">
<p>Description</p>
</div>
<div class="thumbnail_footer">
<p>Text</p>
</div>
</div>
jQuery:
$(document) .ready(function() {
var $thumb = $('.thumbnail')
var $thumb_des = $('.thumbnail_describe')
var $thumb_ft = $('.thumbnail_footer')
//mouseover thumbnail_describe
$thumb.mouseenter(function() {
$thumb_des.fadeTo(300, 0.8);
});
$thumb.mouseleave(function() {
$thumb_des.fadeTo(300, 0);
});
//mouseover thumbnail_footer
$thumb.mouseenter(function() {
$thumb_ft.fadeTo(300, 1);
});
$thumb.mouseleave(function() {
$thumb_ft.fadeTo(300, 0.8);
});
});

You code behave like this because you apply the fadeTo function to the $thumb_des and $thumb_ft selectors which contain respectively all the descriptions and footers of the page.
Instead, you should select the description and footer of the thumbnail triggering the mouse event, inside the mousenter or mouseleave functions.
Another thing you could change to optimize your code is to use only once the event listening functions, and perform both actions on the description and on the footer at the same time:
$thumb.mouseenter(function() {
var $this = $(this)
$this.find('.thumbnail_describe').fadeTo(300, 0.8);
$this.find('.thumbnail_footer').fadeTo(300, 1);
});
full working jsfiddle: http://jsfiddle.net/Yaz8H/

When you do:
$thumb_des.fadeTo(300, 0.8);
it fades all nodes in $thumb_des. What you want is to fade only the one that corresponds to the correct node in $thumb.
Try this:
for (i = 0; i < $thumb.length; i++)
{
$thumb[i].mouseenter(function (des) {
return function() {
des.fadeTo(300, 0.8);
};
}($thumb_des[i]));
});
}

You'll want to access the child objects of that particular thumbnail, something like this would work:
$(this).children('.thumbnail_describe').fadeTo(300, 0.8);
Here is a fiddle example.

JQuery-swap to another image on hover - Code swaps but to the first option

I have a question:
I have on my Site a navigation bar whit multiple images
I wanted them to swap so I used this Code I found, changed it a bit so that it would work for me, but for some reason the second time I go over the image it changes to the first one
Could someone help me please.
Ps. Sorry for my english
HTML:
<ul class="noBullet">
<li><img class="fadeim" src="themes/menu/home=1.png"/></li>
<li><img class="fadeim" src="themes/menu/spon=1.png"/></li>
</ul>
Jquery:
$(function() {
// Change the image of hoverable images
var openPng = $('.fadeim').attr('src');
var closedPng = openPng.replace("=1.png", "=2.png");
$('.fadeim').hover(function() {
$(this).stop(true, true).fadeOut(200, function() {
$(this).attr('src', closedPng).fadeIn(200);
});
}, function() {
$(this).stop(true, true).fadeOut(200, function() {
$(this).attr('src', openPng).fadeIn(200);
});
});
});

This code might be of some help. Basically, you set the second image (the one that is supposed to appear on hover as a data-* attribute and on each mousein and mouseout event, the original image and the one stored in the data-* attribute switch places.
<img class="hoverfun" src="first.jpg" data-hoverimg="second.jpg"/>
$(function(){
$('.hoverfun').on('mouseenter mouseout', function(){
var original = $(this).attr('src');
var replacement = $(this).data('hoverimg');
$(this).attr('src', replacement).data('hoverimg', original);
});
});