We Keep Coding

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

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>

Active thumb in image gallery

I made this image gallery but I want to give the active thumb a class="active". I can give the .small_image a class "active" if I click on it but then after I click the other thumbs they all get a class "active". So I thought if I make an if statement, if the rel and src of the big image and the Thumbnail are the same, give a class "active" but my code doesn't work. Can anyone tell me what I'm doing wrong?
http://jsfiddle.net/XNsHC/8/
$(document).ready(function () {
$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(600, function () {
$('#above').prop('src', $('#under').prop('src')).css('display', 'block');
});
});
if($(".small_image").prop("rel") == $("#under").prop('src', image)){
$(this).addClass('active');
}
});

Try something like this: (working jsFiddle - added red border around .active)
$(".small_image").click(function () {
event.preventDefault();
$('.small_image.active').removeClass('active'); // remove "active" from current image
$(this).addClass('active'); // add "active" to the new one
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(300, function () {
$('#current_image #above').prop('src', $('#current_image #under').prop('src'));
});
}).eq(0).addClass('active'); // set the first one as "active" by default

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

jQuery changing images with animation and waiting for it to trigger hyperlink

I want to switch images on .click() using the url attr I can do so, but I can't figure out how to make it wait, until the animation is done to redirect to the new webpage.
Here's the js
$(function() {
$('.cv').click(function() {
$("#cv img").fadeOut(2000, function() {
$(this).load(function() {
$(this).fadeIn();
});
$(this).attr("src", "images/cv2.png");
return true;
});
});
});
Here's the html:
<div id="cv" class="img one-third column">
<a class="cv" target="#" href="cv.joanlascano.com.ar">
<img src="images/cv1.png" alt="Curriculum"/>
<br />CV</a>
</div>

You need to prevent the browser default of following link by returning false from click handler. Then do redirect in callback of fadeIn()
$(function() {
$('.cv').click(function() {
/* store url*/
var href = this.href;
$("#cv img").fadeOut(2000, function() {
/* bind load to image*/
$(this).load(function() {
$(this).fadeIn(function() {
/* redirect in callback of fadeIN*/
window.location = href;
});
/* change src*/
}).attr("src", "images/cv2.png");
});
/* prevent browser default following href*/
return false;
});
});

$('.cv').click(function(e) {
e.preventDefault(); // prevent browser reload
$("#cv img").fadeOut(2000, function() { // fadeout the image
$(this)
.attr('src', "images/cv2.png") // change src of image
.load(function() { // load image
$(this).fadeIn(); // display the image
});
});
});