Develop Reference

Smooth way to replace background-image

I’m quite new to jQuery and JS and been asked to write a script that will be loading background-image progressively - I mean that low quality image should appear immediately and when full size image is loaded should replace the small one.
I found some tips how to do something similar by layering <img /> on top of background-image however in my case i have to deal with background-image only, so I have made this:
$('.img-loader').each(function(){
var box = this;
var smallImg = $(this).attr('style');
var bigImg = smallImg.replace('.jpg)', 'big.jpg)');
var imgUrl = bigImg.replace('background-image: url', '');
var imgUrlS = imgUrl.replace(/[{()}]/g, '');
console.log(imgUrlS);
$('<img/>').attr('src', imgUrlS).load(function(){
$(this).remove();
$(box).attr('style', bigImg);
});
})
The script basically does the job but in that moment when the image gets replaced there is a quite noticeable ‘shake’.
Any ideas how to make transition smoother or anyone knows what causing this 'shake'?
Edit: As suggested I'm adding a markup snipped of where script has to be applied.
<div class="about__section__bgimage img-loader"
style="background-image: url(<?php echo $contentBlock->imageurl ?>)"></div>

I suggest you create two separate elements with the same size, overlapping each other, with position: absolute; make one of them visible with the original bg image (using opacity: 1). The second one invisible (using opacity:0)
Once the higher quality image is completely loaded, set the opacity of the original image to 0 and the new image to 1.
use a css transition on the opacity property to make the opacities change smoothly.

you have to use animation for this. Use any of them according to your scenario enjoy it !!!
https://daneden.github.io/animate.css/

How to create circular animation image using JQUERY using Mouseover /TouchStart /Mouseend/touchend?

I am creating the circular animation of image while roatating .I take help from this url:
How to create circular animation with different objects using jQuery?.
But I am able to rotate using start and stop button .Now I need to rotate image when user mouse over circularly and stop when mouse end ? is it possible ?
here is fiddle
http://jsfiddle.net/IrvinDominin/Krukd/1/
<button id='start'>start</button>
<button id='stop'>stop</button>
<div>
<img src="https://dl.dropbox.com/s/66ip1iz8cm3wf2l/dial.png" style="position:absolute;top:=;left:;" id="dial1"></img>
<img src="https://dl.dropbox.com/s/siqq3e8kdaefqn8/icon_0.png" style="position:absolute;top:60px;left:190px;" id="dial2"></img>
<img src="https://dl.dropbox.com/s/zikxwpakha2ei1v/icon_1.png" style="position:absolute;top:100px;left:100px;" id="dial3"></img>
<img src="https://dl.dropbox.com/s/dn5n76r6yr1tzpd/icon_2.png" style="position:absolute;top:180px;left:70px;" id="dial4"></img>
<img src="https://dl.dropbox.com/s/vu9uckyoo7k8wcc/icon_3.png" style="position:absolute;top:270px;left:70px;" id="1"></img>
<img src="https://dl.dropbox.com/s/lnb9h4hazcd619u/icon_4.png" style="position:absolute;top:370px;left:110px;" id="dial5"></img>
<img src="https://dl.dropbox.com/s/pt0q3zbdxt3843d/icon_5.png" style="position:absolute;top:420px;left:230px;" id="dial6"></img>
<img src="https://dl.dropbox.com/s/j9ybktafm0v08ff/icon_6.png" style="position:absolute;top:350px;left:340px;" id="dial7"></img>
<img src="https://dl.dropbox.com/s/nuh0njoeczd94gm/icon_7.png" style="position:absolute;top:250px;left:390px;" id="dial8"></img>
<div>

It's not clear when you want to start / stop the animation -- the easiest way is to give the surrounding div an id (container for example) and set the size of it. Then bind the mouse events to that. Since you already have an image that covers the whole thing you can use that:
$("#dial1").mouseenter(function () {
timer = setInterval(animate, 20);
});
$("#dial1").mouseleave(function () {
clearInterval(timer);
});
Fiddle
For touch events you can do something similar, have a look at this answer for more about touch events: How to recognize touch events using jQuery in Safari for iPad? Is it possible?
However, if you only want the animation to run when you're over the circle of icons you'll have to do something else. In this case you'd use the mouseover event and call a function that does the following (psuedocode)
Get current pointer postion, calculate distance from center of the circle
IF (pointer distance > circle radius)
IF (animation is running) THEN stop animation
ELSE
IF (animation is not running) THEN start animation
Alternatively define an image map to control the active area (where you want the animation to run) and attach the handlers to that.

Prevent large image flickering on src change

I've a problem with image flickering with large images.
In my body i have 5 images:
<img id="img1" src="img1.png" width="250">
<img id="img2" src="img2.png" width="250">
<img id="img3" src="img3.png" width="250">
<img id="img4" src="img4.png" width="250">
<img id="img5" src="img5.png" width="250">
and one I'm dragging one of them with jQuery UI, all are changing their src and on dragend as well:
function dragStart() {
$('#img2').attr('src','newimg2.png');
$('#img3').attr('src','newimg3.png');
$('#img4').attr('src','newimg4.png');
$('#img5').attr('src','newimg5.png'); }
so fine so good. But I need to use large images (2000 x 2000px) because all images can be clicked and then they will animate to the full size of the viewport that they dont pixelate.
$this.animate(
{ width: 1800, top: -650, left: -250 },
{
duration: 4000,
easing: 'easeOutElastic'
})
I think because of the size of every image, they are flickering. Does anyone of you have an idea how to prevent this flickering on images, if all src change at the same time ?
Thanks for your effort

The problem you described does not sound like a pre-loading issue to me.
For preloading would happen, when you load ANOTHER image from the server once you start to move it around. But like I have read your Question you are moving the DOM-object containing your image in SRC around.
Thats most likely a Browser issue, because he has to scale your images down from 2k x 2k to lets say 100 x 100. That is some expensive interpolation stuff to do there.
So your main problem could be, like you mentioned, the size of the image.
Even preloading would not be of use, because you would have the same issues then.
In my eyes you should have two versions of your image: One small one (the size you want to drag around) and a big one, the one you want to display.
The big one can either be loaded automatically in background or on demand, when a user clicks on an image.
In the web it is quite common, to show scale the small image to screen size with smooth animations and start to preload in the background and when the preload finished, replace the fullscreen image to remove the pixel effect.
I hope I made myself clear.

The key to what you are trying to do is called preloading. However, you'll need to think carefully about how you want to do this.
Preloading involves loading the image in an img tag off-screen, but still in the DOM. This caches the image locally, which means that the next time you attempt to use the same source, it'll pull from cache instead of querying the server for the image (and, thus, flicker).
Preloading an image is a simple matter:
(new Image()).src="mysource.png";
What you want to decide is when you want to load the images. IF you load them all at first, you'll potentially use up a lot of bandwidth. If you load them on-click, you'll get buffering.
You can check if an image is loaded using the onload event present on img tags and wrapped within jQuery if needed, as follows:
var i = new Image();
i.onload = function() {
console.log("Loaded");
}
i.src = "mysource.png";
Credits to Robin Leboeuf for the concise Image() form.

You can use a function like this to preload your images:
function imagesPreload(){
var imgArray = new Array("path/to/img1.jpg", "path/to/img2.jpg", "path/to/img3.jpg");
for (var i=0; i<imgArray.length; i++) {
(new Image()).src = imgArray[i];
}
}

See the comments. You should ensure that the images are loaded before you show them. This is called pre-loading and can e.g. be achieved by having hidden images (not using display:none but placing them offscreen) that have the SRC that you want.
Edit: see the more elaborate answer by #Sebástien !

CSS Using to Make Many backgrounds Move at speeds that are different by mouse

Hi i want to create an affect where background move to the mouse at different speeds to make an affect almost like 3d.
This is what i want to make that with which i have found found this
can someone explained to me or show me some script that will do this please.

What you're talking about is a parallax effect. There are many existing scripts and plugins that allow you to do this. For example, a simple search prompted this page which lists 7 different jQuery plugins.
The basic premise is dividing up the pieces into layers that are moved via JS independently based on the current position of the mouse, and then hiding the areas different areas if needed.
Example
A simple example of this effect might be the following (please don't ever use this code, it is not very clean):
HTML
<div id="parallax">
<img src="img1.png" alt="background"/>
<img src="img2.png" alt="foreground"/>
</div>
JS
$('#parallax').on('mousemove', function (e) {
$('img').eq(0).css('left', e.pageX);
$('img').eq(1).css('left', e.pageX * 2);
});
In this simple example, the foreground image will move twice as fast as the background. As you can see, you simply move each piece separately from one another to get the desired effect.

Why didn't you just look at the js in the source of that page. Its 4 images that are absolutely positioned in a mouse move event.
$(document).mousemove(function(e) {
var x = ((e.pageX/$(window).width())*100)*-1;
var y = ((e.pageY/$(window).height())*100)*-1;
var pos = (x/80*-1)+"% "+(y/80*-1)+"%";
var pos2 = (x/3+60)+"% "+(y/3+60)+"%";
var pos3 = (x/5+30)+"% "+(y/5+30)+"%";
var pos4 = (x/2+60)+"% "+(y/2+60)+"%";
$("#grid").css("background-position",pos);
$("#bottom").css("background-position",pos2);
$("#bottomoverlay").css("background-position",pos3);
$("#bottomblur").css("background-position",pos4); });

enlarge image and move it with the pointer on mouse over

Sorry if this might seem trivial for me to ask but..
I have some images and I need them to enlarge when I hover my mouse over them. But.. I want for the enlarged image to stick next to the pointer as I move it across the image. I don't know what to call it. I'm pretty sure it's only done with javascript, just css won't work here.
Something like this http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ , but you know, it has to move with the pointer in motion.
What's the most effective way to do this?

The previous answers may be exactly what you're looking for, and you may already have this solved. But I note that you didn't mention jquery anywhere in your post and all of those answers dealt with that. So for a pure JS solution...
I'll assume from the way the question was phrased that you already know how to pop the image up? This can be done by coding an absolutely positioned hidden img tag in the html or generated on the fly with JS. The former may be easier if you are a JS novice. In my examples I'll assume you did something similar to the following:
<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;">
Then you need an onMouseOver function for your thumbnail. This function must do three things:
1) Load the actual image file into the hidden image
//I'll leave it up to you to get the right image in there.
document.getElementById('bigImg').src = xxxxxxxx;
2) Position the hidden image
//See below for what to put in place of the xxxx's here.
document.getElementById('bigImg').style.top = xxxxxxxx;
document.getElementById('bigImg').style.left = xxxxxxxx;
3) Make the hidden image appear
document.getElementById('bigImg').style.display = 'block';
document.getElementById('bigImg').style.visibility = 'visible';
Then you'll need to capture the onMouseMove event and update the now un-hidden image's position accordingly using the same code you would have used in (2) above to position the image. This would be something like the following:
//Get the mouse position on IE and standards compliant browsers.
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
var curCursorX = e.pageX;
var curCursorY = e.pageY;
} else {
var curCursorX = e.clientX + document.body.scrollLeft;
var curCursorY = e.clientY + document.body.scrollTop;
}
document.getElementById('bigImg').style.top = curCursorY + 1;
document.getElementById('bigImg').style.left = curCursorX + 1;
And that should just about do it. Just add an onMouseOut event to hide the bigImg image again. You can change the "+1" in the last two lines to whatever you like to place the image correctly in relation to the cursor.
Note that all of the code above was for demonstration purposes only; I haven't tested any of it, but it should get you on the right track. You may want to expand upon this idea further by preLoading the larger images. You could also forgoe capturing mousemove events by using setTimeout to update the position every 20 ms or so, though I think that approach is more complicated and less desirable. I only mention it because some developers (including me when I started) have an aversion to JS event handling.
I did something similar to this with a custom ColdFusion tag I wrote that would generate a floating div users could click and drag around the screen. Same principle. If you need me to I can dig that out to answer any additional questions in more depth.
Good luck!

Liece's solution is close, but won't achieve the desired effect of the large image following the cursor.
Here's a solution in jQuery:
$(document).ready(function() {
$("img.small").hover (function () {
$("img.large").show();
}, function () {
$("img.large").hide();
});
$("img.small").mousemove(function(e) {
$("img.large").css("top",e.pageY + 5);
$("img.large").css("left",e.pageX + 5);
});
});
The HTML is:
<img class="small" src="fu.jpg">
<img class="large" src="bar.jpg">
CSS:
img { position: absolute; }

Try this links [jquery with auto positioning]
1.Simple
http://jquery.bassistance.de/tooltip/demo/
2.Good with forum
http://flowplayer.org/tools/tooltip/index.html

if I understood you correctly you want to position your big image relatively to the cursor. One solution in jquery (i'm not 100% sure of the code here but the logic is there):
$('.thumb').hover(function(e){
var relativeX = e.pageX - 100;
var relativeY = e.pageY - 100;
$(.image).css("top", relativeY);
$(.image).css("left", relativeX);
$(.image).show();
}, function(){
$(.image).hide();
})

Jquery is the easiest route. position absolute is key.

^ In addition to the above, here is a working JS Fiddle. Visit: jsfiddle.net/hdwZ8/1/
It has been roughly edited so it isnt using just overall IMG css tags, easy for anyone to use with this now.
I am using this script instead of a Lightbox in my Wordpress client site, a quick zoomed in image with mouse over is much nicer IMO. It is very easy to make efficient galleries especially with AdvancedCustomFields plug-in & in the WP PHP repeater loops!