Develop Reference

Change image based on images position on the screen

I've been trying to find a way that an image will fade and switch to a different image when the images container is visible and scrolled up a certain amount on screen and changes back when you scroll the element back down.
I found the exact functionality being used on this page: http://www.asicstiger.com/gb/en-gb/knit (the 4th section down under the video). I know you could use a jQuery scrollTop method in some cases and all the examples I've found on stackoverflow so far mention this but it doesn't work on my responsive page as elements move around on the page so the images I wan't to switch aren't always at the same hight from page top.
.top {height:100vh;width:100%; background:red}
.scrollImageSwap {width:100%;}
.scrollImageSwap img {width:100%;}
.scrollImageSwap .image1 {display:block;}
.scrollImageSwap .image2 {display:none;}
.bottom {height:100vh;width:100%; background:red}
<div class="top"></div>
<div class="scrollImageSwap">
<img class="image1" src="https://openclipart.org/image/800px/svg_to_png/19972/ivak-TV-Test-Screen.png" alt="image 1" />
<img class="image2" src="http://www.hertenkamp-enkhuizen.nl/test/wp-content/uploads/sites/7/2015/06/testbeeld.jpg" alt="image 2" />
</div>
<div class="bottom"></div>
Can anyone help?

OP noticed the solution worked, but did not use a fade. I have updated the answer.
You can use jQuery's fadeIn(); and fadeOut(); to achieve this:
$(document).scroll(function(){
if($(this).scrollTop() >= $('.scrollImageSwap').offset().top - 5) {
$(".image1").stop().fadeOut(1000, function(){
$(".image2").stop().fadeIn(1000);
});
}
else {
$(".image2").stop().fadeOut(1000, function(){
$(".image1").stop().fadeIn(1000);
});
}
});
This should work properly, as shown in this fiddle.

images change onHover jquery

I need many images to change when mouse hover on a image.Me try one but its change only one image how can i change many images on hover on image.My try fiddle
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});

If I correctly understand your problem, you want an image slider when you hover on the container.
The images are in inline-block are they are set to white-space: nowrap. So, that they don't wrap. container is set to overflow: hidden, it hides the extra images.
The images are shown by animating the margin-left of the inner div. So, it is like the inner container is moving but the container stays still.
You can modify it however you like, vertical animation, using css transitions and stuff.
I cannot post the code here because of the shortened url of the images.
You can test and modify it here, it's a pen.

jQuery Photo Gallery Bug if mouse moves fast

This is a very weird bug, my code is most probably correct, since it works in most cases except when mouse is moving around on elements very fast.
Here is my CSS:
<style type="text/css">
.fadeto {
opacity:0.4;
position:box;
}
.selected {
opacity:1.0;
border-style:solid;
border-color:gold;
}
</style>
Here is my html body:
Click over the images to toggle their permanent visibility. Or click here to toggle them all:
Toggle
<div style="margin:50px;">
<img class="fadeto" src="nature.jpg" /><!--you can change the source-->
<img class="fadeto selected" src="nature.jpg" /><!--by default selected, just not to waste time selecting elements-->
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
</div>
<div id="feedback"></div>
Here is my jQuery script:
<script>
$(document).ready(function(){
$('.fadeto').hover(function(){
$(this).fadeTo(100, 1);
},function() {
if(!$(this).hasClass('selected'))
$(this).fadeTo(100,0.4, function(){
$(this).removeAttr('style'); //removed IF not selected
document.getElementById('feedback').innerHTML +=$(this).attr('style');
});
else {
$(this).removeAttr('style'); //removed IF selected
document.getElementById('feedback').innerHTML +=$(this).attr('style');
}
})
.click(function(){
$(this).toggleClass('selected');
});
$('#Toggle_Button').click(function(){
$('.fadeto').toggleClass('selected');
});
});
</script>
Whenever I move the mouse around the images in normal speed, with no rush, everything works perfectly. But whenever I try and move the mouse over the elements fast, it causes a bug with the Toggle button: Some elements remain with opacity 1.0.
I remove the style attribute after each animation is finished, because I don't want any element to stay with style="opacity:1;", since it would overwrite any conflicting CSS Class Rule that is applied to the element.
I have included the feedback <div>, so that I can keep track whether the style attribute is removed or not, and yes, no matter how fast the mouse moves, the code inside there is executed, and style is undefined.
Also, I know that stylesheets are read from top to bottom, so I have included the 'selected' class after 'fadeto', since its opacity rule has more priority than the other's.
If there is a problem with my code, please help me? Otherwise, what can I do? What do you suggest?

I would strongly suggest hoverIntent when you play around mouse over and mouse out
$(selector).hoverIntent({
over: function(){},
out: function(){},
selector: '.selector'
});
http://cherne.net/brian/resources/jquery.hoverIntent.html
Hope this helps

I had a similar problem before and found that using mouseenter and mouseleave rather than mouseover and mouseout solved the issue

Hover option, or javascript

I'm making a practice website and I'm trying to add a hover effect to an image, the image being arrows to click back or forward. I assume something is wrong with the code, within its structure, or perhaps I would need to use javascript to achieve a rollover effect.
I made a fiddle to show the current work: http://jsfiddle.net/Z7VTy/1/
...I'm new to everything.
<body>
<div id="slider_wrapper">
<div id="slider_container">
<div class="controllers" id="previous"></div>
<div id="slider">
<img src="Images/slide_two.png" width="960" height="425" />
<img src="Images/slide_one.png" width="960" height="425" />
<img src="Images/slide_three.png" width="960" height="425" />
</div>
<div class="controllers" id="next"></div>
</div>
</div>
</body

not sure I understand your issue
demo
#previous:hover {
background-image: url(left_on.png);
}
would change the image

You can change slider_wrapper container from div to a tag and use hover state for the slider_wrapper. change display mode for #previous and #next to none, and add following style
#slider_wrapper:hover #previous, #slider_wrapper:hover #next{
display:block;
}
see an example here http://jsfiddle.net/Z7VTy/3/

JQuery: How to switch image back and forth?

I have the following HTML:
<div class="listing ref_1">
...
<div><img src="toggleON.png" /></div>
...
</div>
<div class="listing ref_2">
...
<div><img src="toggleON.png" /></div>
...
</div>
<div class="listing ref_3">
...
<div><img src="toggleON.png" /></div>
...
</div>
What I want to do is programmatically change the toggleON.png image to toggleOFF.png.
I'm trying to use the following code to do so but it's not working:
$('.ref_2').src("toggleOFF.png");
Anyone know what I'm doing wrong because the code above doesn't work.
Also, is there a better way to handle this?

'.ref_2' points to the div, you'll have to get to the image within the div
$('.ref_2 img').attr("src","toggleOFF.png");
would probably do it for you.

You need to select the img tag in side .ref_2
$('.ref_2 img').attr("src","toggleOFF.png");
It might be better though to put the image definition in css and swap classes.
<style>
.toggleOn div{
background: url('toggleOn.png') no-repeat;
}
.toggleOff div{
background: url('toggleOff.png') no-repeat;
}
</script>
<div class="listing ref_1 toggleOn">
...
<div></div>
...
</div>
<div class="listing ref_2 toggleOn">
...
<div></div>
...
</div>
<div class="listing ref_3 toggleOn">
...
<div></div>
...
</div>
<script>
$('.ref_2').removeClass('toggleOn').addClass('toggleOff');
</script>
This makes it really easy to change the image and lets you use the class as a state toggle if you need to check on it later.
Also it looks like you are using ref_# as a unique identifier, if so then it would be better to make it the ID of the div, will speed up jQuery's ability to find the element.

What I like to do is put both images in my main document in a hidden div, like:
<div style="position: absolute; visibility: hidden">
<img id="toggleON" src="/whatever/toggleON.png" .../>
<img id="toggleOFF" src="/whatever/toggleOff.png" .../>
</div>
That way they're both in the browser's cache. Then, to toggle an image from one to the other, you can do something like:
$(".whatever img").replaceWith($("#toggleON").clone());

Another solution is to put both image on absolute position, with the default one is set to the front (Using z-index property).
On mouse hover, you can hide the one in the front and the toggled-off image will showed up. The advantage of using this method is you could actually use animation technique to make it even smoother. It's what I did here. (It would be better if you have an additional wrapper div and set the mouse hover event on it)