Develop Reference

JS: Hovered images don't load smoothly

I'm using JS to change pictures on hover... but the hovered pictures don't load smoothly. Any help is appreciated.
<script type="text/javascript">
$( document ).ready(function() {
$('.img-grey').on({
mouseenter: function (e) {
var greysrc = $(this).attr('src');
var colorsrc = greysrc.replace("1.jpg", "2.jpg")
$(this).attr('src', colorsrc);
},
mouseleave: function (e) {
var colorsrc = $(this).attr('src');
var greysrc = colorsrc.replace("2.jpg", "1.jpg")
$(this).attr('src', greysrc);
}
})
});
</script>

Alternatively this task can be solved with css. Check the css attribute selectors https://www.w3schools.com/css/css_attribute_selectors.asp
All you need is to create next html structure:
<div class="container">
<img src="1path-to-1.jpg" />
<img src="1path-to-2.jpg" />
</div>
<div class="container">
<img src="2path-to-1.jpg" />
<img src="2path-to-2.jpg" />
</div>
See attached snippet
.container [src$="2.jpg"] {
display: none;
}
.container:hover [src$="1.jpg"] {
display: none;
}
.container:hover [src$="2.jpg"] {
display: inline;
}
.container {
float: left;
}
<div class="container">
<img src="https://www.gravatar.com/avatar/8aecf6164a04433529bd7702f1b5f59a?s=128&d=identicon&r=PG&f=1&1.jpg" />
<img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&2.jpg" />
</div>
<div class="container">
<img src="https://www.gravatar.com/avatar/b8367b2f25ceee4d54595495b4e51312?s=128&d=identicon&r=PG&f=1&1.jpg" />
<img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&2.jpg" />
</div>
<div class="container">
<img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&1.jpg" />
<img src="https://www.gravatar.com/avatar/8aecf6164a04433529bd7702f1b5f59a?s=128&d=identicon&r=PG&f=1&2.jpg" />
</div>

If you want to preload your images you should put them into DOM or add as background properties. Here's modified version of your code that adds hidden <img /> elements next to existing. I haven't run it, but it should works
$( document ).ready(function() {
$('.img-grey').map(function () {
var temp = document.createElement('img');
temp.src = this.src.replace("1.jpg", "2.jpg");
temp.style.display = 'none';
$(this).parent().append(temp);
return this;
}).on({
mouseenter: function (e) {
var greysrc = $(this).attr('src');
var colorsrc = greysrc.replace("1.jpg", "2.jpg")
$(this).attr('src', colorsrc);
},
mouseleave: function (e) {
var colorsrc = $(this).attr('src');
var greysrc = colorsrc.replace("2.jpg", "1.jpg")
$(this).attr('src', greysrc);
}
})
});

How to change images on hover on and on with jQuery?

I've got such a problem:
inside my <div></div> there are always 5 images, only 1 is visible other 4 are hidden.
<style>
#id2, #id3, #id4, #id5 { display: none; }
</style>
<div>
<img id="id1" src='image.jpg'>
<img id="id2" src='image.jpg'>
<img id="id3" src='image.jpg'>
<img id="id4" src='image.jpg'>
<img id="id5" src='image.jpg'>
</div>
My aim is to change them in the constant time stamp (for example 1 second) on hover.
$('document').ready(function(){
$('#1').hover(function(){
// #id1 hide
// #id2 show
// #id2 hide
// #id3 show
// #id3 hide
// #id4 show
// #id4 hide
// #id5 show
// #id5 hide
// #id1 show
// and so on...
});
});
It's going to be used as a video preview, divs and inner images are going to be generated from MySQL DB.
Any help appreciated.

Here's a working example, based on what I understood from your question:
$('.preview').hover(function() {
var $that = $(this),
toggleFunction = function() {
var $visibleImg = $('img:visible', $that),
$nextImg = $visibleImg.next('img');
if(!$nextImg.length) {
$nextImg = $('img:first-child', $visibleImg.parent());
}
$nextImg.show().siblings().hide();
};
$that.data('interval', window.setInterval(toggleFunction, 1000));
toggleFunction();
}, function() {
window.clearInterval($(this).data('interval'));
});
.preview img {
display: none;
}
.preview img:first-child {
display: block;
}
.preview {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<img src="https://s24.postimg.org/r74b0vcu9/frame_0.gif" />
<img src="https://s24.postimg.org/a7vclm1mp/frame_15.gif" />
<img src="https://s24.postimg.org/600kcv075/frame_30.gif" />
<img src="https://s24.postimg.org/7t82exarl/frame_45.gif" />
<img src="https://s24.postimg.org/5d6912sox/frame_60.gif" />
</div>

Flying effect in HTML using jquery

This is my scenario,
I have an image named img.png shown on top of a page, I have another image named fly_img.png (same size of img.png) located at the bottom of the page.
I've built a button, when I click it I would like the fly_img.png to fly/animate and be placed over the img.png.
I can't achieve the above scenario. But I tried some code, let me share it with you.
$("#clickme").click(function() {
var p = $("#img").offset();
var v = $("#fly_img").offset();
$("#fly_img").animate({
opacity: 1,
bottom: v.top - p.top,
left: v.left - p.left
}, 1000, function() {
// Animation complete.
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<button id="clickme">
Click here
</button>
<br />
<img id="img" src="img.png" alt="" ">
<br />
<div style ="padding-left :350px;padding-top:150px ">
<img id ="fly_img " src="fly_img.png " style="position: absolute; "alt=" "/>
</div>

You can use this code:
$("#clickme").click(function () {
var p = $("#img").offset();
var v = $("#fly_img").offset();
$("#fly_img").css({"top": v.top+"px", "left": v.left+"px"});
$("#fly_img").animate({
opacity: 1,
top:p.top,
left:p.left
}, 1000, function () {
// Animation complete.
});
});
This will make the picture fly from it's current spot to the other image's spot.
working fiddle: fiddle

You defining in the animation function where your image should go to. So you just need to set the left and top animation attributes to the one where the image should fly to:
var to = $("#img").offset();
var from = $("#fly_img").offset();
$("#fly_img").animate({
opacity: 1,
top:to.top,
left:to.left
}, 1000, function () {
// Animation complete.
});
Fiddle:
http://jsfiddle.net/9s22xhsd/1/

As you are using absolute positioning and then animating the left and top, you could also use just the CSS transition:
/* jQuery */
$("#btn1").on("click", function(e) {
$("#ifly").addClass("anim");
});
$("#btn2").on("click", function(e) {
$("#ifly").removeClass("anim");
});
/* CSS */
#i {
position: absolute;
left: 50px; top: 50px;
}
#ifly {
position: absolute;
left: 80%; top: 60%;
transition: 1s all ease;
}
#ifly.anim {
left: 50px; top: 50px;
}
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="btn1" type="button" value="Click" />
<input id="btn2" type="button" value="Reset" />
<hr/>
<img id="i" src="http://lorempixel.com/g/100/100" />
<img id="ifly" src="http://lorempixel.com/100/100" />

How to add prev and next button in a simple jquery slideshow code

i have found this simple jQuery code for a slideshow below from this blog.
http://leavesofcode.net/2012/08/17/simple-slideshow/
It perfectly works in the project i am working on right now, where i can call the images with jQuery load() function and the slideshow still works. Although i would like to implement a previous and next button in the same code if its possible. Any help would be really appreciated. Please help thanks.
Here is the code: http://jsfiddle.net/mblase75/CRUJJ/
<script>
$(document).ready(function() {
setInterval(function() {
var $curr = $('.slideshow img:visible'), // should be the first image
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
// if there isn't a next image, loop back to the first image
$next.css('z-index',2).fadeIn('slow', function() { // move it to the top
$curr.hide().css('z-index',0); // move this to the bottom
$next.css('z-index',1); // now move it to the middle
});
}, 6000); // milliseconds
});
</script>
<div class="slideshow">
<img src="first-image.jpg" width="500" height="100" alt="first image">
<img src="second-image.jpg" width="500" height="100" alt="second image">
<img src="third-image.jpg" width="500" height="100" alt="third image">
<img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<style>
.slideshow {
position: relative; /* necessary to absolutely position the images inside */
width: 500px; /* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block; /* overrides the previous style */
}
</style>

You'll need to create functions for getNext and getPrev and attach those as event handlers to the elements you want to move you forward and backward through the slideshow.
I created a common transition function which is shared by both the getNext and getPrev functions so that the transition code can be shared.
In the below example, clicking the next or previous buttons will pause the slideshow, though it would be easy to change it to continue the automatic transitions.
Working Demo
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}

Use your code in click event of next button.
Something like this:
$("#button_id").click(function(){
all your lines in **setInterval**
});
For previous button use .prev instead of .next

responsive slideshow free jquery script
I used the above script in a project recently and its responsive, lightweight, fully customizable with or without buttons. My recommendation..

Add a couple of img in your HTML like this:
<div class="slideshow">
<img src="first-image.jpg" width="500" height="100" alt="first image">
<img src="second-image.jpg" width="500" height="100" alt="second image">
<img src="third-image.jpg" width="500" height="100" alt="third image">
<img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<img src="prev.jpg" width="50" height="50" id="imgPrev">
<img src="next.jpg" width="50" height="50" id="imgNext">
and change your javascript like this:
$(document).ready(function() {
$("#imgNext").click(function() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
});
$("#imgPrev").click(function() {
var $curr = $('.slideshow img:visible'),
$prev = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
$prev.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$prev.css('z-index',1);
});
});
set
Interval(function() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 6000); // milliseconds
});
I tried it with your code on fiddler and it works :)

I know this is old, but correct the below:
$('.slideshow :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('#slideshow');
.slideshow {
width: 100%;
position: relative;
height: auto;
}
.slideshow img:first-child { position:relative; } /*auto height adjust*/
.slideshow img {
top: 0;
left: 0;
width: 100%;
max-width: 600px;
height: auto;
position: absolute;
}
Just trying to figure on a reverse. All the above are nice, but the transitions were, uh, not smooth. Using class's for a reason on this one.

Try
$('.next').click(function(){
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
})

Javascript slideshow cycles fine twice, then bugs out

I followed a tutorial to create a simple javascript slideshow but I am having a strange bug... The first 2 cycles work perfectly, but once the counter resets the slideshow begins showing the previous slide quickly then trying to fade in the correct slide. Any idea what is causing this?
I have 3 images (named Image1.png, Image2.png, and Image3.png) in a folder for my simple slideshow and 3 divs set up like this:
<div id="SlideshowFeature">
<div id="counter">
3
</div>
<div class="behind">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
<div class="infront">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
</div>
My javascript looks like this
var nextImage;
var imagesInShow;
var currentImage;
var currentSrc
var nextSrc
function changeImage() {
imagesInShow = "3";
currentImage = $("#counter").html();
currentImage = parseInt(currentImage);
if (currentImage == imagesInShow) {
nextImage = 1;
}
else {
nextImage = currentImage + 1;
}
currentSrc = $(".infront img").attr("src");
nextSrc = "SlideShow/image" + nextImage + ".png";
$(".behind img").attr("src", currentSrc);
$(".infront").css("display", "none");
$(".infront img").attr("src", nextSrc);
$(".infront").fadeIn(1000);
$("#counter").html(nextImage);
setTimeout('changeImage()', 5000);
}
$(document).ready(function () {
changeImage();
});
EDIT:
Also here is my CSS
#SlideshowFeature
{
text-align:center;
margin: 0 auto;
width:800px;
background: #02183B;
height:300px;
float: left;
overflow:hidden;
display:inline;
}
#SlideshowFeature div
{
width: 800px;
height:300px;
position:absolute;
}
#counter
{
display:none;
}

The problem seem to be in your HTML structure (and not in your JS):
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
I think you meant to put image1.png and then image2.png

.infront must be in front and .behind must be behind
.behind {
z-index: 1;
}
.infront {
z-index: 255;
}
And I also moved re-scheduling logic to fadeIn callback:
$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)});
$("#counter").html(nextImage);
//setTimeout('changeImage()', 2500);
Looks good for me now.