CODEWITHSUNDEEP
javascriptjqueryhtml
Maarten Peels
Maarten Peels

Reputation: 1022

Change images on hover

I have a webpage with an x amount of images, when i hover over an image, i want to have it change every second to an image from a list.

This is what i have come up with: Fiddle

var images = [];
images[0] = "img1.png";
images[1] = "img2.png";
images[2] = "img3.png";
images[3] = "img4.png";
images[4] = "img5.png";
images[5] = "img6.png";

var i = 0;
setInterval(fadeDivs, 1000);

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100);
    })
    i++;
}

But there are 2 problems with this,

Do you guys have any ideas? I don't need code, just a push in the right direction :)

To clarify: i have an x amount of images on a page, let's say 25, when i hover over one of the 25 it needs to start changing, i can't have 1 list with images(like the answers) because every image(of the 25) will have a different list.

Upvotes: 3

Views: 2658

Answers (6)

insertusernamehere
insertusernamehere

Reputation: 23570

Hope, this is what you're looking for. It adds all images to a container and starts an endless rotation when hovering. The interval is stopped, when leaving the element.

HTML

<div class="wrapper">
    <img class="active" src="http://placehold.it/200x200&amp;text=X1" alt="">
</div>

<div class="wrapper">
    <img class="active" src="http://placehold.it/200x200&amp;text=Y1" alt="">
</div>

CSS

.wrapper {
    position: relative;
    height: 200px;
    margin-bottom: 250px;
}

.wrapper img {
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.wrapper img.active {
    opacity: 1;
}

JavaScript

var wrapper = $('.wrapper');
var images = null;
var running = null;

images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X3', alt: '' } ) );
wrapper.eq(0).append(images);

images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y3', alt: '' } ) );
wrapper.eq(1).append(images);

wrapper.hover(
    function() {
        var e = $(this);
        running = setInterval(function() {
            var c = e.find('.active');
            var n = c.next();

            if (!n.length) {
                n = e.children().first();
            }

            c.removeClass('active');
            n.addClass('active');    
        }, 1000);
    },
    function() {
        clearInterval(running);
        running = null;
    }
);

Demo

Try before buy

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28387

when i hover over an image, i want to have it change every second to an image from a list.

  1. Build the array
  2. Pre-load images for flicker-free experience
  3. Start a timer on mouseover
  4. Cycle the array changing the src
  5. Stop the timer on mouseout

I want to have all the image links in the html like: etc. contained in a div and make it visible or not(think that's the best way)

That's ok, but it will be better to create the images dynamically based on the size of your array, so that you don't have to hard-code the tags and you can easily dispose them off when required.

Here is a simple example (Fiddle: http://jsfiddle.net/vz38Lzw7/1/)

Snippet:

var x = [
    'http://lorempixel.com/200/200',
    'http://lorempixel.com/201/200',
    'http://lorempixel.com/200/201'
];
var index = 0, $img = $("#image1");

/*--- Pre-load images ---*/
var d = []; // create an array for holding dummy elements
for (var i = 0; i < x.length; i++) {
    d[i] = $("<img>"); // create an img and add to the array
    d[i].attr('src', x[i]).hide(); // add src to img and hide it
    $("body").append(d[i]); // add the img to body to start load
}

/*--- Bind events ---*/
$img.on("mouseover", function () {
    timer = setInterval(changeImages, 1000);
});

$img.on("mouseout", function () {
    clearInterval(timer);
});

/*--- Function to cycle the array ---*/
function changeImages() {
    index = (index + 1) % x.length;
    $img.fadeOut(250, function() {
        $(this).attr('src', x[index]).fadeIn(250);
    });
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="image1" src='http://lorempixel.com/200/200' />

Upvotes: 0

Siamak Ferdos
Siamak Ferdos

Reputation: 3299

JSFiddle

 var images = [];
    images[0] = "img1.png";
    images[1] = "img2.png";
    images[2] = "img3.png";
    images[3] = "img4.png";
    images[4] = "img5.png";
    images[5] = "img6.png";

    var interval;
    var i = 0;

    $(function () {
        $("img").mouseover(function () {
            interval = setInterval(fadeDivs, 1000);
        })
       .mouseout(function () {
                clearInterval(interval);

        });
    });

    function fadeDivs() {
        i = i < images.length ? i : 0;
        $('img').fadeOut(100, function() {
            $(this).attr('src', images[i]).fadeIn(100);
        });
        i++;
    }

Upvotes: 3

Jamie Barker
Jamie Barker

Reputation: 8246

Here's a very simple solution, not much changed to your code.

I've added a hover listener to the image and a variable to the interval so that it can be cleared when you un-hover. Move a thing or two around as well.

https://jsfiddle.net/2nt2t09w/7/

var images = [];
images[0] = "http://placehold.it/100x100";
images[1] = "http://placehold.it/200x200";
images[2] = "http://placehold.it/300x300";
images[3] = "http://placehold.it/400x400";
images[4] = "http://placehold.it/500x500";
images[5] = "http://placehold.it/600x600";

var MyInterval;
var i = 0;
$('img').hover( function() {
    MyInterval = setInterval(fadeDivs, 1000);
    var $this = $(this);
    function fadeDivs() {
        i++;
        i = i < images.length ? i : 0;
        $this.fadeOut(100, function(){
            $(this).attr('src', images[i]).fadeIn(100);
        })
    }
}, function() {
    clearInterval(MyInterval);
});
img {
    height:100px;
    width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/100x100" />

Upvotes: 0

Jegan
Jegan

Reputation: 595

Create your images with data-index=0 and class identity.

//call fadeDivs on mouse over 
$('.yourImages').hover(function(){
  setInterval(fadeDivs(this),100);  
});

//This will create unique fadeOut for all images which have mouse over action
//And separate index loadind
function fadeDivs(image) {   
   $(image).fadeOut(100, function(){
       var index = $(this).data('index');
       index  = index  < images.length ? index : 0;
       $(this).attr('src', images[index]).fadeIn(100);
       $(this).attr('data-index',index)
   });
}

Upvotes: 0

Reena Parekh
Reena Parekh

Reputation: 941

Try this: http://jsfiddle.net/6sbu79cy/1/

<div id="myimage">
<img src="http://www.avsforum.com/photopost/data/2277869/9/9f/9f50538d_test.jpeg" />
</div>



 var images = [];
images[1] = "http://www.avsforum.com/photopost/data/2277869/9/9f/9f50538d_test.jpeg";
images[2] = "http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg";


var i = 0;

$('#myimage').hover(function(){ fadeDivs() });


function fadeDivs() {
    setInterval(function(){
    i = i < images.length ? i : 0;
    console.log(i)    
    $('img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(500);
    })


    i++;
         }, 2000);
    setTimeout(function(){},1000);
}

Upvotes: 0

Related Questions