We Keep Coding

How can I fade out one img then fade in another?

So I am using jQuery to fade in and out but I encountered the problem in which when I run the code the img is faded out but the same img fades back in. I am stuck.
Here is the code
$(document).ready(function() {
// preload the image for each link
$("#image_list a").each(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
//-------------------------
// set up the event handlers for each link
$("#image_list a").click(function(evt) {
// alert($(this).attr("title"))
$("#image, #caption").fadeOut(3000, function(){
$("#image").attr("src", $(this).attr("href"));
$("#caption").text($(this).attr("title"));
});
$("#image, #caption").fadeIn(3000);
evt.preventDefault();
});
// get the image URL and caption for each image and animate the caption
// cancel the default action of each link
// move the focus to the first link
}); // end ready

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+ '" />');
});

jquery swap image on element click not functioning

I am trying to swap an image on click with jquery. I have got it to work with the click being bound to the image class. However, if I try and wrap the function and bind the event to a button or anchor, it will not swap the images. Here is the jquery:
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$(".test_toggle").click(function(){
$(this).find(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
});
</script>
This worked:
jQuery(document).ready(function( $ ) {
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
Any help is greatly appreciated.

I don't think there's any need to delegate the event listeners so I've removed them. Simply add the click event to the image and then you can manually 'trigger' a click on it when the .test-toggle is clicked. E.G:
$(function() {
//add on click event
$(".img-swap").on('click', function() {
if (this.src.indexOf("_off")>0) {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
});
//add remote trigger
$(".test_toggle").on('click', function(){
$(".img-swap").trigger("click");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-swap" src="https://placehold.it/300?text=_off" />
<button class="test_toggle">test toggle</button>

Thats because unlike like img.
a or button doesn't have a src attribute.
So when you bind the event to a button or anchor, this.src in your second instance of the code will be invalid.

I would delete this line:
$(this).find(".img-swap").live('click', function() {
What is it's purpose? You can swap this image right after the first click, right?
Also, make sure that .img-swap is inside the tag with class test_toggle.
You are using:
$(this).find(".img-swap")
find() searches only in children of selected element.
If it's not nested use
$(".img-swap")
instead of:
$(this).find(".img-swap")

I have re-written the js, but not tested. Can I nest clicks?
$(".test_toggle").click(function(){
$.find(".img-swap").click(function(){
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});

Why changing img src with jQuery works incorrectly?

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);
});
});

Before/After image swap using Fancybox and Cloudzoom

I'm trying to get Fancybox working with an image swap script that shows the "before" image of a retouched photo in the main large image area when fancybox is active.
Before fancybox is active I currently also have cloudzoom running on the retouched image, then when the retouched image is clicked it opens fancybox. Now when the user clicks or hovers over the middle of the active fancybox image, I want the image to swap to the before image the has not been retouched.
You can see an example of the site here: http://www.pixlsnap.com/j/testb.php
and an example of the running image swap script here: http://brecksargent.com/swaptest.php
The images are being loaded using the slideshowpro director API.
Here is the script I am trying to implement with fancybox:
$(document).ready(function() {
$(".fancybox-image").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});
var imgSwap = [];
$(".fancybox-image").each(function(){
imgUrl = this.src.replace("_off","_on");
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
This is the code that binds a click event to the cloudzoom image area:
$(function(){
// Bind a click event to a Cloud Zoom instance.
$('#1').bind('click',function(){
// On click, get the Cloud Zoom object,
var cloudZoom = $(this).data('CloudZoom');
// Close the zoom window (from 2.1 rev 1211291557)
cloudZoom.closeZoom();
// and pass Cloud Zoom's image list to Fancy Box.
$.fancybox.open(cloudZoom.getGalleryList());
return false;
});
});

Figured it out!
Used this
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
$(".img-swap").hover(
function(){this.src = this.src.replace("_on","_off");},
function(){this.src = this.src.replace("_off","_on");
});
var imgSwap = [];
$(".img-swap").each(function(){
imgUrl = this.src.replace("_off","_on");
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
changed this
$.fancybox.open(cloudZoom.getGalleryList());
return false;
});
to this
$.fancybox({
afterShow: function () {
$(this.content).attr("tabindex",1)
}
});
and put each image in it's own div with img-swap class:
<div class="hover" id="hover6" style="display: none"><img src="image_on.jpg" class="img-swap" /></div>