Develop Reference

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.

anchor tag is not working with image http://www.smoothdivscroll.com/demo.html

actully i m trying to use anchor tag with this slider image
<div class="smallsliderdiv">
<p class="smallslider"> Top websites </p>
<div id="makeMeScrollable">
<img width="400px" height="300px" src="g1.jpg"/>
<img width="400px" height="300px" src="g2.jpg"/>
<img width="400px" height="300px" src="g3.jpg"/>
<img width="400px" height="300px" src="k1.jpg"/>
<img width="400px" height="300px" src="k2.jpg"/>
</div>
<div>
but its not working images are not getting showed when i do like this? i dont want the alternative way .. what is the problem with this slider?? last two images have no problem .. when i remove anchor tag all is fine but i need this. Thank you.
This is working fine with html but not with the slider i m using which is http://www.smoothdivscroll.com/demo.html use js and css from this site
and i am using for each loop for echoing image address and link address .

This is how I would do it, since your .js or .css slider files probably has an issue with wrapping the images with an anchor tag, so instead of wrapping the images with an anchor you can add an onclick event to the img and have the javascript link the image. and manually change the cursor to a pointer in the CSS.
See fiddle for example: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/47/
html
<img onclick="image1()" width="400px" height="300px" src="http://lorempixel.com/400/200/"/>
CSS
#makeMeScrollable > img:hover{
cursor: pointer;
}
Javascript
function image1(){
window.location.href = 'www.google.com';
}

How to change zIndex of an element on click in jquery?

I want to change z-Index on button click. I have a static image and a dynamic div. Now I want to send the #imgDiv1 behind the static image. But I don't know how to do this. I tried everything but all in vain.
Here is the live demo. jholo.com I want to implement this concept in this web application.
Here is my mark up
<div id="safeZone">
<img src="default.png" />
<div id="imgDiv1">
<img src="myPic.jpg" />
</div>
</div>
<input id="back" type="button" value="Send To Back"/>
<input id="front" type="button" value="Bring To Front"/>
jQuery
$(document).ready(function(){
$("#back").click(function(){
$("#imgDiv1").css("z-index","-10");
});
$("#front").click(function(){
$("#imgDiv1").css("z-index","10");
});
});

The z-index style property only takes affect on elements that are not position: static. So, you will need to set the position property before you can see the impact of z-index.
HTML:
<button id="up">Up</button><button id="down">Down</button>
<div id="container">
<img id="img1" src="http://dummyimage.com/300x200/ff0000/fff.jpg">
<img src="http://dummyimage.com/300x200/00ff00/fff.jpg">
</div>
CSS:
#container img {position: absolute;}
#container {height: 200px; width: 300px;}
Code:
$("#up").click(function(){
$("#img1").css("z-index", -10);
});
$("#down").click(function(){
$("#img1").css("z-index",10);
});
Working demo: http://jsfiddle.net/jfriend00/5Efm3/
Edit - Responding to your additional edit:
To achieve the effect you're looking for, you will also need the snowflake like image to have transparency inside the snowflake shape thus allowing the behind image to show through which means it can't be a JPG,. It could be GIF or PNG.

I used opacity instead of z-index... is that helpful?
$("#down").click(function(){
$("#img1").css("opacity", 0.0);
$("#img2").css("opacity", 1.0);
});
$("#up").click(function(){
$("#img2").css("opacity",0.0);
$("#img1").css("opacity", 1.0);
});
the js fiddle link is.. http://jsfiddle.net/6rwBR/ hopefully this helps

How to make background move slower than text in Skrollr?

tIt seems that I did as it is in example here but my background moving faster than text. What did I do wrong?
My HTML:
<div id="loader-bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;"></div>
<div id="skrollr-body">
Content text...
</div>

The demo uses background-attachment:fixed to get full control of the movement.

Maybe you forgot to set the class attribute on your loader-bg div
class="skrollable skrollable-between"

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)