Question 243668 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Swap image div-by-div

Need to swap image and title div-by-div like below website example e-Zest Insights
.

Here image and title changing div-by-div –
1st image replacing second div image and 2nd div image replacing third div image and vice versa with each div image.

enter image description here

var image1 = document.getElementById("image1");
var images1 = [
  "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg",
  "https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg",
  "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg"
];
var index = 0;

function updateImage1() {
  image1.src = images1[index];
  index = (index + 1) % images1.length;
}
setInterval(updateImage1, 1500);
body {
  padding: 20px;
}

img {
  max-height: 100px;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <img id="image1" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg" alt="">
    </div>
    <div class="col">
      <img id="image2" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg" alt="">
    </div>
    <div class="col">
      <img src="https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg" alt="">
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You only update 1 image, you will need to update all. See example below where I give all images the class image-slideshow and iterate over them. The url is determined based on the image index and the index of the forEach() iteration over the images.

    I started with index 1 to avoid a delay on the first iteration. In the first iteration with index 0 the urls end up the same as in the html.

    var imageUrls = [
  "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg",
  "https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg",
  "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg"
];
var imageIndex = imageUrls.length + 1;


function updateImages() {
  document.querySelectorAll(".image-slideshow").forEach((img, i) => {
    img.src = imageUrls[(imageIndex - i) % imageUrls.length];
  });
  imageIndex++;
}
setInterval(updateImages, 1500);
    body {
  padding: 20px;
}

img {
  max-height: 100px;
}
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <img class="image-slideshow" id="image1" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg" alt="">
    </div>
    <div class="col">
      <img class="image-slideshow" id="image2" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg" alt="">
    </div>
    <div class="col">
      <img class="image-slideshow" id="image3" src="https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg" alt="">
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Simply use an js Object and queue.

    JS:

    var images = {
  "Lorem Ipsum" : "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_640.jpg",
  "simply dummy text" : "https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_640.jpg",
  "specimen book" : "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_640.jpg",
  "the printing" : "https://cdn.pixabay.com/photo/2023/09/04/18/08/sunflower-8233332_960_720.jpg",
  "typesetting industry": "https://cdn.pixabay.com/photo/2012/06/19/10/32/owl-50267_960_720.jpg",
};

$(document).ready(function(){

  const keys = Array.from(Object.keys(images));

  function swapImages(){
    // for forward
    keys.splice(0, 0, keys.pop());  // take out the last and push to first
  
    // for backward
    // keys.push( keys.shift() );  // take out the first and push to last
  
    keys.forEach((key, i) => {
      img = images[key];
      const span = $($(".image-swap span")[i])
      $('img', span).prop('src', img);    // update image
      $('label', span).html(key);         // Update text
    });
  }
  
  swapImages();
  setInterval(swapImages, 3000); 
});

    HTML:

    <div class="image-swap">
  <span>
    <img class="large" src="">
    <label></label>
  </span>
  <div class='wrap'>
    <span> <img src=""> <label></label> </span>
    <span> <img src=""> <label></label> </span>
    <span> <img src=""> <label></label> </span>
    <span> <img src=""> <label></label> </span>
  </div>
</div>

    CSS:

    .image-swap{
  display: flex;
  gap: 10px;
  flex-direction: row;
}

.image-swap .wrap{
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap:wrap;
}

.image-swap span{
  position: relative;
}

.image-swap label{
  position: absolute;
  color: #fff;
  font-weight: bold;
  bottom: 30px;
  left: 15px;
}

.image-swap img{
  width: auto;
  height: 200px;
}

.image-swap img.large{
  width: auto;
  height: 400px;
}

    JSFiddle demo:
    https://jsfiddle.net/Dananjaya/j15osLbx/113/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search