making images move itself through jquery

Question

I am using a div where there are four images are displayed

<script>
$(document).ready(function(){
    var img1 = "<?php echo $product['image1']; ?>";
    var img2 = "<?php echo $product['image2']; ?>";
    var img3 = "<?php echo $product['image3']; ?>";
    var img4 = "<?php echo $product['image4']; ?>";
    $("#imgTag").fadeOut(8000).attr('src',img2);
 });
</script>

<div id="imageDiv">
   <img src="<?php echo $product['image1']; ?>" id="imgTag" />
</div>

Now I don't know how to put other images such as img3 img4 in src attribute and make it repeatable in infinite loop. Is there are any way to achieve this is jquery that images change in infinite iteration?

score 0 · Answer 1 · answered Jan 08 '17 at 10:10

0

Try like this...

$(document).ready(function(){
    function blick_image(){
    img1 ="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png";
    img2 = "https://homepages.cae.wisc.edu/~ece533/images/baboon.png";
    img3 = "https://homepages.cae.wisc.edu/~ece533/images/boat.png";
    var images = [img1,img2,img3];//creates array
    images.forEach(function(element,index,arr){
    alert(element);
    });
    }
    setInterval(blick_image,1000);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Fiddle here..https://jsfiddle.net/fmmp74zv/

answered Jan 08 '17 at 10:10

Hikmat Sijapati

6,869
1
9
19

`$("#imgTag").fadeOut(1000).attr('src',element).fadeIn();` I tried this! But it shows the same image – Ali Rasheed Jan 08 '17 at 10:39
for more see here http://coolajax.net/create-image-blink-fade-in-effect-using-jquery-and-css3/ – Hikmat Sijapati Jan 08 '17 at 10:43

score 0 · Accepted Answer · edited May 23 '17 at 12:09

I think this does what you want:

$(document).ready(function(){
  var images = [
    1,
    "http://t2.uccdn.com/en/images/5/9/2/img_causes_of_fever_in_cats_9295_300_150.jpg",
    "http://www.jimvysearks.co.uk/blog/wp-content/uploads/2014/06/duck_surfing-300x150.jpg",
    "http://brightworkcoresearch.com/wp-content/uploads/2013/12/beauty-in-nature-178495_1280-300x150.jpg",
    "http://www.educationworld.com/sites/default/files/Sun1.jpg"
  ];
  $("#imgTag").attr("src",images[images[0]]);
  (function loopImages() {
    ++images[0];
    if (images[0] == images.length) {images[0] = 1;}
    $("#imgTag").fadeOut(8000,function(){
      $(this).attr("src",images[images[0]]).fadeIn(500,function(){loopImages();});
    });
  })();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="imageDiv">
  <img src="" id="imgTag" />
</div>

jsfiddle: https://jsfiddle.net/9o2cw3hx/

I changed your individual img1-4 vars into an array containing all the images.
At index [0], the array also contains the index-number of the current image.
This index-number is incremented every time loopImages() is invoked (by itself, after the src is changed), in order to select the next image: ++images[0];.
After the last image in the array has been reached, the index-number is reset to the first image again: if (images[0] == images.length) {images[0] = 1;}.
In order to get the function executed the first time, I enclosed it like this: (function(){...})();. That's called an IIFE. This way, you don't have to manually invoke the function after declaring it.

I removed the src from your HTML and instead set it with jQuery, but that's obviously not necessary the way you set it using PHP (your way is better).
And I changed the images to literal strings for demo purposes, you can change those back to PHP.

OPTION 2

Alternatively, you can send the index-number along as an argument when you invoke the function:

(function loopImages(i) {
  $("#imgTag").fadeOut(8000,function(){
    $(this).attr("src",images[i]).fadeIn(500,function(){loopImages(++i<images.length?i:0);});
  });
})(1);

The first index in the images array, storing the index-number, is no longer necessary and can be removed (see the code snippet below).
The two separate lines for incrementing the index-number, and the if-clause, are now combined into one inline ternary operator when the function invokes itself again: loopImages(++i<images.length?i:0);
It works like this:
(1) It first increments i and checks if that incremented value is still less than the array-length.
(2) If it is, that (incremented) i is send along.
(3) If it isn't, 0 is send along, resetting the index-number to the first image in the array.

Personally, I like this option better, as it's more concise.

$(document).ready(function(){
  var images = [
    "http://t2.uccdn.com/en/images/5/9/2/img_causes_of_fever_in_cats_9295_300_150.jpg",
    "http://www.jimvysearks.co.uk/blog/wp-content/uploads/2014/06/duck_surfing-300x150.jpg",
    "http://brightworkcoresearch.com/wp-content/uploads/2013/12/beauty-in-nature-178495_1280-300x150.jpg",
    "http://www.educationworld.com/sites/default/files/Sun1.jpg"
  ];
  $("#imgTag").attr("src",images[0]);
  (function loopImages(i) {
    $("#imgTag").fadeOut(8000,function(){
      $(this).attr("src",images[i]).fadeIn(500,function(){loopImages(++i<images.length?i:0);});
    });
  })(1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="imageDiv">
  <img src="" id="imgTag" />
</div>

jsfiddle: https://jsfiddle.net/9o2cw3hx/1/

@Wayne I added an alternative option, check it out, it's a lot cleaner — myfunkyside, Jan 08 '17 at 12:18

making images move itself through jquery

2 Answers2

OPTION 2