Ways to easily modify images using a single button with the help of jq

Question

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn...

Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images start as hidden, and upon clicking the button, the first image appears with a fadeIn effect. Upon the next click, the first image disappears and the second image appears, and so on...

This is my HTML setup..

<button id="animeButton">Animate</button> <br>
<img id="firstPic" class="images" src="http://paladone.com/ 
image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">
<img id="secondPic" class="images" src="http://i2.wp.com/loyalkng.com/wp-      
content/uploads/2009/05/furious-george.jpg?w=557">
<img id="thirdPic" class="images" src="http://www.wallpaperist.com/ 
wallpapers/Cartoons/Donald-duck-furious-800-600.jpg">

This is my jQuery code...

$(document).ready(function() {
$(".images").hide();    
});

$(document).ready(function(){
$("#animeButton").click(function(){
$("#firstPic").fadeIn(2000);
//Need assistance in implementing further steps....
});
});

javascript jquery html css

Answer 1

Answer №1

To start, make sure to include a data attribute in the following way:

<img id="firstPic" data-id="1" class="images" src="http://paladone.com/ 
    image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

Next,

$(document).ready(function(){
    imgID = 1;
    $("#animeButton").click(function(){
        if (imgID>3) {
           imgID = 1
        }
        $($('[data-id="'+imgID+'"]')).fadeIn(2000);
        imgID = imgID+1
    });
});

Although it hasn't been tested yet, this code should function as intended.

Answer 2

To start, make sure to include a data attribute in the following way:

<img id="firstPic" data-id="1" class="images" src="http://paladone.com/ 
    image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

Next,

$(document).ready(function(){
    imgID = 1;
    $("#animeButton").click(function(){
        if (imgID>3) {
           imgID = 1
        }
        $($('[data-id="'+imgID+'"]')).fadeIn(2000);
        imgID = imgID+1
    });
});

Although it hasn't been tested yet, this code should function as intended.

Answer 3

Answer №2

Give this a shot:

$(document).ready(function() {
    $(".pictures").hide();

  var imageArray = ["firstImage","secondImage","thirdImage"];
  // assign attribute to button for next image
  $("#imageButton").attr("nextImage", imageArray[0]);
  var counter = 0;

  $("#imageButton").click(function(){
    var button = $(this).attr("nextImage");
    var currentVisible = $(".pictures:visible").attr("id");
    $("#" + button).fadeIn(2000, function() {
      counter += 1;
      if (counter >= imageArray.length) counter = 0;
      $("#imageButton").attr("nextImage", imageArray[counter]);
    });
    $("#" + currentVisible).fadeOut(2000);
  });
});

Answer 4

Give this a shot:

$(document).ready(function() {
    $(".pictures").hide();

  var imageArray = ["firstImage","secondImage","thirdImage"];
  // assign attribute to button for next image
  $("#imageButton").attr("nextImage", imageArray[0]);
  var counter = 0;

  $("#imageButton").click(function(){
    var button = $(this).attr("nextImage");
    var currentVisible = $(".pictures:visible").attr("id");
    $("#" + button).fadeIn(2000, function() {
      counter += 1;
      if (counter >= imageArray.length) counter = 0;
      $("#imageButton").attr("nextImage", imageArray[counter]);
    });
    $("#" + currentVisible).fadeOut(2000);
  });
});

Answer 5

Answer №3

Here is a solution for you to try:

$(document).ready(function() {
  $('.images').hide();

  var counter = 0;
  var picArray = [];

  $("div").find("img").each(function(index, value) {
    picArray[index] = $(this);
  })

  $('#animeButton').click(function() {
    if (counter == 0) {
      picArray[picArray.length - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
      })

    } else {
      picArray[counter - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
        if (counter > picArray.length - 1) {
          counter = 0;
        }
      })
    }
  });
});

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

<button id="animeButton">
  Animate
</button>
<br/>

<div>
  <img id="firstPic" class="images" src="http://paladone.com/image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

  <img id="secondPic" class="images" src="http://i2.wp.com/loyalkng.com/wp-content/uploads/2009/05/furious-george.jpg?w=557">

  <img id="thirdPic" class="images" src="http://www.wallpaperist.com/ 
wallpapers/Cartoons/Donald-duck-furious-800-600.jpg">
</div>

Answer 6

Here is a solution for you to try:

$(document).ready(function() {
  $('.images').hide();

  var counter = 0;
  var picArray = [];

  $("div").find("img").each(function(index, value) {
    picArray[index] = $(this);
  })

  $('#animeButton').click(function() {
    if (counter == 0) {
      picArray[picArray.length - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
      })

    } else {
      picArray[counter - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
        if (counter > picArray.length - 1) {
          counter = 0;
        }
      })
    }
  });
});

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

<button id="animeButton">
  Animate
</button>
<br/>

<div>
  <img id="firstPic" class="images" src="http://paladone.com/image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

  <img id="secondPic" class="images" src="http://i2.wp.com/loyalkng.com/wp-content/uploads/2009/05/furious-george.jpg?w=557">

  <img id="thirdPic" class="images" src="http://www.wallpaperist.com/ 
wallpapers/Cartoons/Donald-duck-furious-800-600.jpg">
</div>

Ways to easily modify images using a single button with the help of jq

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing User Experience with AJAX and JSON in Servlet JSP Applications

What is the best way to invoke a function from one controller in angularjs to another controller?

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

What is preventing this Javascript from running in Firefox and Chrome?

When trying to create a MongoStore object, an error occurred because the property 'create' was not defined

Discovering the initial vacant row within an HTML table with Javascript

Changes in React BrowserRouter URLs are not reflected on the page or components, requiring a manual refresh for them to

The functionality of Jquery events is limited when it comes to interacting with HTML elements that

What is the best way to manage HTML code that is delivered through JSON data?

The left-floated image extends beyond the boundaries of the div

"Utilizing jQuery's AJAX POST method with PHP is successful, while using XMLHttpRequest is not yielding

Creating a unique custom icon by leveraging the material UI icons - a step-by-step guide

Enhanced Organic Draping/Drifting

Executing a function from index.html that continuously loops without any limits

Expanding CSS styles on hover

How can I combine these scripts that are not working simultaneously?

Height of cells is often overlooked in webkit browsers

Transform a list separated by commas into an unordered list

Error: Unable to locate module: Could not find '@/styles/globals.scss'

When sending a POST request to my server and attempting to retrieve the body content, all properties, including arrays, are automatically cast to strings