Button to change image - Jquery

Nemmem
January 21, 2023
102 views
0 votes
2 Answers

I want to make that when pressed left or right button shows up this image images/2header-pic.jpg with jquery.

I tried some code from here that I found, but nothing works. My code is:

Edit: Added some more css and html code maybe it doesn`t work because of my other code.

HTML

 <div id="header-info">
            <div class="header-info-text1">
                <div class="image-info-header">
                <span id="infoimg-left"><button id="infoimg-left-button"><i class="fas fa-angle-left fa-2x" class="infoimg-left"></i></button></span>
                <img src="images/headerinfoimg.jpg" id="infoimg-id" class="infoimg">
                <span id="infoimg-right"><i class="fas fa-angle-right fa-2x" class="infoimg-right"></i></span>
                </div>
                <p>
 TEXT
                </p>
            </div>
        </div>

CSS

#header-info {
    width: 100%;
    color: #fffffe;
    display: flex;
    background-color: #ff8906;
}

.header-info-text1 {
    top: 50%;
    position: absolute;
    float: left;
    transform: translateY(-50%);
    background-color: #ff8906;
    width: 100%;

}

.header-info-text1 p {
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.infoimg {
    float: right;
    width: calc(50%);
    margin: -20px calc(5%);
    
}

#infoimg-left {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: calc(48%);
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.35);
    padding: 3px;
    border-radius: 80px;
    width: 40px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    color: #fffffe;
    border: none;
}

Answers

You can do this with JQuery iusing the click method to handle click events.

The image is changed by updating the "src" attribute. Note that you need to add some random number otherwise the image won’t change because the browser will use the one cached.

Here’s a demo.

$("#infoimg-left").click(function() {
  console.log("Handler for .click() called.");
  var src = "https://picsum.photos/200" + "?" + Math.random();
  console.log("new image:", src);
  $("#infoimg-id").attr("src", src);
});

#infoimg-left {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: calc(48%);
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.35);
  padding: 3px;
  border-radius: 80px;
  width: 40px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  color: #fffffe;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-info-header">
  <span id="infoimg-left"><button id="infoimg-left-button"><i class="fas fa-angle-left fa-2x" class="infoimg-left"></i></button></span>
  <img src="images/headerinfoimg.jpg" id="infoimg-id" class="infoimg">
  <span id="infoimg-right"><i class="fas fa-angle-right fa-2x" class="infoimg-right"></i></span>
</div>

Create array of path to images:

    
    // create array of images urls 
    const images = [
      'https://cdn.britannica.com/67/19367-050-885866B4/Valley-Taurus-Mountains-Turkey.jpg',
      'https://cdn.unenvironment.org/2022-09/nicolai-kramer-unsplash.jpg',
      'https://thumbs.dreamstime.com/b/idyllic-summer-landscape-clear-mountain-lake-alps-45054687.jpg'
    ]
    
    // create index number
    let idxImg = 0;
    
    // define img element
    const imgNode = document.querySelector('img');
    
    // set default images
    imgNode.src = images[idxImg];
    
    // listen click on button
    const btn = document.getElementById('next');
    btn.addEventListener('click', () => {
      idxImg++;
      idxImg = idxImg >= images.length ? 0 : idxImg;
      imgNode.src = images[idxImg];
    })

img {
  width: 200px;
}

<img src="">
<div>
  <button id='next'>NEXT</button>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Button to change image – Jquery

Answers