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/

Animations: jQuery vs CSS?

I've been building a custom jQuery "carousel" (slider) which continuously iterates over three images. So far that's working well, however I've had trouble trying to write code that changes the 'src' attribute of '#slideshow' while simultaneously triggering fadeIn or fadeOut.
My question: Am I tackling this properly (using jQuery) or should I resort to toggling a css animation instead?
Code:
$(function() {
var slides = ['img/slide1.jpg', 'img/slide2.jpg', 'img/slide3.jpg'];
function changeSlide(arr) {
$('#slideshow').attr('src', arr[0]);
var i = 1;
setInterval(function() {
$('#slideshow').attr('src', arr[i]);
i++;
if (i >= arr.length) {
i = 0;
}
}, 3500);
}
changeSlide(slides);
});
For clarification my HTML for the carousel looks like such:
<div id="carousel">
<img id="slideshow" src="img/slide1.jpg">
</div>

Try loading all images initially to avoid requesting images continuously , substitute setting class to slideshow for id , utilize complete callback function of .fadeIn() , .fadeOut() on first image in parent element , next image in callback
$(function() {
function changeSlide(el) {
$(el)
.fadeIn(1500, function() {
$(this).fadeOut(1500, function() {
changeSlide(this.nextElementSibling || this.parentElement.firstElementChild)
})
})
}
changeSlide($(".slideshow:first"));
});
.slideshow {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="carousel">
<img class="slideshow" src="http://lorempixel.com/50/50/nature" />
<img class="slideshow" src="http://lorempixel.com/50/50/sports" />
<img class="slideshow" src="http://lorempixel.com/50/50/cats" />
</div>

jQuery in my opinion is far better option than using CSS. You are going good. Every code has some or the other bug which can be fixed later. You just have to be observant. That's all!

I've had trouble trying to write code that changes the 'src' attribute of '#slideshow' while simultaneously triggering fadeIn or fadeOut.
If that's a way you want to do it, here's the way it could be done:
1) Preload all pictures to avoid src-change-triggered load.
2) Add position:relative to your #carousel, then add an additional img inside your slider.
3) Change position to absolute for both imgs
4) Hide one 'img'
Alternate between images, so :
1 - you change the src of hidden one to "next" image
2 - you simultaneously fade out visible and fade in invisible one
3 - repeat

How do I make a link to an image in a slideshow?

For my portfolio website I made a slideshow with cycle2 carousel with some big images on my work page.
All images are also displayed on the homepage really small.
I would like to make the smaller images on the homepage function as links to the bigger images within the slideshow.
I tried to give all images in the slideshow a different id to link to. But the link always goes to the first image of the slideshow and not the image with the id. Can anyone maybe give me some advice on this?
Thank you,
Noa

You'll need to utilize the cycle2 api to transition the slideshow to the appropriate slide when the user clicks the link. Here's the relative snippet from the api documents:
// goto 3rd slide
$('.cycle-slideshow').cycle('goto', 2);
You just have to use the index numbers of the slide in question. You would run this code then have the link point to the anchor of the slideshow.
Rest of the documentation on the api can be found here: http://jquery.malsup.com/cycle2/api/
UPDATE
$(document).ready( function() {
var field = 'slide';
var url = window.location.href;
var slideNumber = url.indexOf('?slide');
if ( slideNumber === -1 ) {
slideNumber = url.indexOf('&slide');
}
if ( slideNumber >= 0 ) {
$('.cycle-slideshow').cycle('goto', url[slideNumber + 1]);
}
});

Parallax background doesn't work (Only one image)

So I saw a nice background on http://terraria.org/about and thought by myself I want to that too since I run a Terraria Server.
So I have searched around the net for a function that could make this possible.
I have tried various things but this is the code I used:
link:
http://codepen.io/anon/pen/DCGuz
As you can see only the first image (which is on the top layer) moves, I was wondering how I could make all the images move as shown on http://terraria.org/about.
Also the background DOESN'T MOVE when I mouse over the logo or webpage itself while it SHOULD move
when I move my mouse over the website, it's not supposed to be a mouse-over image.
PS: When I try the moving background on my website (full screen) in my browser it's rather slow and doesn't move smooth, but it does move quick and smooth on terraria.org/about. Is there a way to fix this issue?
Thanks in advance!
EDIT: As you can see on my website http://teeria.net/ only the first image moves, and it's not smooth.

t.niese already said it: You create all these mouse-event handlers but only the topmost one gets called.
Instead, use $(window).mousemove() once and do all your stuff there. Also you repeatedly lookup the moving div with jQuery (every time the mouse moves) which might slow the animation down a bit.
You can save yourself quite a lot of typing/copying by using javascript closures: How do JavaScript closures work?
Here's how it looks with the suggested changes: http://codepen.io/anon/pen/KgFhI
Edit: Make sure you are not violating any copyrights when using the image on your own website!
Bonus-edit: window.requestAnimationFrame is neat: http://codepen.io/anon/pen/yEbnd

The easiest way would be to use CSS3. Basically you will need layers on top of layers.
Check out
Here-->https://github.com/abaddonGIT/paralax (translate to english)
demo-->http://angular.demosite.pro/paralax/
found here-->http://jqueryplugin.net/woolparalax-jquery-plugin-parallax-effect-css3/#sthash.XWD5Fr6P.uxfs
very simple
so it would be like
window.onload = function () {
$ ('# Wool-paralax). WoolParalax ();
}
<Div id = "wool-paralax">
<div class="wool-layer" data-shift="0.02">
<Img src = "img / 1.png" alt = "" />
</div>
<div class="wool-layer" data-shift="0.03">
<Img src = "img / 2.png" alt = "" />
</div>
<div class="wool-layer" data-shift="0.04">
<Img src = "img / 3.png" alt = "" />
</div>

Giving fadeIn fadeOut effect on changing the image src

I was working with responsive web design and I wanted to slide some images in a page. I tried some plugins but the problem with plugin is it uses width and height property and some also assign position absolute. So I thought of changing the src of image myself using js and it worked fine, but can I give some transition effect to it?
What I have done is:
var i =0;
var total =2;
window.setInterval(function(){
show_hide();
}, 1000);
function show_hide()
{
var img=$('.image-holder img, .image-holder2 img');
//alert(img.length);
if(i%2==0)
{
img[0].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
img[1].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
i=0;
}
else
{
img[0].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
img[1].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
}
i++;
}
my html
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>

Answering the title, giving a fadeIn/fadeOut while changing the src is easy, just let the element fadeOut, change the src and let it fade in again.
Also, I would like to point out that with jQuery, iterating through a class like that, ruins the purpose of using it's own selector ".each()"
$('.image-holder img, .image-holder2 img').each(function() {
$(this).fadeOut(200,function() {
$(this).attr('src', 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png');
$(this).fadeIn(200);
});
});
http://jsfiddle.net/tq9nV/1/

Use jQuery with animate(). You can also run show(N ms) on one of the images and hide(N ms) on the other. You can also choose how to show/hide the images using effects (like fadein and fadeout).
Also, have a look at http://api.jquery.com/fadeIn/ and http://api.jquery.com/fadeOut/