JQuery image wrap and toggle - javascript

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>

Related

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

Remove Class when current toggle is clicked

The title is a bit of a tongue twister. A brief description of the fiddle, is that it's a toggle style accordion where the toggle state changes color when one of the divs is toggled. I've got it working to where if another div is toggled it will close that previous div and open the new div while changing the toggle state.
The issue I am running into is if a user wants to close the current toggle without clicking a different div it will close the current toggle but not change the toggle state back to it's original state. I am currently using this and have tried multiple things including if the container 'is: visible' or hasClass then to remove the toggle class, but nothing seems to work. I've also tried a different slideToggle function, but of course that applied it to the toggled element I've found.
Fiddle: http://jsfiddle.net/NFTFw/1256/
What I am trying to do?
I want the current toggle class to change back to its original state if the user clicks the current toggled div or clicks another div. So essentially I want the user to have either option.
CODE:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
$(".toggle").removeClass("toggle-d");
$(this).addClass('toggle-d');
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
});
Check to see if the thing that you're clicking already has the class. If so, remove it, if not, add it. I suspect the problem you were having with hasClass() is that you were attempting to check the wrong this.
Oooh I did a bad thing and didn't remove the class when a new div was clicked. I've fixed that and updated the jsfiddle
jsfiddle
js:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
var width = $(window).width();
if (width <= 600) {
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
if($(this).hasClass('toggle-d')){
$(this).removeClass("toggle-d");
}
else{
$('.toggle').removeClass('toggle-d');
$(this).addClass('toggle-d');
}
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
}
});
What i would suggest is to pass the element itself in the function
in the index.html Do this
<a class = 'classname' onclick = toggle(this)>
Your Content Here
</a>
After that in the script.js
what i am saying is in javascript, i believe you can easily convert it to jquery
function toggle(value){
if(value.className == 'the predefined value'){
value.className = value.className + ' Your new class addition'
// remember there should be a space if you are adding an additional class to the present class, else directly change the classname
}
else{
value.className = 'the predefined value'
}}
this will toggle your classname whenever the element is clicked

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?

How to change image with onclick while a list is using slideup and slidedown

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 ...

jquery image replace?

when click on More Button the picture of More button and Featured will be changed and when you click agin on the More button the image should be the same as what it was the first, but it isn't.
$(document).ready(function(){
$('#buy_now').hide();
$('#more').click(function() {
$("#more-btn").attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77470");
$("#featur-btn").attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77472");
$('#buy_now').toggle();
});
});
You need to store the original source then restore it. Best approach is using .toggle() for the button and .data to store the original source:
$(document).ready(function(){
var btnMore = $("#more-btn");
var btnFeature = $("#featur-btn");
btnMore.data("org_src", btnMore.attr("src"));
btnFeature.data("org_src", btnFeature.attr("src"));
$('#buy_now').hide();
$('#more').toggle(function() {
btnMore.attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77470");
btnFeature.attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77472");
$('#buy_now').show();
}, function() {
btnMore.attr("src", btnMore.data("org_src"));
btnFeature.attr("src", btnFeature.data("org_src"));
$('#buy_now').hide();
});
});
Live test case. (with cute cats :))

Categories