Why changing img src with jQuery works incorrectly? - javascript

Well, the task is to change img src on click.
It was not a problem to do it.
But I'd like to have some effect while changing it.
So, I used fadeOut and fadeIn. Problem is when the img src is changing the img starts "sparkling / blinking".
You can see an example here
http://www.coffee-cult.ru/slidersupreme
(rectangle in top right corner activates slider buttons)
and the code,
$main_image = $("img").first();
$("#prev_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$main_image.attr('src', images[0]);
}).fadeIn(400);
});
$("#next_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$main_image.attr('src', images[1]);
}).fadeIn(400);
});

you can try to use
$(this).attr();
instead of
$main_image.attr();

It has something to do with your other scripts on the page. Here in the fiddle it looks kind of alright with the same code: http://jsfiddle.net/ewyLcm0s/
var images = ['http://lorempixel.com/100/100/people/1','http://lorempixel.com/100/100/people/2'],
$main_image = $("img").first();
$("#prev_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$(this).attr('src', images[0]).fadeIn(400);
});
});
$("#next_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$(this).attr('src', images[1]).fadeIn(400);
});
});

Related

Change image with jquery using .toggle() in same function

I actually know how to change images with Jquery but the following case got me really stucked.
So I have a div I'm showing on image click like this:
$(dcoument).ready(function() {
$('.image').click(function() {
$('.element').toggle();
$(this).attr('src', 'image2.png');
});
};
Someow .attr() function doesn't work in this case and I have no idea why, I even have a function with changing to this specific image on hover like this:
$(document).ready(function() {
$('.image').hover(function() {
$(this).attr('src', 'image2.png');
}, function() {
$(this).attr('src', 'image1.png');
});
}
which works just the way it should. Any thoughts why code I posted can't change image on click? Thanks in advance.
You can add condition to by using hasClass.
<img src="image1.png">
<button>change</button>
$(function(){
$('button').on('click', function(){
if($('img').hasClass('fb')) {
$('img').removeClass('fb');
$('img').attr('src', 'http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png');
} else {
$('img').addClass('fb');
$('img').attr('src', 'http://www.thebloodycure.com/wp-content/uploads/2016/02/FaceBook-Logo-200x200.png');
}
});
})
https://jsfiddle.net/c84kouny/1/

Preload image on event

How can I preload image only when event starts, i.e. .scroll or .click ?
What happens now is, image loads along with website, and I want to prevent this from happening.
Thanks.
Use .one() , .appendTo()
$(element).one("click", function() {
$("<img src=/path/to/img/>").appendTo(/* target element */)
})
$(window).one("scroll", function() {
$("<img src=/path/to/img/>").appendTo(/* target element */)
})
Maybe something like this:
$(function() {
$('img').each(function() {
var self = $(this);
self.attr('data-src', self.attr('src'));
self.removeAttr('src');
});
var loaded = false;
function loadImages() {
if (!loaded) {
$('img').each(function() {
var self = $(this);
self.attr('src', self.data('src'));
});
loaded = true;
}
}
$('button').click(loadImages);
$(window).scroll(function() {
loadImages();
$(this).unbind('scroll');
});
});
if the javascript is executed after images are loaded you can try to change img src to data-src in html file.
You could create an image tag with the source in an data attribute:
<img data-src="your_image.jpg">
And then load it on an event:
$('body').on('click', function(){
$('img[data-src]').each(function(i, img){
$img = $(img);
$img.attr('src', $img.data('src'));
$img.removeAttr('data-src');
});
});
This should work
$(function(){
$(document).one("scroll, click", function(){
loadImages();
})
})
Here loadImage is a function which will load your images on click/scroll event. "one" method will make sure that it only happens only once else you will end up loading images every time someone click or scroll.
var src = 'location/file.jpg';
$(document).on('click', function(){
$('target').append('<img src="' +src+ '" />');
});

On click add/remove overflow hidden

I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>
Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/
You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})
Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>

Set default image after click with jQuery

I want just when I click on the image I see the new image and just after the click I want the new image changes with the default one, but I have to drag the mouse to see the default image but I don't want that.
This is my code:
$(document).ready(function(){
$(".img-button").live('click', function () {
$(this).attr("src","images/pressed.svg");
});
});
If you only have one image, I suggest you give it an ID instead of (ab)using the classname.
If you have several and use the same image for all, then change $("#myImage") below to $(".img-button")
Toggle
$(document).ready(function(){
$("#myImage").toggle(
function() {
$(this).attr('src','images/pressed.jpg');
},
function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap after leaving
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
});
$('#myImage').on("mouseleave",function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap half a sec after pressing
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
setTimeout(function() {
$('#myImage').attr('src',"images/default.jpg");
},500);
});
});

How to revert the pixastic effect?

<script type="text/javascript">
$(function() {
jQuery(".attachment-thumbnail")
.pixastic("desaturate")
.pixastic("sepia")
});
</script>
I got this pixastic script working, now I need to revert the effects on rollover. I don't really know how to do that though.
The link is here if you want to take a look, http://mentor.com.tr/wp/?page_id=218
jQuery(".attachment-thumbnail").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
jQuery(this).pixastic("desaturate");
}
});
Note that sepia won't do anything combined with desaturate
The plugin is not very well documented, so in the future I suggest taking a look into the source code, in this example line 403 shows
revert : function(img) {
$(window).load(function () {
$(".thumb").pixastic('desaturate');
$(".thumb").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
$(this).pixastic("desaturate");
}
});
})
Hi guys everything said above works great if you're directly setting hover events on the image.
Whereas in my situation I wanted the the image to blur if I hover on the image container (which contains other divs too, not just the image).
Here is my code in case anyone else is dealing with something similar:
$(function () {
$('.col1.w1').mouseenter(function () {
var origImg = ($(this).find('.imageUrl'));
if (origImg.is('img')) {
Pixastic.process(origImg[0], 'blurfast', { amount: 2 });
}
});
$('.col1.w1').mouseout(function () {
var origImg = ($(this).find('.imageUrl'));
Pixastic.revert($(this).find('.imageUrl')[0]);
});
});

Categories