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?
Related
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
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);
});
});
I would like to change the src of an img when the parent of listed children is clicked. I am using some code I have been working with that I found on StackOverflow because I was having problems with slideup and slidedown.
Next to each uppermost item (parent), to the left will be an arrow icon pointing to the right. Upon clicking the icon, this image should change to an arrow pointing down.
I can get the image to change onClick, but unless you click on the image, the image does not change back. Therefore, I believe I need the change to be pegged to the slideup and slide down functions. The image should also change back if you click on the close link or when clicking on a new Parent.
I can live without the 'only one list can be shown at a time' functionality, which would eliminate the need for the image to also change on clicking a new parent.
For this fiddle, I have only applied what I was trying to do to the first parent of the list: http://jsfiddle.net/9aa5n/51/
HTML:
<li><img src="arrowright.png"></li>
<li class="show_hide" id="1C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="2C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="3C">
<p>lkjlkjasdfasdf</p>
Close
</li>
jQuery / Javascript:
$(document).ready(function() {
$('.show_hide').slideUp(0);
$('.edit_this').click(function() {
$('.show_hide').slideUp(300);
var takeID = $(this).attr('id');
$('#' + takeID + 'C').slideDown(300);
});
$('.close').click(function() {
var takeID = $(this).attr('id').replace('Close', '');
$('#' + takeID + 'C').slideUp(300);
});
});
$('#img-tag').on({
'click': function() {
var src = ($(this).attr('src') === 'arrowright.png')
? 'arrowdown.png'
: 'arrowright.png';
$(this).attr('src', src);
}
});
I updated your jsfiddle: http://jsfiddle.net/9aa5n/53/
Since you didn't provide absolute paths to images, I added some from the net.
I removed your click event, and replaced it with this, I believe your issue was how you were referencing the elements in jQuery.
$(".edit_button").click(function() {
var img = $(this).find("img").first();
console.log(img.attr("src"));
if (img.attr("src") === 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png') {
img.attr("src", 'http://png-3.findicons.com/files/icons/2315/default_icon/256/arrow_down.png');
console.log(img.attr("src"));
} else {
img.attr("src", 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png');
console.log(img.attr("src"));
}
});
This should get you started to finish polishing up the UI,
i.e. closing all .edit_button and then open only the $(this).find("img").first() element ...
to add a click-to-zoom feature to images, I used the following code to toggle a class:
$(document).ready(function() {
var imageLinks = $('a[href$=".png"], a[href$=".jpg"], a[href$=".gif"], a[href$=".bmp"]');
if (imageLinks.children('img').length) {
imageLinks.children('img').each(function() {
$(this).attr('title', '(click to enlarge image)');
});
imageLinks.click(function(e) {
e.preventDefault();
$(this).children('img').toggleClass('expanded');
});
}
});
Now my problem is, I could have text links, like <a href='file.png'>text</a> as well on that page, and they are broken by this code.
Is there a way to select only image links (<a href='file.png'><img src='file.png'></img></a>) instead of all links to image files?
Thanks in advance!
You could use has statement:
var imageLinks = $('a').filter(':has(img)');
Or the same:
var imageLinks = $('a:has(img)');
I believe this will work:
var $images = $('a > img');
$images.attr('title', '(click to enlarge image)');
$images.parent().click(function(e) {
e.preventDefault();
$(this).children('img').toggleClass('expanded');
});
Example jsFiddle: http://jsfiddle.net/UHkh7/
You can change the selector to 'a img' if the img is not always a direct descendent of the a tag, however you will then need to change $images.parent() to $images.parents('a')[0]
I have this code blow, it is use to switch an image to a second image on mouse click and also wrap a link around it at the same time. Upon clicking the image the second time it will take you to the link and also toggle back to the previous image.
What I'm trying to work out is how to also when it toggles back to the previous image is to also get rid of the wrapped link.
Also would it be possible to use the toggle on mouse click on another object. for example clicking a div on the page and it will toggle the image back to the original.
jQuery(function() {
var largeLink = "<a href='index.html' target='_blank' ></a>";
var largeLink2 = "<a href='#'></a>";
$(".buyimage").live('click', function() {
if ($(this).attr("class") == "buyimage") {
this.src = this.src.replace("_5.99", "_buynow");
} else {
this.src = this.src.replace("_buynow", "_5.99");
}
$(".buyimage").wrap(largeLink);
$(this).toggleClass("on")
});
});
You can use the jquery unwrap:
http://api.jquery.com/unwrap/
// for example
<script>
$("button").toggle(function(){
$("p").wrap("<div></div>");
}, function(){
$("p").unwrap();
});
</script>